We have just released the next major version of Angular 1, which has been in development since May last year.
The primary theme for this release was to improve the upgrade path to Angular 2.In this release we have added features that will enable developers to write Angular 1 applications that are closer to the way that applications are structured in Angular 2.
New Features
The big feature changes to Angular 1 in this release are mostly focused around supporting Angular applications that are built from
Components. But there are a number of other features that will improve your development experience.
Component-based applications
Defining component directives
While creating components in Angular has been the primary way of structuring applications for a long time, we now made it possible for you to easily define a component directive with the
module.component() helper method. For example a simple component only needs to provide a template, some bindings and a controller. For the remaining directive options we set sensible defaults.
myModule.component('myComponent', {
template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>',
bindings: { firstName: '<', lastName: '<' },
controller: function() {
this.getFullName = function() {
return this.firstName + ' ' + this.lastName;
};
}
});
<my-component first-name="'Alan'" last-name="'Rickman'"></my-component>Read the
new component guide to find out more about this.
Lifecycle hooks
If your directive/component controller has a method called
$onInit() the compiler will now call it after the component has been initialized and all its bindings have been set up. This provides a
clear place to put the initialization code for your components and is similar to the
ngOnInit() lifecycle hook of Angular 2.
Binding to required directives
As well as the string and array forms,
you can now specify an object for the
require property of directives and components. If used with
bindToController, the compiler will also
automatically bind these required directive controllers to your controller.
These bindings (including those of sibling directives) are guaranteed to be in place by the time the
$onInit() hook is called.
Multi-slot transclusion
You can now specify that different parts of the transcluded content is rendered at different slots in the template. See the
1.5.0-beta.2 release announcement for a detailed explanation of this feature.
Default transclusion content
ngTransclude no longer overwrites its contents if there is no content to fill it. This means that you can provide
default content to be shown if the user of your directive has not provided any content to be transcluded.
One-way bindings
You can now define a directive/component binding using the
'<' character to indicate that the binding is
one-way. In this case the compiler will only set up a watch on the outer expression and not on the internal property. This means that changes to the value of a binding inside the component will not be propagated to the outside. See the
$compile API docs for more information.
Improved support for ES6 classes
We now support instantiation of
native ES6 classes in the
$injector and as a controller. Due to variable browser support this is a volatile feature, so be careful to test on your target browsers before going to production.
ngAnimateSwap Directive
We have introduced the new
ngAnimateSwap directive, which allows you to animate a collection of DOM changes together as a single container swap. See the
1.5.0-beta.2 release announcement for a detailed explanation of this feature.
ngResource
We now have proper support for
cancellable actions on resources, which means a
$cancelRequest() method will be available on the return value of the request method.
ngRoute
Any promises resolved as part of a route's
resolve property are now added to the scope as a
$resolve property, which
saves you having to inject them into the route controller.
Other Improvements
There are loads of other improvements, which you can find in the Angular
changelog. Here are a few highlights:
- You can now access the locals object that was passed to a call to
$parse from inside the parsed expression, via a $locals variable. - You can provide
$http configuration options of the $templateRequest service. - You can create your own custom XHR objects for the
$http via the $xhrFactory service. ngModel now provides ng-empty and ng-not-empty CSS classes.- The ngAria module is now more precise with handling of ARIA attributes and tabindex for custom controls.
- Some new helpers are available on
ngMock to ease testing:
Security Improvements
There have been a number of people who have contributed to the project over the last few releases by analyzing and identifying security issues in the Angular code base, which we have then fixed. We really appreciate the work that these people do. In particular we would like to thank
Mario Heiderich, Gareth Heyes and Jann Horn and the security team at Google.
Migrating from 1.4 to 1.5
Angular 1.5 is the
fastest, most feature complete and reliable version of Angular to date. We highly recommend upgrading your applications to use it.
While we tried to keep the number of breaking changes in the core to a minimum a few were unavoidable and will generally only affect very rare corner cases.
You can read about how to migrate and what breaking changes might affect your application in the
migration guide.
If you find any issues with Angular while you are migrating, please report them at
Github.
Thanks
Once again, Angular could not be what it is without the constant support of the literally millions of developers across the world who are using and contributing to the project, either through submitting issues and pull requests, running conferences and workshops, writing tutorials and sharing their real world experiences.
From everyone at the Angular team, we hope you enjoy developing with this latest version as much as we have enjoyed building it.
