Using

Angular Framework to create Single

Page Application
Learning Objectives
Angular Application

What is Angular-Bootstrapping?
How is Angular loaded?
How do I create components using CLI?
What is the difference between Module and
Component?
 Overview
Angular Application

Create your first Angular Application.

Angular Bootstrapping.
Create components using Angular CLI.
Work with components templates.
Work with styles.
Databinding.
 Creating your First Angular Application
Angular Framework: Angular 4.0

After setting up development environment, use any IDE of your choice such as
Visual Studio Code

Visual Studio Code is a free tool and can be downloaded from the web

Open Visual studio code and go to view - Integrated Terminal

Create a new project:

 ng new appointment - manager

The above command downloads all required components and creates your
first Angular Application
 npm -version
Node JS

ng -version

Angular CLI
ng new helloworld

Typescript

Angular setup
First Angular Application
Visual Studio Code
Section 2: Bootstrapping

How is Angular loaded?

 When you run
http://locahost:420
0 launches
ng-serve helps you index.html file.
test your app locally.It Angular Framework
launches a server on attaches scripts to
port 4200 the head of
Index.html. These
scripts internally
call main.ts file

main.ts file is executed as it informs Agular's SystemJS tool exactly how to

assemble our application when we launch it
AppModule refers to app.module.ts file inside app folder

In AppModule, we use a decorator called @NgModule.

NgModule is an Angular Module which describes how the

applications gets together
 Components

App Component is the root component .We can

add other components to it

Each component has its own template, own

business logic and own styling

Allows reusability easily replicate the logic

Need not squeeze everything into one single js

file
 Creating a new component
www.appointmentbooking.com

Home Login

component 1 LEFT PANE

Appointment
Task View

component 2
component 3
 MODULE
Module is a bundle of
functionality of our app
COMPONENT .Gives angular information
which features of app has in
use
Build web pages Modules are used to
organize areas of an Angular
application into cohesive
areas of functionality
Module may contain
multiple components

@NgModule decorator decorates

and we make the AppModule @NgModule is imported from
class a module @angular/core
 @NgModule

Declarations
@NgModule

Imports

Providers

Bootstraps
Section 3: Creating Components using CLI
 ng generate component <componentname>

Create (css,html,.ts and.spec file) spec file

is used for testing ()

appointment.component.ts would have a “ selector” of “app-

appointment” and this can be used in the app-component.html.
Can even be reused with <app-appointment> repeated wherever
we want
 Section 4: Working with components templates
Angular Application

Each component needs to have a template

Templates can be externalised or written inline

Change from ‘(single quote) to using (back tick) to use JS template

expressions and therefore you can write multiline scripts

@Component({ @Component({
selector: 'app-appointment', selector: 'app-appointment',
templateUrl:
'./appointment.component.html', template:`<div><h1>hello</h1></div>`,
styleUrls: styleUrls:
['./appointment.component.css'] ['./appointment.component.css']
}) })
Section 5:Working with styles
 You can add styles to components. In the app component, if
you want to limit it to just app component, then you can go to
app component css file, it would be limited to app component
 You can use styling in styles[]
 You can also use “attribute” selector
 Section 6: Data Binding

O/p data which is dynamic

Databinding is communication between TS and

HTML
 Data binding = TS and HTML interaction
O/P Data

{{Data}} (Interpolation)
H

[Property] “Data” (Property Binding) T

TS Code
Event Binding M
(Business
Logic)
L
{Event} = “Expression”
{UJ}
Layer

[(ngModel = “data”)]
2 way Binding
END OF MODULE 1