Angular 2 vs Angular 1

  • View
    176

  • Download
    0

Embed Size (px)

Text of Angular 2 vs Angular 1

Angular 2 vs. Angular 1 , , typescriptVlad Pozdnyakov@Comodo

Angular 1.x ModuleControllerServiceFactoryViewDirectivesConstantsFiltersetc.

Angular 1.x// Declare app level module which depends on views, and componentsvar phonecatApp = angular.module('phonecatApp', ['ngRoute', 'ngResource']);

phonecatApp.controller('PhoneDetailController', ['$scope', '$http', '$location', '$routeParams', 'Phone', function ($scope, $http, $location, $routeParams, Phone) { $scope.phoneId = $routeParams.phoneId;

Phone.get({ phoneId: $scope.phoneId }, function (data) { $scope.phone = data; $scope.mainImageUrl = data.images[0]; });}]);

Angular 1.xangular.module('myApp.home', ['ngRoute', 'firebase']) .factory('CommonProp', function () { var user = ''; return { getUser: function () { return user; }, setUser: function (value) { user = value; } }; });

angular.module('myApp.home', ['ngRoute', 'firebase']) .service('CommonProp', function () { var user = ''; this.getUser = function () { return user; }; this.setUser = function (value) { user = value; }; });

?

Angular 1.x , . .

( ) . , , , , new Foo(); .

-

Angular 2?

TypeScript

(private, protected, public) JS (type definitions)

export class Hero { id: number; name: string;}/*** */interface IHero { id: number; name: string;}export class Hero implements IHero { id:number; name:string;}

Angular 2 ModuleMetadata +ComponentsServiceView

Angular 2 @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule, InMemoryWebApiModule.forRoot(InMemoryDataService) ], declarations: [ AppComponent, DashboardComponent, HeroesComponent, HeroDetailComponent, HeroSearchComponent ], providers: [ HeroService ], bootstrap: [ AppComponent ]})export class AppModule { }

@NgModuleimports -

declarations - , (, ..)

providers - ,

bootstrap - (Root component)

exports - ,

@Component({ moduleId: module.id, selector: 'my-app', template: `{{title}}

Dashboard Heroes

`, styleUrls: ['app.component.css']})export class AppComponent { title = 'Tour of Heroes';}

@Component({ moduleId: module.id, selector: 'my-heroes', templateUrl: 'heroes.component.html', styleUrls: ['heroes.component.css'], providers: [HeroService]})export class HeroesComponent implements OnInit{ heroes: Hero[]; selectedHero: Hero; constructor(private router: Router, private heroService: HeroService) {} ngOnInit():void {...} onSelect(hero: Hero): void {...} getHeroes(): void {...} gotoDetail(): void {...} add(name: string): void {...} delete(hero: Hero): void {...}}

@ComponentmoduleId -

selector - CSS ,

templateUrl - (HTML)

styleUrls - (CSS)

providers -

DirectivesStructural - DOM

Attribute -

@Injectable()export class HeroService { private heroesUrl = 'app/heroes'; private headers = new Headers({'Content-Type': 'application/json'}); constructor(private http: Http) {} getHeroes(): Promise {...} getHero(id:number): Promise {...} private handleError(error: any): Promise {...} update(hero: Hero): Promise {...} create(name:string): Promise {...} delete(id:number): Promise {...}}

. Angular 2 - Typescript ES6 (JS ES6)

Thank youVlad Pozdnyakov @scary_donetskiyhttp://vados.pro