What Is New in AngularJS 1.5 (summary table)
AngularJS 1.5 is a significant release focused on improving the component model and overall stability. It introduces a new component helper, enhances animations, and fixes numerous bugs to pave the way for a smoother upgrade path.
| Category | Key Changes |
|---|---|
| New Features | Official .component() helper, ngAnimateSwap directive, $onInit lifecycle hook. |
| Improvements & Changes | Enhanced ngMessages module, stricter ngModel validation, improved animation callbacks. |
| Bug Fixes | Over 40 fixes across core, animations, routing, and various directives. |
| Deprecations | $compile.preAssignBindingsEnabled flag is deprecated and defaults to false. |
How does the new component helper work?
The .component() method is a streamlined helper built on top of .directive(). It enforces a simpler, more predictable structure that aligns with modern component-based thinking.
Components always have an isolate scope and use bindings, their controllers are instantiated with $onInit, and they use the controller instance as the $scope. This matters because it reduces boilerplate and guides developers towards a more Angular 2-like style.
angular.module('app').component('userProfile', {
bindings: { userId: '<' },
templateUrl: 'user-profile.html',
controller: function() {
this.$onInit = function() {
// Initialization logic here
};
}
});What animation and ngMessages improvements were made?
The ngAnimateSwap directive allows you to animate the swapping of two elements, useful for galleries or rotating content. Animation callbacks like ngAnimate:addClass now fire more reliably.
For ngMessages, you can now use dynamic keys with ng-messages-include. The module also gained a ngMessageExp directive for evaluating expressions as message keys, making complex validation message logic much cleaner.
Were there any important breaking changes?
The main behavioral change is that the $compile.preAssignBindingsEnabled flag now defaults to false. This means bindings are assigned to a component's controller after the $onInit hook runs.
In practice, this fixes a long-standing issue where two-way bindings could incorrectly initialize child components. You should move initialization code that depends on bindings from the constructor into the $onInit lifecycle hook.
FAQ
Why should I use .component() instead of .directive()?
The component helper enforces best practices like isolate scope, binds to the controller instance, and provides a lifecycle hook. It's simpler and steers you towards a more future-proof architecture, especially if you plan to eventually migrate.
What exactly does $onInit do?
It's a lifecycle hook called after the controller is constructed and after its bindings are initialized (with the new default flag). This is the safe place to put setup logic that depends on bound input values.
Does ngAnimateSwap replace ng-repeat for animations?
No, it serves a different purpose. ngAnimateSwap is for swapping two elements in place (like a slideshow), while ng-repeat animates list items being added, moved, or removed.
I rely on pre-assigned bindings. Will my app break?
It might. Check for code in your controller constructor that uses bindings. Move that logic into the $onInit method. You can temporarily set $compile.preAssignBindingsEnabled(true) to test, but it's deprecated.
Is 1.5 a good starting point for new AngularJS projects?
Yes. The component model and enforced practices in 1.5 create a structure that is closer to Angular and other modern frameworks. It makes the codebase more maintainable and the eventual upgrade less painful.