Angular 2 vs Angular 1

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

Архитектура Angular 1.x приложения
Module
ControllerService Factory View Directives
Constants
Filters
etc.

Объявление модуля в Angular 1.x
// Declare app level module which depends on views, and components
var 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.x
angular.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 you
Vlad Pozdnyakov
@scary_donetskiy
http://vados.pro

Angular 2 vs Angular 1

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Angular 2 vs Angular 1 (20)

More from GDG Odessa (6)

Angular 2 vs Angular 1