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:

var myApp = angular.module("MyApplication", [])
myApp.component("my-widget", {
 templateUrl: "my-widget.html",
 controller: "MyWidgetController",
 bindings: {
   title: "="
 }
});

To learn more about the AngularJS 1.5 component method please read Todd Motto's article:
http://toddmotto.com/exploring-the-angular-1-5-component-method/
ng-animate-swap
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.

.animate-banner.ng-enter, .animate-banner.ng-leave {
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:100%;
 transition:0.5s ease-out all;
}
.animate-banner.ng-enter {
 top:-100%;
}
.animate-banner.ng-enter-active, .animate-banner.ng-leave {
 top:0;
}
.animate-banner.ng-leave-active {
 top:100%;
}




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:

<!-- autocomplete-widget-tpl.html -->
<div class="autocomplete-container">
 <div class="search-area">
   <div class="search-icon">
     <i class="fa fa-search"></i>
   </div>
   <div class="search-input" ng-transclude="inputArea"></div>
 </div>
 <div class="results-area">
   <div ng-transclude="resultsArea"></div>
 </div>
</div>


And here is what the component code for that looks like:

.component('autocompleteWidget', {
 templateUrl: 'autocomplete-widget-tpl.html',
 transclude: {
   input: 'inputArea',
   results: 'resultsArea'
 }
});




To learn more about multi-slot transclusion please read this article by Pascal Precht:

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:




AngularJS v1.4.8


A special thanks to the talented list of developers who helped put these two grand releases together:


Alexandr Gureev, Alicia Lauerman, Andrew Austin, Bert Verhelst, Charlie-Hua, Chris J. Lee, Donghwan Kim, Doug Krugman, Eric Lee Carraway, Flavio Corpa Ríos, Georgii Dolzhykov, Georgios Kalpakas, Jack Viers, Jakub Torbicki, Jason Bedard, Jason Hopper, John Zhang, JonyD, Kuzminov Aleksandr Sergeevich, Leonardo Borges Avelino, Lucas Galfaso, Lucas Mirelmann, Magnus Pedersen, Marcy Sutton, Martin Staffa, Matias Niemelä, Matthew Hill, Michael George Attard, Michael Salmon, Nuri Hodges, Pablo Villoslada Puigcerber, Peter Bacon Darwin, Raghav, Richard Harrington, Risan Bagja Pradana, Ryan Hart, Sam Rawlins, Shahar Talmi, Sreenivasan K, Stanislav Komanec, Stephen Sauceda, Steve Mao, Stian Jensen, Stu Cox, Sugan Krishnan, jody tate, koyner, luckylooke, mzdunek93, rrsivabalan, sevdog, spoonraker, zurin

As of this release, AngularJS 1.5 is feature complete. The next step from here on will be getting things ready for the full 1.5.0 release around the start of 2016!

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.