Monday, 24 October 2016

Angular 1 VS Angular 2

Comparing Component and Controller

Angular 2

The Component

Controllers are a big part of Angular 1 that is going away in Angular 2. In Angular 2 you will probably write all your controllers as components. 

  1.  
  2.   import {Component} from 'angular2/core'
  3.  
  4.   @Component({
  5.     selector: 'my-app',
  6.     providers: [],
  7.     template: `
  8.       <div>
  9.         <h2>Hello {{name}}</h2>
  10.       </div>
  11.     `,
  12.     directives: []
  13.   })
  14.   export class App {
  15.     constructor() {
  16.       this.name = 'Angular2'
  17.     }
  18.   }
  19.                 
  1.  
  2.     <my-app>
  3.       loading...
  4.     </my-app>
  5.

Angular 1

The Controller

  1.  
  2. var app = angular.module('app', []);
  3.  
  4. app.controller('MainCtrl', function($scope) {
  5.   $scope.name = 'Hello Angular1';
  6. });
  7.                 
  1.  
  2.   <body ng-controller="MainCtrl">
  3.     <h2>{{name}}</h2>
  4.   </body>
  5.

Structural Directives

Angular 2

*ngFor, *ngIf

  1.  
  2.     <ul>
  3.       <li *ngFor="#ball of balls">
  4.         {{ball.name}}
  5.       </li>
  6.     </ul>
  7.     <div *ngIf="balls.length">
  8.       <h3>You have {{balls.length}} balls</h3>
  9.     </div>
  10.

Angular 1

ng-repeat, ng-if

  1.  
  2.     <ul>
  3.       <li ng-repeat="ball in balls">
  4.         {{ball.name}}
  5.       </li>
  6.     </ul>
  7.     <div ng-if="balls.length">
  8.       <h3>You have {{balls.length}} ball </h3>
  9.     </div>
  10.

Two-Way Data Binding

Angular 2

[(ngModel)]='value'

  1.  
  2.     <input [(ngModel)]="me.name">
  3.

Angular 1

ng-model='value'

  1.  
  2.     <input ng-model="me.name">
  3.

Property Binding

Angular 2

[Property]='Property'

  1.  
  2.     <div [style.visibility]="tools ? 'visible' : 'hidden'">
  3.       <img [src]="imagePath">
  4.       <a [href]="link">{{tools}}</a>
  5.     </div>
  6.

Angular 1

ng-property='Property'

  1.  
  2.     <div ng-style="tools ? {visibility: 'visible'}: {visibility: 'hidden'}">
  3.         <img ng-src="{{tools}}">
  4.         <a ng-href="{{tools}}">
  5.           {{tools}}
  6.         </a>
  7.     </div>
  8.

Event Binding

Angular 2

(event)='action()'

  1.  
  2.     <input
  3.       (blur)="log('blur')"
  4.       (focus)="log('focus')"
  5.       (keydown)="log('keydown', $event)"
  6.       (keyup)="log('keyup', $event)"
  7.       (keypress)="log('keypress', $event)"
  8.       >
  9.

Angular 1

ng-event='action()'

  1.  
  2.         <input
  3.           ng-blur="log('blur')"
  4.           ng-focus="log('focus')"
  5.           ng-keydown="log('keydown', $event)"
  6.           ng-keyup="log('keyup', $event)"
  7.           ng-keypress="log('keypress', $event)"
  8.           >
  9.

Services and DI

Angular 2

Injectable Service

In Angular 1 we use services by using any one of Factory, Services, Providers, Constants, Values which all are covered under a provider.

But in Angular 2 all this are consolidated into one base Class. 

  1.  
  2.   import {Injectable} from 'angular2/core';
  3.   
  4.   @Injectable()
  5.   export class StudentService {
  6.     getStudents = () => [
  7.       { id: 1, name: 'Nisar' },
  8.       { id: 2, name: 'Sonu' },
  9.       { id: 3, name: 'Ram' }
  10.     ];
  11.   }
  12.

Using same service in Component

  1.  
  2.   import { Component } from 'angular2/core';
  3.   import { StudentService } from './student.service';
  4.   
  5.   @Component({
  6.     selector: 'my-students',
  7.     templateUrl: 'app/student.component.html',
  8.     providers: [StudentService]
  9.   })
  10.   export class StudentsComponent {
  11.     constructor(
  12.       private _StudentService: StudentService) { }
  13.     students = this._StudentService.getStudents();
  14.   }
  15.

Angular 1

Service

  1.  
  2.   (function () {
  3.     angular
  4.       .module('app')
  5.       .service('StudentService', StudentService);
  6.  
  7.     function StudentService() {
  8.       this.getStudents = function () {
  9.         return [
  10.           { id: 1, name: 'X-Wing Fighter' },
  11.           { id: 2, name: 'Tie Fighter' },
  12.           { id: 3, name: 'Y-Wing Fighter' }
  13.         ];
  14.       }
  15.     }
  16.   })();
  17.

Using same service in Controller

  1.  
  2.   (function () {
  3.     angular
  4.       .module('app', [])
  5.       .controller('StdController', StudentsController);
  6.   
  7.     StudentsController.$inject = ['StudentService'];
  8.     function StdController(StudentService) {
  9.       var std = this;
  10.       std.title = 'Services';
  11.       std.Students = StudentService.getStudents();
  12.     }
  13.   })();
  14.

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)