Key different compare angular 2 to 1

  1. angualr 2 using bootstraping the app,
    import { bootstrap } from 'angular2/platform/browser';
    
    // Our main component
    import { AppComponent } from './app.component';
    
    bootstrap(AppComponent);

    and in angular 2 we bind it to html tag <body ng-app=”insuranceApp”>

  2. In angular 2 we create a application by create multiply components, and a component must contain: template(html layout also could included directives) + class(properties and methods) + Metadata(Extra data for angular, defined with a decorator). example:
    import { Component} from 'angular2/core';//must include the import
    @Component({ //metadata and template
        selector: 'rate-star',
        template: '

    {{greatingText}}

    ' })export class HelloComponent {//class with property and methods greatingText:string = "hello"; }

    In angular 1 we create controller + view

    First Name:
    Last Name:

    Full Name: {{firstName + ” ” + lastName}}

    var app = angular.module(‘myApp’, []);
    app.controller(‘myCtrl’, function($scope) {
    $scope.firstName = “John”;
    $scope.lastName = “Doe”;
    });

  3. In Angular 2 the data flow is unidirectional and angular 1 is two way bind
  4. In angular 2 bind property using [], bind event using () and removed
    <button (click)="onClickMe()">Click me!</button>//bind event
    //bind property
    angular2_bind_dom_property
    
    

     

  5. In Angular 2 there are not $scope anymore, for communicate with different components using service. And in angular 2 create service using class
import { Injectable } from 'angular2/core';

@Injectable() // working with constructor to do injection
export class BooksService {
     GetAllBooks = () =>
	[
		{ title: 'Ulysses', author: 'James Joyce', available: true, category: Category.Fiction },
		{ title: 'A Farewell to Arms', author: 'Ernest Hemingway', available: false, category: Category.Fiction },
		{ title: 'I Know Why the Caged Bird Sings', author: 'Maya Angelou', available: true, category: Category.Poetry },
		{ title: 'Moby Dick', author: 'Herman Melville', available: true, category: Category.Fiction }
	];	
}
but in angularjs 1 we could using priovide, service, value, factories to create a service. 
Advertisements

2 thoughts on “Key different compare angular 2 to 1”

  1. Not very detailed for component sharing and communication. It will be better if put some example codes.
    Actually, in angular2, we can pass in parameter to sub-component.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s