AngularJS

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:

Use and example of ngClass in AngularJS

May 4, 2017 by ashish Leave a Comment

ngClass directive let us add the CSS class at run time.We will understand this by use and example of ngClass in AngularJS.This is useful in many scenarios:

Suppose we want to add a particular class when a control is disabled and other CSS class when the control is enabled the we can use boolean expression with ngClass
If we want to specify class names we can specify class names as comma separated values.
A common use is specifying an object with a string key and boolean value.In such case the string key will be used if
the boolean value is true.

In the following example employeeClass CSS class will be applied to div if the IsEmployee variable is true

<div ng-class="{employeeClass:IsEmployee}"></div>

We can even specify multiple boolean conditions.In such case the corresponding classes will be applied if the variable is true

ng-class="{employeeClass:IsEmployee,consultantClass:IsConsultant}"

We can bound the IsEmployee and IsConsultant variables to a control such as checkbox

<input type="checkbox" ng-model="IsConsultant">
<input type="checkbox" ng-model="IsEmployee">

We can define the classes corresponding to the two variables as:

.employeeClass {
font-weight: bold;

}
.
consultantClass {
font-weight: normal;

}

ashish

Follow on:

ng-include directive in AngularJS

May 1, 2017 by ashish Leave a Comment

ng-include directive in AngularJS is used to include html content from another file.It is useful when we want to split the html in multiple files.There can be multiple reasons of placing html in different files:

To split a complex UI into simpler html pages
To display html conditionally

To use ng-include use it as:

<element ng-include="file" ></element>

For example to display html content of file1.html in a div use:

<div ng-include="file.html"  ></div>

To split the html content into different files use:

<div element ng-include="file1.html" ></div>
<div element ng-include="file2.html" ></div>
<span element ng-include="file3.html" ></span>
<span element ng-include="file4.html" ></span>

To conditionally display html content of file1.html in a div use:

<div ng-if="expression" ng-include="file.html"  ></div>

expression can be any valid expression returning boolean value.For example employee.html will be included if isEmployee variable is true.Otherwise the div element will be completely removed from DOM.

<div ng-if="isEmployee" ng-include="employee.html"  ></div>

The contents of the file employee.html will be inserted as child elements of div element.

We can separate UI into different html files and include them in the main html page using ng-include directive.

ashish

Follow on:

Routing in AngularJS

May 1, 2017 by ashish Leave a Comment

Navigation is one of the most important aspects of any web application.Navigation means loading different UI based on user input and selection.Routing in AngularJS means selecting different views depending on the browser URL.

Application consists of different UI elements defined in different views.To change the view displayed to the user routing is used.Routing in AngularJS simplifies the process of defining the URL structure and mapping URLs to the views.

AngularJS handles routing using ngRoute module.To implement routing in AngularJS application follow the below steps:

1. create AngularJS module

Pass ngRoute as second parameter.This specifies dependency on ngRoute module.AngularJS automatically injects ngRoute object when we create the module as below:

var app = angular.module("myApp", ["ngRoute"]);

2.call the config method

This function is used to configure the module.In the function parameter we specify $routeProvider as a parameter.AngularJS automatically creates $routeProvider object.

app.config(function($routeProvider) {

});

3.Define routes: We define routes using the when function of the $routeProvider object.$routeProvider provides when method which is used to configure routes.Two parameters needs to be passed to when method.The first is the URL pattern.Second is the object which defines useful properties.At the most basic level you need just two properties controller and templateUrl.

app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "page1.html",
controller: 'Controller1'
})
.when("/page2", {
templateUrl : "page2.html",
controller: 'Controller2'
})
.when("/page3", {
templateUrl : "page3.html",
controller: 'Controller3',
})
.when("/page4", {
templateUrl : "page4.html",
controller: 'Controller4',
});
});

To add multiple routes you can use chain of when() methods.

When method takes location or URL pattern as one of the parameters.If the requested URL matches this pattern then matching route is used to display the view.
For example in the above example when the application is requested then page1.html is loaded by default.When /page2 is requested then page2.html
is loaded.

4. Define ng-view in the main page.

To display the content of the matching file,add ng-view directive in the main html page.The ng-view directive renders the template of the selected route.Include it in main html page ,e.g index.html

<ng-view>
</ng-view>

ashish

Follow on:

@Input and @Output decorators in Angular 2

April 25, 2017 by ashish Leave a Comment

Angular 2 application consists of a collection of components.Components in Angular 2 application need to interact with other components in the application.
Angular 2 provides two useful property decorators for interaction between components.

Input and Output decorators are used to pass data into and out of the component.We attach the decorators to the component properties.

@Input is attached to a property that can be used for property binding
@Output is attached to a property that can be used for event binding

To identify a property as input we annotate the property with @Input() decorator.

@Input() 
name : string;

We can alias the property name.Aliasing property means that property will be accessed using the alias instead of actual name.
For example in the following example name property will be accessed using the identifier employeeName instead of name.

@Input('employeeName') 
name : string;

Similarly to identify a property as output we annotate the property with @Output() decorator.

In the below example we are declaring a property as output.@Output decorator is used with EventEmitter datatype.

@Output() 
sendInfo = new EventEmitter<string>();

We can alias @Output() property which will allow us to use different name when binding the property

import { Component, Input } from '@angular/core';

@Component({
selector: 'sample-component',
template: '<div>{{name}}</div>'
})
export class SampleComponent {
@Input() 
name : string; 
constructor() {}
}

<sample-component [name]="employeeName"></sample-component>

ashish

Follow on: