angular 2 vs angular 1
TRANSCRIPT
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