Prototype based controller with Angular 1.4

30 ביוני 2015

I just encountered a brilliant post written by Eyal Vardi (Hebrew only) Eyal talks about how we can use Angular metadata stored inside $inject to automatically inject the controller's dependencies into the controller instance This way you don't need to manually copy local dependency parameters into the controller instance. Consider the following Typescript controller + HTML view class HomeCtrl {     $scope;     $http;     items: any;     constructor($scope, $http) {         this.$scope = $scope;         this.$http = $http;     }     refresh() {         this.$http.get("/api/item").then((items) => {             this.items = items;         });     } } angular.module("MyApp").controller("HomeCtrl", ); <div ng-controller="HomeCtrl as ctrl">     <ul>         <li ng-repeat="item in ctrl.items">             <span>{{item.name}}</span>         </li>     </ul>     <div>         <button ng-click="ctrl.refresh()">Refresh</button>     </div> </div> As you can see all dependencies specified by angular.controller function are copied manually into the controller instance so we can later use them inside the refresh function. When writing "plain" Angular controller based on simple function (without prototype) the dependencies are specified as local parameters...
tags: , ,
no comments

Adding zone.js to Angular 1.4

27 ביוני 2015

(I find below bits quite useful so I add them to github. You can get them by using bower install angular1-zones) One of the cool features of Angular 2 is that there is no need to call $scope.$apply. This is true even if you are using 3rd party asynchronous library which Angular is unaware of. The magic resides inside Angular 2 library named zone.js The library overrides all standard browser APIs that are considered asynchronous. zone.js injects its own implementation and uses it to monitor the start and completion of any asynchronous activity. Consider the following Angular 1.4 source code function HomeCtrl($scope) {     $scope.change = function () {         setTimeout(function () {             $scope.message = "XXX";         }, 1000);     } } This is a plain controller...
tags: , ,
one comment