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">
<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: