Angular is a Single Page Application framework from Google. Angular 2 was released on September 14, 2016 after two years of development.
Setting a local development environment requires installing node.
With Plunker Getting Started with Angular 2 is very easy.
app.ts
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = 'Shalvin'
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}Component
The basic building block of Angular is a component. A component is a reusable piece of functionality like a Partial View in Asp .Net MVC or an User Control in Web Forms.
A Component is a collection of TypeScript code, HTML Template and Directive. You can write components using ES5, ES6, TypeScript or Dart. Typescript is the most preferred option. Angular 2 is developed using TypeScript. The TypeScript will get transpiled to ES5 so that browsers can understand.
The component stars with import statements which imports the necessary modules from packages. In this example we are using Component and NgModule from @angular.core package, and BrowserModule from @angular/platform-browser. Angular 2 is a framework which can be used to create Mobile application (Ionic 2), multi platform applications (Electron), etc. Here we are specifying that it is a browser application using BrowserModule.
NgModule is used to create Module. Module is a unit of functionality. It is a collection of components directives, etc.
A Component Directive is like attributes in .Net. Here the selector property is given the name my-app. In the HML page we will be making use of this template using <my-app></my-app> tags.
template property is used to define the HTML. Alternatively templateUrl can be used used for specifying an HTML document containing the UI.
Inside the class App I have defined a memory variable called name and assigned it a value 'Shalvin'. TypeScript supports types. I have defined name of type string. That name variable is used inside HTML using interpolation syntax, ie. enclosed within double curly brackets.
main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)main.ts is the starting point of the application. It bootstraps AppModule, which in turn bootstraps App component.
index.html
<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
In the index.html page we are instantiating the template using <my-app></my-app> tags.
Property Binding
Property Binding enables binding property value in the component to DOM.
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
Name <input type = "text" [value] = name/>
`,[] is the Property Binding syntax. Here the name variable is bound to the value property of input. Likewise it is possible to bind to any any attributes of HTML elements like src of img, href of anchor, etc.
Plunker output.
Event Binding
Suppose you have a function in the component and you want to bind that to the click event of a button. This can be done using Event binding. Enclose the event you want to bind to within ().
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
<div>
Name <input type ="text" [value]= name/>
<div>
<div>
<input type ="button" value = "About Me" (click)="Hello()"/>
</div>
`,
})
export class App {
name:string;
constructor() {
this.name = 'Shalvin'
}
Hello()
{
alert('.Net and Angular Consultant and Trainer');
}
}
Plunker output.
Two-way data binding
The data binding in Angular is unidirectional. Property Binding happens from component to view. Event Binding happens from view to component.
By merging both Property Binding syntax [] and Event Binding syntaxt () it is possible to have Two-way data binding.
For implementing two way data binding FormsModule of @angular/forms package is required.
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'imports array
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}imports array of AppModule is used to consolidate features belonging to
different modules. So the FormsModule have to be added to import array.
@Component({
selector: 'my-app',
template: `
<div>
<h2 *ngIf="name">{{name}} is specializing in {{specialization}}</h2>
</div>
<div>
Name <input type ="text" [(ngModel)]= name/>
<div>
<div>
Specialization <input type ="text" [(ngModel)]= specialization/>
<div>
`,
})
export class App {
name:string;
specialization:string;
}Here the ngModel is enclosed within [()] and assigned the value of the component which makes it two-way data bindable. As the value are entered into input fields the values will be reflected at the top.
Plunker output
No comments:
Post a Comment