Angular 2 vs. Angular 1 О ключевых отличиях, разнице в архитектуре, и конечно о typescript

Vlad Pozdnyakov@Comodo

Архитектура Angular 1.x приложения

Module

ControllerService Factory View DirectivesConstantsFiltersetc.

Объявление модуля в 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 приложенияModule

Metadata +Components

Service View

Точка входа в Angular 2 приложении@NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule, InMemoryWebApiModule.forRoot(InMemoryDataService) ], declarations: [ AppComponent, DashboardComponent, HeroesComponent, HeroDetailComponent, HeroSearchComponent ], providers: [ HeroService ], bootstrap: [ AppComponent ]})export class AppModule { }

@NgModule● imports - подключаем другие модули как зависимости

● declarations - классы, которые мы используем в модуле (компоненты, директивы и т.д.)

● providers - сервисы, доступные во всем приложении

● bootstrap - точка входа (Root component)

● exports - экспорт компонентов, для доступа в других модулях

Главный компонент приложения@Component({ moduleId: module.id, selector: 'my-app', template: `<h1>{{title}}</h1><nav> <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a> <a routerLink="/heroes" routerLinkActive="active">Heroes</a></nav><router-outlet></router-outlet>`, 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 {...}}

@Component● moduleId - устанавливает источник базового адреса

● selector - CSS селектор, для вставки компонента в шаблон

● templateUrl - путь к файлу шаблона (HTML)

● styleUrls - массив путей к файлам стилей (CSS)

● providers - массив с зависимостями для компонента

Directives

● Structural - изменяют макет путем изменения DOM

<li *ngFor="let hero of heroes"></li>

● Attribute - изменяют внешний вид или поведение элемента

<input [(ngModel)]="hero.name">

Сервисы@Injectable()export class HeroService { private heroesUrl = 'app/heroes'; private headers = new Headers({'Content-Type': 'application/json'}); constructor(private http: Http) {} getHeroes(): Promise<Hero[]> {...} getHero(id:number): Promise<Hero> {...} private handleError(error: any): Promise<any> {...} update(hero: Hero): Promise<Hero> {...} create(name:string): Promise<Hero> {...} delete(id:number): Promise<void> {...}}

Итоги сравнения● Версии не совместимы. Для перевода проекта на Angular 2 придется переписывать все● Другая архитектура - переход к компонентному подходу● Активно используем Typescript вместе с ES6 (JS версия написана без ES6)

Thank youVlad Pozdnyakov @scary_donetskiyhttp://vados.pro