Angular 2
Agenda
- TBD
What is it?
- Client side web framework
- TypeScript
- ...
- Profit!
How is it different?
Text
Change Detection / Lifecycle
Text
Immutability
Text
Native Features vs Framework Logic
Text
Controllers
... are dead
$scope
$scope.$apply()
$scope.$digest()
$scope.$watch()
$scope.$parent
Controllers
... are dead
<body ng-controller="MainController as vm">
<h1>{{vm.main.name}}</h1>
<div>
<label>Creator</label>
<div>{{vm.main.creator}}</div>
</div>
</body>
/*------------------------------------------*/
angular.module('app')
.controller('MainController', MainController);
MainController.$inject($scope);
function MainController($scope) {
var vm = this;
vm.main = {
name : "Some Name",
creator : "Nick"
}
}Angular 1
Components!
<body>
<my-component></my-component>
</body>
/*------------------------------------------*/
@Component({
selector: "my-component",
template: `
<h1>{{main.name}}</h1>
<div>
<label>Creator</label>
<div>{{main.creator}}</div>
</div>`
})
export class MyComponent {
main = {
name : "Some Name",
creator : "Nick"
}
}Angular 2
Templates
<div ng-controller="MyTodoController">
<input type="text" ng-model="todoTitle">
<button ng-click="addTodo()">+</button>
<div ng-repeat="todo in todos">
<input ng-model="todo.done">
{{todo.title}}
<button ng-click="deleteTodo(todo)">X</button>
</div>
</div><div>
<input type="text" [value]="todoTitle">
<button (click)="addTodo()">+</button>
<div *ngFor="todo of todos">
<input [value]="todo.done">
{{todo.title}}
<button (click)="deleteTodo(todo)">X</button>
</div>
</div>Angular 1
Angular 2
Angular.module
... is dead
angular.module('app')
.controller('', function(){ ... })
.directive('foo', function(){ ... })Angular 1
Why is it different?
- Web Standards
- New web standards have developed since 1.x and the framework needs to stay relevant.
- Performance
- Brand new digest/watch architecture that takes advantage of ES2015 features.
- Simpler
- Less boilerplate/overhead to write a large scale app
- Component Based
Components
<<Doug>>
- Change Detection
- Testing
- Built In Directives
- vs. Directive
Types of Directives
- Component
- Structural Directive
- Attribute Directive
Services
Observables
<<Doug>>
Decorators
A decorator is a function that receives an object (or class) to be decorated. It is allowed to freely modify that object.
Types
- @Component
- @Inject
- @Injectable
- @Input
- @Output
- @Pipe
- ...
Pipes
<<Nick>>
Pipes (Formally known as Filters)
Forms
<<Doug>>
Build/Dev Env
<<Doug>>
Links
Questions?
Angular 2
By nicksterling
Angular 2
- 792
