Last active
August 29, 2015 14:07
-
-
Save rajeshsegu/51d3ad8778487030b364 to your computer and use it in GitHub Desktop.
Hello!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Angular Upgrade 1.3 | |
=================== | |
This week we upgraded Angular 1.2.x to 1.3.x and here are our findings that might help one and all revolving around AngularJS based app development. | |
> **Note:** https://github.com/angular/angular.js/blob/master/CHANGELOG.md | |
Breaking Changes | |
------------- | |
#### <i class="icon-file"></i> Controllers | |
`$controller` will no longer look for controllers on `window`. | |
The old behavior of looking on `window` for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default. | |
To migrate, register your controllers with modules rather than exposing them as globals: | |
Before: | |
```javascript | |
function MyController() { | |
// ... | |
} | |
``` | |
After: | |
```javascript | |
angular.module('myApp', []).controller('MyController', [function() { | |
// ... | |
}]); | |
``` | |
Although it's not recommended, you can re-enable the old behavior like this: | |
```javascript | |
angular.module('myModule').config(['$controllerProvider', function($controllerProvider) { | |
// this option might be handy for migrating old apps, but please don't use it | |
// in new ones! | |
$controllerProvider.allowGlobals(); | |
}]); | |
``` | |
> **Note:** | |
> - Change: 1.3.0-beta.15 unbelievable-advancement (2014-07-11) | |
> - In IntelliJ / Eclipse use this regex to add angular.module('').controller across your controller files. | |
Find: (\w+)(\.\$)inject(.*) | |
Replace: \$1\$2inject\$3 \n\n angular.module('app').controller('\$1', \$1); | |
File Filter: *Controller.js | |
> ( Modify it to your use-case ) | |
#### <i class="icon-pencil"></i> ngTrueValue / ngFalseValue | |
ngTrueValue and ngFalseValue now support parsed expressions which the parser determines to be constant values. | |
BREAKING CHANGE: Previously, these attributes would always be treated as strings. However, they are now parsed as expressions, and will throw if an expression is non-constant. | |
```javascript | |
<input type="checkbox" ng-model="..." ng-true-value="'truthyValue'"> | |
``` | |
> **Note:** | |
> - Change: 1.3.0-beta.15 unbelievable-advancement (2014-07-11) | |
> - Expression needs to be enclosed in single quotes to make it a constant expression, does not tie objects/values anymore :( | |
> - ( Wish they take back this change ) | |
#### <i class="icon-hdd"></i> $http interceptors | |
Previously, it was possible to register a response interceptor like so: | |
// register the interceptor as a service | |
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) { | |
return function(promise) { | |
return promise.then(function(response) { | |
// do something on success | |
return response; | |
}, function(response) { | |
// do something on error | |
if (canRecover(response)) { | |
return responseOrNewPromise | |
} | |
return $q.reject(response); | |
}); | |
} | |
}); | |
$httpProvider.responseInterceptors.push('myHttpInterceptor'); | |
Now, one must use the newer API introduced in v1.1.4 (4ae4681), like so: | |
$provide.factory('myHttpInterceptor', function($q) { | |
return { | |
response: function(response) { | |
// do something on success | |
return response; | |
}, | |
responseError: function(response) { | |
// do something on error | |
if (canRecover(response)) { | |
return responseOrNewPromise | |
} | |
return $q.reject(response); | |
} | |
}; | |
}); | |
$httpProvider.interceptors.push('myHttpInterceptor'); | |
#### <i class="icon-refresh"></i> $attr.$observe | |
In order to make the behavior compatible with $rootScope.$watch and $rootScope.$on methods, and make it possible to deregister an attribute observer, Attributes.$observe method now returns a deregistration function instead of the observer itself. | |
BREAKING CHANGE: calling attr.$observe no longer returns the observer function, but a deregistration function instead. | |
To migrate the code follow the example below: | |
Before: | |
``` | |
directive('directiveName', function() { | |
return { | |
link: function(scope, elm, attr) { | |
var observer = attr.$observe('someAttr', function(value) { | |
console.log(value); | |
}); | |
} | |
}; | |
}); | |
``` | |
After: | |
``` | |
directive('directiveName', function() { | |
return { | |
link: function(scope, elm, attr) { | |
var observer = function(value) { | |
console.log(value); | |
}; | |
attr.$observe('someAttr', observer); | |
} | |
}; | |
}); | |
``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment