Text
Text
Text
Text
<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
<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
<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('app')
.controller('', function(){ ... })
.directive('foo', function(){ ... })
Angular 1
<<Doug>>
<<Doug>>
A decorator is a function that receives an object (or class) to be decorated. It is allowed to freely modify that object.
<<Nick>>
<<Doug>>
<<Doug>>