Angular 2

Bootstrapping in Angular application

July 17, 2019 by ashish Leave a Comment

Angular application is initialised or bootstrapped based on the configuration and the specified properties.The important parts of Angular application from bootstrapping point of view are:

main.ts This file defines the starting point of the angular application.It is defined by the following line in main.ts:

platformBrowserDynamic().bootstrapModule(AppModule);

We need to understand how this works.Angular initializes / bootstraps our application when the bootstrapModule() method is called.We pass the name of the root module to this method.So if our module is called AppModule then we call it as:

platformBrowserDynamic().bootstrapModule(AppModule)

bootstrapModule is in the @angular/platform-browser-dynamic.In the above line AppModule is the name of our root Module which we want to bootstrap.The platformBrowserDynamic object specifies that we want to execute the application in a browser.Please note Angular applications can execute on different types of platforms and not just on browser.

2. app.module Next important part for BootStrapping is the root Module which we passed to the bootstrapModule() method in step 1.The bootstrap property in the AppModule decorator specifies the component which we want to use for launching the application.Now Angular tries to find the selector specified of the roor component in DOM and initializes the component.Here the root component is declared as AppComponent.

We specify the bootstrap property in NgModule as:

@NgModule({
bootstrap: [AppComponent]
})

3. RootComponent this is the actual component which defines the selector which is used for initializing the application.Our component is declared as:

@Component({
selector: 'app-root',

templateUrl: "./app.component.html",
...
})

export class AppComponent
{
}

4.index.html This file actually declares the selector of the root component which we have declared above.

This relation can be depicted with the following image

ashish

Follow on:

Checking for null and undefined collection in ngFor in Angular

January 8, 2019 by ashish Leave a Comment

Checking for undefined in ngFor in Angular 6

We use ngFor loop in Angualr 6 for iterating through list of items.Before iterating we should check whether the collection used in the ngFor contains any elements.We can check if collection contains any elements by using the following syntax:

names is a string colllection defined as:
names:string[];

We check if names is not undefined by just assigning the collection to *ngIf as:

<div *ngIf="names">
<div *ngFor="let name of names">
{{name}}
</div>
</div>

above loop will not print the names as names is undefined

Checking if collection consists of any elements

names:string[];

<div *ngIf="names.length>1">
<div *ngFor="let name of names">
{{name}}
</div>
</div>

the above loop will not print names as it doesn’t consist of any elements.
Now if we assign the names as:

names:string[]=['angular 2','angular 6']

then it will print:
angular 2
angular 6

ashish

Follow on:

Comparing React and Angular

November 4, 2017 by ashish Leave a Comment

Both React and AngularJS are JavaScript (JS) technologies used for developing single-page applications (SPAs).Angular is developed by Google while React is developed by Facebook.

Architecture

React is just a library for developing UIs while Angular is a JavaScript framework.Angular implements the MVC architecture.

Angular applications typically have three different components

Model
View
Controller

React on the other hand is used to create just the view.

Data Binding

Angular supports two way data binding while React supports one way data binding.

Angular supports change management using watcher.There is a watcher created for each binding.For each change in the UI all the watchers are executed by the digest loop.This has severe performance penalty.

React on the other hand uses server side rendering and Virtual DOM. DOM which consists of JavaScript objects is created on the server.
When a value on the UI element changes only the HTML for that changed element is sent to the browser instead of complete HTML.

Language

AngularJS applications are written in JavaScript.Angular version 2 and above applications can be developed using TypeScript or Dart.This gives a huge advantage to developers since TypeScript provides lot of features not available in JavaScript.

React components are written in JSX, which is language which runs on browsers.It is a statically-typed, object-oriented programming language.

Mobile development

In the case of React it is React Native, which allows native Android, iOS development with React.Angular 2 can be used with Ionic 2 to develop mobile applications.

Learning Curve

Since it is a framework and Angular applications follows the MVC architecture ,Angular has a steep learning curve compared to React which is just a library for developing User Interface.

ashish

Follow on:

AOT(Ahead-of-Time Compilation) in Angular

October 25, 2017 by ashish Leave a Comment

When executing application developed for any framwork ,application needs to be compiled before it can run.This compilation
happens when the application is executed(JIT) or it can happen before the execution of the application(AOT).

JIT or Just in time compilation happens when the angular application is loaded in the browser.This results in relatively
slow application since application needs to be compiled before it can be rendered in the browser.JIT compiler performs
this compilation.

In contrast AOT or Ahead of time compilation is performed by the AOT compiler in advance and not at run time.This results
in application which loads quickly since the extra compilation step is not performed at run time.Another advantage is that
in AOT runtime errors are reduced since you are not doing the compilation at runtime.So you can reduce run time erros.

Another advantage of AOT compilation is that download size of the application is reduced.Since the Angular compiler is almost half the size of the entire application ,in AOT compiler does not needs to be downloaded on the browser.

To perform AOT in your application you need to follow the below steps:

1.To perform ahead of time compilation you need to use the ngc compiler.You can get this compiler from the @angular/compiler-cli npm package.

Once you download this package you need to configure the tsconfig.json for AOT compilation.Specifically you need to add the following angularCompilerOptions section:

"angularCompilerOptions": {
"genDir": "directoryName",
"skipMetadataEmit" : true
}

directoryName is the name of the directory which stores the compiled output files.

2.Once you get the ngc compiler and add the above section in the config file you can AOT compile the application using the ngc compiler and providing the config file:

node_modules/.bin/ngc" -p tsconfig.json

The above process create the factory files in the mentioned folder.

3.Now instead of bootstrapping the AppModule you bootstrap the corresponding factory AppModuleNgFactory

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

ashish

Follow on:

Routing in Angular 2

June 1, 2017 by ashish Leave a Comment

Routing in angular application is used for selecting different views on the client side.In a normal web application when we click on any hyper link on a page ,this results in a new request to the web server.Web server returns HTTP response to the browser.So every request for a new view or page is a separate HTTP request.

Since Angular is a client side SPA framework so there is difference in how the request for a new view is handled by Angular.Instead of requesting a view or HTML page from the server Angular loads a new view which is already present on the client.

Following are the important components of routing in Angular application

Routes collection of routes mapping URLs to components which will handle request for the URL.You define routes at a single place,usually the main module of your application.Routes are set in the @NgModule decorator’s import property.
router-outlet Placeholder which will display the view corresponding to the matching route defined in the routes collection
RouterLink Directive which is used in anchor tag of HTML for navigating to different views defined by the routes

To implement routing in Angular 2 application follow the below steps

1.Define routes of your application.Assign the routes to the Routes variable

We have defined two routes below.The default route is handled by featurecomponent component.The feature path is handled by the Detailscomponent component.

const routes:Routes=[{path:'',component:Homecomponent},
{path:'feature',component:Detailscomponent}]

pass the above routes as a argument to forRoot() method.

export const routing=RouterModule.forRoot(routes)

2.Pass the routing variable to the imports property of root module in NgModule decorator function

@NgModule({
imports: [ BrowserModule,routing ],
...

3.router-outlet Placeholder which will display the view corresponding to the matched route.

4.Add the router-outlet and RouterLink in the root component of the application

import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `<a [routerLink]="['/']"> feature</a>
<a [routerLink]="['/feature']"> feaure1</a>
<router-outlet></router-outlet>
`
})

Defining parameters in the route.If you want to pass parameters to your component then you should specify these parameters when defining the corresponding route for your component.You specify these patterns using the “:” after the “/”.If your component expects parameter called id then you can define id parameter in the route path as:

{path:'/home/:id',component:Homecomponent}

you can now access the id parameter in your homecomponent as:

this.activeRoute.queryParams.subscribe(params => {
const id= params['id'];
}

When implementing routing in Angular application the first decision is to decide on the LocationStrategy. There are two location strategies which can be used in Angular 2 application:

PathLocationStrategy
HashLocationStrategy

PathLocationStrategy is the default and uses the HTML 5 history API.This means that this strategy is supported only by the new browsers which supports HTML 5.
HashLocationStrategy This uses hash “#” to separate the base URL from the different views which will be served by the Angular application.

ashish

Follow on: