Spring Framework 3.

0
ANGULAR 4 BASICS
What is Angular (Angular 2)?

• Next version of most successful AngularJS 1.x

• Finally released on 14th Sep, 2016. It is called Angular 2.0.0.
• It has been optimized for developer productivity, small payload size, and performance.
• Developed using TypeScript, which is Microsoft’s extension of JavaScript that allows use of all
ES 2015 (ECMAScript 6) features and adds type checking and object-oriented features like
interfaces.
• You can write code in either JavaScript or TypeScript or Dart.
• Designed for Web, Mobile and Desktop Apps.
• Not an upgrade of Angular 1. It was completely rewritten from scratch.
Differences between AngularJS and Angular2
• Called as AngularJS 1.x and Angular.
• Components are used instead of Controllers and $scope. A component is a class with its own data
and methods.

• Option to write code in different languages.

• Designed for Speed. Supposed to be 5 times faster than Angular 1.

• Designed for Mobile development also.

• More modular. It is broken into many packages.

• Data binding is done with no new directives. We bind to attributes of html elements.

• Event handling is done with DOM events and not directives.

• Simpler API
Building Blocks

• The following are important components of an Angular application.

1. Modules

2. Components

3. Templates

4. Metadata

5. Data binding

6. Directives
7. Services

8. Dependency injection
Module
• Angular application is a collection of many individual models.
• It contains code that can be export to another module or can be imported by other modules
• Angular framework is a collection of modules
Module
• A module is a class that is decorated with @NgModule decorator

• Every application contains at least one module called root module, conventionally called as
AppModule.

• NgModule decorator provides information about module using properties listed below:

• Declaration – classes that belong to this module. They may be components, directives and pipes.

• Exports – The subset of declarations that should be visible to other modules.

• Imports – Specifies modules whose exported classes are needed in this module.

• Bootstrap – Specifies the main application view – root component. It is the base for the rest of the
application.
Module Example

• The following code shows how to create a simple module:

AppModule.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-
browser';
import { FirstComponent } from './first.component';
@NgModule({
imports: [ BrowserModule], declarations: [ FirstComponent], bootstrap: [ FirstComponent ]
})
export class AppModule { }
Component

• A component controls a part of the screen called view.

• Every component is a class with its own data and code.

• A component may depend on services that are injected using dependency injection.

• The template, metadata, and component together describe a view.

• Components are decorated with @Component decorator through which we specify template and
selector (tag) related to component.

• Properties like templateUrl and providers can also be used.

• E.g if we have a page that contains navigation bar,leftside bar, right side bar, main contents
• Each portion is represented using component
• There is atleast one component which is root component and other componets are child
components of it
• E.g

• FirstComponent.ts
• import { Component } from '@angular/core';
• @Component({
• selector: 'my-first’, // tag to be used in view
• templateUrl : './first.component.html'
• })
• export class FirstComponent {
• title : string = “KLFS Solutions";
• }
• Templates
• You define a component's view with its companion template.

• A template is a form of HTML that tells Angular how to render the component.

• Metadata
• Metadata provided using decorators inform Angular how to process a class.

• For example, @Component decorator tells Angular to treat a class as a component and also provides
additional information through attributes of decorator (like selector, template etc.)
• Data Binding
• Data from objects should be bound to HTML elements and vice-versa, known as data binding.

• Angular takes care of data binding.

• Enclosing property (attribute of HTML element) copies value to property.

• Enclosing event in parentheses () will assign event handler to event.

• Interpolation allows value of an expression to be used in HTML

• The ng-model is used to for two way data binding.

Directives
• A directive transforms DOM according to instructions given.

• Components are also directives.

• Directives are two types - structural directives and attribute directives.

• Structural directives alter layout by adding, removing, and replacing elements in DOM.

• Attribute directives alter the appearance or behavior of an existing element. In templates they
look like regular HTML attributes, hence the name.
• *ngFor and *ngIf are structural directives.

• ngModel and ngClass are attribute directives.

• Components also defines html elements but it is not inside other elements
• But attribute directives are inside other html element
• Directive is also metadata+ class
• Services
• A service encompasses any functionality.

• A service is a class with a specific purpose(functionality) can be used by multiple components.

• Components consume services.

• Services are injected into Component that use them.

• Dependency Injection
• Dependency injection is a way to supply a new instance of a class with the fully-formed
dependencies it requires.

• Components get access services they need through dependency injection.

• An injector contains instances of services. It injects them into other services and components as
and where they are needed.
Services
Router
• It decides which view should appear based on URL
Angular 4 setup

• It is important to setup development environment for Angular in your system. Here are the
steps to take up:
• Install Node.js and NPM
• Install Node.js and NPM. Node.js is used run JavaScript on server and provide environment
for build tools.
• NPM is used to manager packages related to JavaScript libraries. NPM itself is a Node
application.
• To install, go to https://nodejs.org/en/download and installer (.msi) for 32-bit or 64-bit. Do the
same for other platforms like Mac etc.
• Run .MSI file to install Node.js into your system. It is typically installed into c:\Program
Files\nodejs folder.
• Quickstart seed, maintained on github, is quick way to get started with Angular local development.
• Follow the steps below to clone and launch quickstart application.
• 1. Create a folder for project. Let us call it demo.
• 2. Download quickstart seed from https://github.com/angular/quickstart/archive/master.zip
• 3. Extract quickstart-master.zip into folder created above.

• 4. Install all packages mentioned in packages.json file using:

• Change the folder to demo give command
npm install
• After npm downloaded required packages given in package.json,
• start application using the following command. It starts server and monitors for changes in the
application.
npm start
Package.json
• It includes dependancies property
• These will get downloaded when you use
npm install
• All modules will get downloaded in node-modules folder
npm start
Start command from package.json will get executed

• Will execute typescript compiler

• And start lite server
• Type script compiler will convert code in es5 format
• There are certain component added in ES6 version which is used by browser
• So we need file typings.config
typings.json
• We need one more file to tell javascript compiler about typescript code
• So the tsconfig.json is there
Systemjs.config.ts
• This file helps in loding of the modules and stores details about default extension
Index.html
• This file can be divided into 3 parts
App folder
• This folder contains all files required for our application
• It contains the files with extension .js and .ts but ignore .js files
• These are generated file. .ts file we will write and modify.
App.component.ts
• This is our root component.
• All other components will be included here
Run the code
• To run the code
• Change the folder to demo
npm start
Add new component
• Modify app.component.ts
Import
• In template use back quot when it contains multiline code
the
compon
ent

Array that
contains list of
components to
be used in in
this component
Adding style to the component
Interpolation
• Intepolation can be done by using {{ name }}
• Or by using [ ] example src attribute of img tag // note : don’t add end tag
Difference between property and Attribute
• The value of property can be changed
• But the value of attribute cannot be changed

• If you render the page and in console window give command

• Check values in console window

• Change value of text box to Kishori.

• The value of property will change but attribute will not
• In the given code src is property and not attribute. Mostly there is one to one mapping in
property and attributes. But there is difference in both
Applying style using classes
• Ternary expression for class binding
Event Handling
• Click event handled in the code below
Using references
• #mytext is a reference to text box value can be used in event

#mytext is a
refernce to
text box
To refer event

• <button type="button" (click)="MyClick($event)">click me</button>

• Use $ event to refer event
Two way binding
• For two way binding we use ngModel
• Since we use both event handling and property assigning ngModel need tobe enclosed in
[(ngModel)]
Directives in Angular 2
• 3 types of directive
➢ Component
➢ Structural
➢ Attribute
• Structural
• ngIf – based on value of showElement either paragraph will be displayed or hidden
• ngFor – use to repeat elements
Attribute directive
• ngClass
Pipe operator
• String
• Number transformation

• Number:1.2-3 – indicates 1 digit before decimal min 2 after decimal maximum 3 after decimal
if number of digits are more rounding of number will be done
• Currency transformation
• {{8.99 | currency : ‘EUR’}} ----- EUR 8.99
• {{8.99 | currency : ‘EUR’:true}} – Euro symbol will be displayed
• Date transformation
• You may use mediumTime
Drawbacks of not using DI

Class car creates engine object

So tight coupling is there. Any change in engine class will lead to change car class
Services
• Services are injectable hierarchically.
HTTP
Routing
app.module.ts

ng generate component my-new-component ng g component my-new-component

Index.html
-router-outer is ng directive used for routing.
The view will get loaded at this position based on url