Skip to content

Instantly share code, notes, and snippets.

@rajeshsegu
Last active August 29, 2015 14:07
Show Gist options
  • Save rajeshsegu/51d3ad8778487030b364 to your computer and use it in GitHub Desktop.
Save rajeshsegu/51d3ad8778487030b364 to your computer and use it in GitHub Desktop.
Hello!
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