Angular
Framework for developing Single Page Application
o SPA contains only one page (index.html)
o The page changes the elements (contents) dynamically
Pre-requisite
o Can use JS or TS (TS is proffered)
o ng-cli
Tool(s) to create/manage the angular application
Install using npm
sudo npm install –g @angular/cli
Commands
new: used to create a new application
o ng new <app name>
serve: used to run the angular application
o ng serve
generate:
o used to generate
component/service/pipe/directive
o ng generate <type> <name>
o ng generate component my
o ng generate service my
o ng generate pipe my
o ng generate directive my
Angular application structure
e2e: end to end testing (test cases)
node_modules:
o contains the dependency modules
o @angular/core:
o @angular/common:
o @angular/forms:
o @angular/http:
o @angular/animations
o @angular/router:
src:
o contains application’s
pages/components/assets/configurations
o app:
contains application source code
app.module.ts:
contains the configuration about the module(s)
declarations:
imports:
providers:
bootstrap:
o assets:
contains application assets
e.g. images/audio/video etc
o environments:
contains the configurations about the environments
(machine)
e.g.
environment.ts: development
environment.prod.ts: production
environment.test.ts: testing
o favion.ico: image which is displayed on the browser’s tab
o index.html: the page which is loaded at the beginning
o main.ts: loads the angular application
o polyfills.ts: contains the implementation of the features
which are introduced in ES5/ES6 but are missing in the
standard JS (browser does not understand these features)
o styles.css: contains the global styles
o test.ts: contains the test cases
o tsconfig.app.json: used to specify application-specific ts
configuration
o tsconfig.spec.json: used to specify application-specific ts
configuration related to test cases
o typing.d.ts:
contains the declarations/definitions of third party js
libraries
configuration files
o .angular-cli.json: contains the ng-cli configuration
o .editorconfig: contains configurations related to editor
o .gitignore: used to ignore files at the time checking – in the
files in git repository
o karma.conf.js: used to configure the karma testing tool to
run the test cases
o protractor.conf.js: used to configure the test cases tool
o package.json:
used to configure the application
contains dependencies
used to run the application
contains dev-dependencies
used to run the application on development
environment
o README.md
Read me file which contains
steps to install/configure application
steps to deploy the application
o tsconfig.json: contains the configuration related to typescript
o tslint.json: contains the ts-linter configuration
Angular Fundamentals
Module
o Collection of classes/enums/functions
o Angular uses NgModule to create a module
o Every application must contain at least one module
(AppModule)
o E.g.
import { NgModule } from ‘@agular/core’;
@NgModule({
declarations: [],
imports: [],
providers: [],
bootstrap: []
})
export class AppModule {
}
o where:
declarations:
contains the list of classes which part of this
module
it may contain
o Component class
o Pipe class
o Directive class
imports:
Contains list of dependency module
providers:
contains list of classes which provide services
contains list of services (classes)
bootstrap:
list of classes which will be loaded by default
Component
o Re-usable entity
o Encapsulates
Data
To render the data, class uses data members
View:
Uses the template and CSS to render a view
Logic
o Angular uses @Component to create a new component
o E.g.
import {Component} from ‘@angular/core’;
@Component({
selector: ‘<tag name>’,
template: ‘<html code>’
})
export class MyComponent {
}
o Where
selector: tag which is used as a container
template: used to define the html code (view)
styles:
templateUrls:
styleUrls:
o To add a custom component:
Create a component class inside src/app
(my.component.ts)
Add meta-data related to Component
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: '<h1>My Component</h1>'
})
export class MyComponent {
Declare the component class in AppModule’s
declarations (src/app/app.module.ts)
Metadata
o Extra information added to the class
Binding
Types
o Interpolation
Use {{ }} to insert the value of a variable
E.g.
// display the value of personName inside the div
<div>{{personName}}</div>
o Attribute binding
o Class Binding
o Event Binding
Add bootstrap to angular project
Install bootstrap
o npm install --save bootstrap
load bootstrap css
o use @import to load bootstrap css
o open styles.css and add
@import ‘~bootstrap/dist/css/bootstrap.css’
where ~ represents node_modules
Creating Re-usable Components
every component can receive input from its consumer
o to receive an input from consumer
import Input from @angular/core
call @Input function on the class members
user the class members
every component may emit an event as its output
o to emit an event
import Output and EventEmitter from @angular/core
call @Output() on the event emitter object
call emit() on event emitter when the event is getting
occurred
export class FavoriteComponent {
@Input() isFavorite:boolean = false;
@Output favoriteToggled = new EventEmitter();
.
.
toggle() {
// occur an event
this.favoriteToggled.emit();
}
}
Directive
Instruction(s) given to angular to perform some action(s)
Types
o *ngFor
used to iterate over a collection
exposes built-in variables
index: position
first: true if the element is at the first position
last: true if the element is at the last position
even: true if the position is even position
odd: true if the position is odd position
syntax:
<div *ngFor=”let <tmp> of <collection>”></div>
E.g.
<div *ngFor=”let contact of contacts”></div>
o *ngIf
used to add a conditional logic
Syntax:
<div *ngIf=”<condition>”></div>
E.g.
<div *ngIf=”contacts.length == 0”>no
contacts</div>
the div will be added to the page when the
contacts array is empty
otherwise the div element will NOT be added
o *ngSwitchCase
used to select an element based on condition
Syntax:
<div [ngSwitch]=”<variable>”>
<div *ngSwitchCase=”<value>”>
contents</div>
</div>
E.g.
selectedValue = 1;
<div [ngSwitch]=”selectedValue”>
<div *ngSwitchCase=”1”> value 1</div>
<div *ngSwitchCase=”2”> > value 2</div>
<div *ngSwitchCase=”3”> > value 3</div>
</div>
Add Http module
Import HttpModule in app.module.ts
import { HttpModule } from '@angular/http';
Add HttpModule in imports list
Imports: [
BrowserModule,
HttpModule
]
