ANGULARJS Google designed popular Front-end

Modules in AngularJS 2

Modules are used in Angular JS to put logical boundaries in your application. Hence, instead of coding ui ux designer interview questions everything into one application, you can instead build everything into separate modules to separate the functionality of your application.

app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
import { FontcolorDirective } from ‘./fontcolor.directive’;

@NgModule({
declarations: [ AppComponent, FontcolorDirective ],
imports: [ BrowserModule ],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Let’s go through each line of the code in detail.

· The import statement is used to import functionality from the existing modules. Thus, the first 3 statements are used to import the NgModule, BrowserModule and AppComponent modules into this module.

· The NgModule decorator is used to later on define the imports, declarations and bootstrapping options.

· The BrowserModule is required by default for any web based angular application.

· The bootstrap option tells Angular which Component to bootstrap in the application.

A module is made up of the following parts:

Bootstrap array − This is used to tell Angular JS which components need to be loaded so that its functionality can be accessed in the application. Once you include the component in the bootstrap array, you need to declare them so that they can be used across other components in the Angular JS application.

Export array − This is used to export components, directives and pipes which can then be used in other modules.

Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.

Using ngFor in AngularJS 2

In AngularJS 2 ng-repeat is replace with ngFor. Look at the example how to use ngFor in AngularJS 2.0.

my-component.ts

import { Component } from 'angular2/core';

@Component({

selector: 'my-component',

templateUrl: './my-component.html'

})

export class MyComponent{

public values: number[] = [1, 2, 3];

}

my-component.html

<div *ngFor='let value of values; trackBy: index;'>

{{ value }}

</div>

How to Create Directive in AngularJS 2?

ng generate directive fontcolor

Structure of Directive:

import { Directive, ElementRef, Renderer } from ‘@angular/core’;

@Directive({
selector: ‘[appFontcolor]’
})

export class FontcolorDirective {
constructor(elem: ElementRef, renderer: Renderer) { renderer.setElementStyle(elem.nativeElement, ‘color’, ‘#EEBA33’);
}
}

Changes in app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
import { FontcolorDirective } from ‘./fontcolor.directive’;

@NgModule({
declarations: [ AppComponent, FontcolorDirective ],
imports: [ BrowserModule ],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Using in view

<div appFontcolor> Helloworld !!! </div>

How to Setup an Application using AngularJS 2?

The Angular CLI is a command line interface tool that can create a project, add files perform a variety of ongoing development tasks such as testing, bundling & deployment. The goal in this guide is to build and run a simple Angular application in TypeScript, using the Angular CLI while adhering to the Style Guide recommendations that benefit every Angular projects.

Install the Angular CLI globally

npm install -g @angular/cli

Generate a new project and skeleton application by running the following commands

ng new my-app

Go to the project directory and launch the server

cd my-app
ng serve — open

Why Angular 2?

Let us now understand the concerns that Angular 2 wanted to address. First off, Angular 2 is high performance — it minimizes the load time of your pages. This section lists the changes that Angular 2 has brought in over its earlier counterparts.

TypeScript: Angular 2 uses TypeScript heavily. Incidentally, TypeScript is a statically typed language like C# and is essentially a superset of JavaScript. This is one of the most striking changes in Angular 2 if you compare this with earlier versions. TypeScript html5 video player has gained a lot of popularity primarily because of its simplicity and ease of use. As TypeScript is from Microsoft, Angular 2 has become widely popular amongst the Microsoft community as well. For your information, frameworks like ReactJS also uses TypeScript.

Mobile development: Regardless of the fact that Angular 1.x was meant for responsive application development, there wasn’t any mobile support. However, you could take advantage of some libraries to run Angular 1.x on mobile. On the other hand, Angular 2 has built-in support for mobile application development. Note that Angular 2 renders code differently for Web browsers and mobile browsers.

Performance: Performance in Angular 2 is much improved — thanks to the support for offline compilation and fast change detection. The support for dynamic loading and asynchronous templating are features that help in improving the page load and response times considerably. Module loader is also much simplified in Angular 2. You can now use System.js as the universal loader to load the ES6 modules.

Directives: Angular 2 provides support for three types of directives. These are component directives, decorator directives and template directives.

Improved Dependency Injection: Dependency Injection is a software design principle that helps to abstract the dependencies of an object outside of it and make such objects loosely coupled with each other. Angular 2 has improved support for dependency injection. Modular development and component isolation are features that make dependency injection simple and easy to use and implement in Angular 2.

Improved data binding: Data binding in Angular 2 is much improved. To bind data to a DOM element, all you have to do is just wrap the element inside a square bracket as shown in the code snippet below.

<img [src]=”test.gif”>

Support for a component-based architecture: Unlike its earlier versions, Angular 2 is completely component based. With Angular 2, you would just use components and directives — controllers and $scope are no longer used. Well, what are components anyway? A component is a controller class that is associated with a template. Here’s how a component in Angular 2 looks like.

import { Component } from ‘@angular/core’;

@Component({
selector: ‘my-app’,
template: ‘<h1>Hello {{name}}</h1>’
})

export class AppComponent { name = ‘Angular’; }

Cross-platform: You can build and run Angular 2 applications on desktops, Android and iOS systems.

Browser support: Angular 2 supports most of the modern-day browsers. These include: IE 9, 10, 11, Firefox, Chrome, Safari, Android 4.1 and Microsoft Edge

Improved routing: Routing in Angular 2 is much improved — thanks to URL resolver, location service, navigational model, etc.