Wednesday, November 25, 2015

AngularJS 1.5.0-beta.2 and 1.4.8 have been released

Hey everyone. We have recently released two new versions of AngularJS and we have some details and some new features to discuss.

AngularJS 1.5.0-beta.2

With AngularJS 1.5.0-beta.2, we’ve improved the performance and flexibility of Angular 1 while still maintaining reliability and functionality for existing applications. This version contains numerous weeks worth of fixes, documentation upgrades and performance improvements. 1.5.0-beta.2 also introduces a number of new features which should give a strong motivation for you to upgrade.The new features are as follows:

module.component

We have created a more simplistic way of registering component directives. In essence, components are special kinds of directives, which are bound to a custom element (something like “<my-widget></my-widget>”), with an associated template and some bindings. Now, by using the .component() method in AngularJS 1.5, you can create a reusable component with very few lines of code:

Another feature that may interest you is the new directive called ng-animate-swap. This new directive’s purpose is to animate a collection of DOM changes together as a container swap. By using the ng-animate-swap directive, you can trigger Angular to animate an “old” block away and animate in a “new” block via leave and enter animations respectively.Let’s imagine that we have a banner image on a webpage that is tied to an expression like so:

<div class="banner-container">

<img ng-src="{{ currentBannerImage }}" />

</div>

Now if we change currentBannerImage value to another banner, the image will be updated to reflect the new banner image. But if we wanted to animate the old banner away and then animate the new one in we would would have to do something complicated like set up a repeated list of banners and cycle through.By using ng-animate-swap we can do this without having to change our template code around:

<div class="banner-container">

<img ng-src="{{ currentBannerImage }}"

class=”animate-banner”

ng-animate-swap="currentBannerImage" />

</div>Now whenever the currentBannerImage expression changes there will be a leave and an enter animation, which we can hook into via CSS or JS animations using ngAnimate.

What's great about ng-animate-swap is that we can apply it to any container for which we want to render a visual animation, whenever its associated data changes. In the example below, the user-container div is animated whenever the userId on the scope changes.<div class="user-container" ng-animate-swap="userId">

<h2>{{ title }}</h2>

<p>{{ description }}</p>

<ol>

<li ng-repeat="attribute in attributes">

{{ attribute }}

</li>

</ol>

</div>

Multi-slot transclusion

The third feature that we’re showcasing is multi-slot transclusion. This allows for pieces of the transcluded HTML to be placed into different parts of a directive’s template. Regular transclusion is useful to project outer content into the template of a component, but with multi-slot transclusion we can take this a step further. Consider a component called <autocomplete-widget>, which collects data from the user and displays the results, where the application developer is allowed to provide the HTML for the input and the results.

<autocomplete-widget>

<!-- inputArea -->

<input type="text"

ng-model="app.search"

placeholder="Search..." />

<!-- resultsArea -->

<results>

<div ng-repeat="item in app.getResults(app.search) as results">

{{ item }}

</div>

<div ng-if="results.length==0">

No results found

</div>

</results>

</autocomplete-widget>

Now what we want to do here is to transclude the inputArea and resultsArea at specific places in the component's template. Prior to named transclusion, the transclusion would be projected at only one place in the template of the autocomplete-widget. However, with multi-slot transclusion, we can do something like this:

AngularJS 1.4.8

We’ve also been fixing bugs and performance upgrades within the AngularJS 1.4 ecosystem. Once 1.5.0 is fully released then we will only continue to do security patches for the 1.4.x versions therefore please upgrade to 1.5.0 once it is available.

Release Notes & Contributions

These two releases contain lots of commits; everyone has been very busy. If you’re interested in reading the release notes for both of the new versions, below are two links that point to the AngularJS CHANGELOG for both the 1.4 and 1.5 releases: