Keywords and Helpful Definitions

In this section, I would like to highlight some of the key features and how to work with them in Angular 2.

Modules These are helpful to create boundaries in an application, meaning instead of coding everything in one module, these modules will help developing functionality separately. app.module.ts in app folder is the root module class available in an project solution.

A module is made up of following parts:

• Bootstrap array: This is used to tell Angular which components needed to be loaded. Once the component is included in this array, it needs to be declared so that they can be used across other components within the application.
• Export array: This helps to define export components, directives and pipes which can be used in other modules of the application
• Import array: Helpful to import the functionality from other modules of the application

Example of app.module.ts file in an typical Angular application is as below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule ({

imports: [ BrowserModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})
export class AppModule { }

Components are the logical piece of code in an Angular application, which consists of the following. app.components.ts class in app folder contains all the definitions of components for the application.

• Template: This contains the HTML that needs to be rendered as a view of the application, which also includes binding and directives in it.
• Class: This is like any class defined in an object oriented world which contains properties and methods to support the view and defined in TypeScript.
• Meta Data: This has the extra data defined for the Angular class. It is defined with a decorator.

Example of app.components.ts class is as follows:

import { Component, Input, OnInit } from '@angular/core';
import { Product } from '../../interfaces/products/product';
import { NgForm } from '@angular/forms';

// template assignment by defining the component
@Component ({

selector: 'ProductDetails',

templateUrl:'app/views/products/productDetailsView.html'

})

export class ProductDetailsComponent implements OnInit {

@Input() product: Product;

@Input() isReadOnly: boolean;

constructor() {}

ngOnInit() { }

CloseProductDetailsView() {

this.product = null

}

}

Directives A directive is a custom HTML element that is used to extend the power of HTML. As part BrowserModule Angular provides ngIf and ngFor as directives. Under app.module.ts file you can see the definition of importing BrowserModule as import { BrowserModule } from '@angular/platform-browser';

• ngIf element is used to add elements to HTML if it evaluates to true else it will not add it to the HTML code
• ngFor element is used to elements based on the condition of the For loop

Metadata is helpful and used to configure the expected behavior of a class. One can work with Metadata either at Class level or at Constructor level as below

• Annotations These are at class level decorators. @Component and @Routes are examples of this type

  @Component ({

  selector: 'my-app',

  templateUrl: 'app/app.component.html'

  })

• Parameters These set by the decoeators at the constructor level

  export class AppComponent {

  @Environment(‘test’)

  appTitle: string = 'Welcome';

  }

Error Handling By using ReactJS catch library and then using catch function, we can incorporate error handling in Angular. Below code can be added on top of CRUB operations using http

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { IProduct } from './product';

@Injectable()
export class ProductService {

private _producturl = 'app/products.json';

constructor(private _http: Http){}

getproducts(): Observable {

return this._http.get(this._producturl)
.map((response: Response) => response.json())
.do(data => console.log(JSON.stringify(data)))
.catch(this.handleError);

}

private handleError(error: Response) {

console.error(error);
return Observable.throw(error.json().error());

}

}

• The catch function creates link to the Error Handler function
• In error handler function, the error will be sent to console and also we can throw the error back to the main proram.

Dependency Injection Dependency Injection is the ability to add the functionality of components at runtime. @Injectable keyword allows class functionality to be injected and used by any modules. Using Provider inside the module the injectable service can be used.

Definiiton and Usage of Injectble class :

Definition

@Injectable()

export class classname {}

Usage

@Component ({

providers: [classname]

}]

Configuration Files Below are the helpful configuration files to set the expectations as part of Angular application

tsconfig.json: This configuration file allows to configure TypeScript used for Angular application

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"lib": [ "es2015", "dom" ],

"noImplicitAny": true,

"suppressImplicitAnyIndexErrors": true

}

}

package.json: This configuration file contains information about Angular 2 project

{

"name": "angular-quickstart",

"version": "1.0.0",

"description": "QuickStart package.json from the documentation,

supplemented with testing support",

"scripts": {

"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\"
--killothers --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"

},

"keywords": [],

"author": "",

"license": "MIT",

"dependencies": {

"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
"@angular/forms": "~2.4.0",
"@angular/http": "~2.4.0",
"@angular/platform-browser": "~2.4.0",
"@angular/platform-browser-dynamic": "~2.4.0",
"@angular/router": "~3.4.0",
"angular-in-memory-web-api": "~0.2.4",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"

},

"devDependencies": {

"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "~2.0.10",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "~2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"@types/jasmine": "2.5.36"

},

"repository": {}

}

systemjs.config.json: This file contain the required system files for an Angular application which loads all the necessary script files without the need to add a script tag to the HTML pages

/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {

System.config ({

paths: {

// paths serve as alias
'npm:': 'node_modules/'

},

// map tells the System loader where to look for things

map: {

// our app is within the app folder
app: 'app',

// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic':
'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api':
'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js'

},

// packages tells the System loader how to load when no filename and/or no extension

packages: {

app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
} }); })(this);