AngularJS 1.5.0-beta.2with 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 your to upgrade. The new features is as Follows:module.componentWe has created a more simplistic the-the----the registering component directives. In essence, components is special kinds of directives, which is bound to a custom element (something like "<my-widg Et></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 could interest you are the new directive called Ng-animate-swap. This new directive ' s purpose are 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" bloc K via leave and enter animations respectively.
Let's imagine that we had a banner image on a webpage that's tied to an expression like so:
<div class= "Banner-container" > </div>
Now if we are currentbannerimage value to another banner, the image would be updated to reflect the new banner image. But if we wanted to animate the old banner away and so animate the new one in we would would has to do something compli cated like set up a repeated list of banners and cycle through.
By using the Ng-animate-swap we can do this without have to change our template code around:
<div class= "Banner-container" > </div>now whenever the currentbannerimage expression changes there would be a Lea ve and an enter animation, which we can hooks 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%;}
Click here for a demo to see this in action
What's great about Ng-animate-swap is so we can apply it to any container in which we want to render a visual animation , whenever its associated data changes. In the example below, the User-container Div are animated whenever the userId on the scope changes.
<div class= "User-container" ng-animate-swap= "UserId" >
<autocomplete-widget><!--inputarea--><input type= "text" ng-model= "App.search" placeholder= "Se Arch ... "/> <!--resultsarea--><results> <div ng-repeat= "item in App.getresults (App.search) as results" > {ite M}} </div> <div ng-if= "results.length==0" > No results found </div></results> </autocompl Ete-widget>
Now, we want to does here are to transclude the Inputarea and Resultsarea at specific places in the component ' s template. Prior to named transclusion, the transclusion would is projected at only one place in the template of the Autocomplete-wi Dget. 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= "se Arch-input "ng-transclude=" Inputarea "></div> </div> <div class=" Results-area "> <div Ng-trans Clude= "Resultsarea" ></div> </div></div>
And here's what's the component code for this looks like:
. Component (' Autocompletewidget ', {templateurl: ' autocomplete-widget-tpl.html ', transclude: {input: ' Inputarea ', Results: ' Resultsarea '}});
Click here for a demo to see this in action
To learn more about Multi-slot transclusion please read the article by Pascal PRECHT:HTTP://BLOG.THOUGHTRAM.IO/ANGULAR/20 15/11/16/multiple-transclusion-and-named-slots.html
AngularJS 1.5.0-beta.2 and 1.4.8 have been released
