Angular — New features in Angular 1.5

Gerard Sans
Dec 18, 2015 · 5 min read

A review of new features included in the future Angular 1.5 release.

Image for post
Image for post
Ferrofluid picture by Linden Gledhill

Reviewed after Angular 1.5 rc.1 release (15–Jan)

In this post we are going to look into some new features coming in Angular 1.5. This is a major upgrade since last July.

Let’s explore some of these features:

  • Component definition
  • Multiple slot transclusion
  • ng-animate-swap (rotating banner)
  • Lazy transclusion (performance boost)

As previous versions, it is very easy to upgrade, and a list of breaking changes can be found on the Angular blog to guide you in the process.

Follow me on Twitter for latest updates @gerardsans.

Component definition

This is just a helper method around the module.directive specific to UI elements with some sensible defaults like controllerAs, scope isolation and bindToController. It’s a really nice addition as it eliminates a lot of boilerplate when creating common directives.

See how it compares to the old directive below.

// Angular 1.5
module.component(name, options);
// Angular 1.4
module.directive(name, fn);

Let’s take a UI component, named card-component, as an example with a title attribute and content like this:

<card-component title="Mariah Carey">
All I Want for Christmas Is You
</card-component>

We can easily link this attribute using the bindings property. On the template we can use $ctrl as a default or define an alias using controllerAs.

The code above is definitely less verbose than as a directive below.

You can explore the example above here, or otherwise look at the Angular source code.

Multiple slot transclusion

Let’s see how we can translate a basic transclusion example followed by a multiple slot one.

Simple transclusion

<!--  Angular 1.4. Simple Transclusion -->
<card title="Mariah Carey">
All I Want for Christmas Is You
</card>
<!-- Angular 1.4. Default transclusion -->
<card></card>

To achieve a default value we can use the content of ng-transclude as seen below (line 15).

Multiple Slot Transclusion

<!-- Angular 1.5. Multislot Transclusion -->
<multislot-card>
<card-title>Mariah Carey</card-title>
<card-song>All I Want for Christmas Is You</card-song>
</multislot-card>

On the right side we define an alias corresponding to the transclusion slots in camelCase.

👮 A question mark indicates optional slots. Otherwise, the slot is mandatory and an error will be thrown if not available.

On the template we can insert the transcluded content using the alias. There are two possible syntaxes.

<h3 ng-transclude="title">No title</h3><h3><ng-transclude ng-transclude-slot="title">No title</ng-transclude></h3>

Default content can be added as shown above when elements have no content.

<!-- Angular 1.5. Multislot default transclusion -->
<multislot-card></multislot-card>

You can play with this example here.

ng-animate-swap (rotating banner)

ng-animate-swap allows us to easily implement a rotating banner. In order to do that we can hook ng-enter and ng-leave CSS classes to set up our animations.

Let’s explore an example implementing a MEME rotating banner.

Image for post
Image for post

Let’s take a look at the HTML to get this result.

We are using an image element with the ng-src directive pointing to an image defined in our controller. Using the as syntax this results in mc.image. ng-animate-swap is used in combination with a CSS class. In this case we called it banner.

// main syntax
<img ... ng-animate-swap="mc.image" class="banner" />
// alternative syntax
<img ... ng-animate-swap for="mc.image" class="banner" />

In our Controller we defined an Array of images that we alternate every 5000 ms using $interval. Finally we made sure to clear the interval.

Every time mc.image changes, ng-animate-swap will pick up the change and trigger the necessary animations using the CSS classes below. Awesome!

// First block. Animation for last element if any
.banner.ng-leave {}
.banner.ng-leave-active {}
// Second block. Animation for current element if Truthy or 0
.banner.ng-enter {}
.banner.ng-enter-active {}

Note how this differs from behaviour in ngRepeat, ngView, ngInclude, ngSwitch, ngIf and ngMessage, where the element only runs one of these blocks for the current element depending if it changes to Falsy (ng-leave) or to Truthy (ng-enter).

See below the CSS that allows the image slide from left-to-right:

🐒 we can use ng-animate-swap on any DOM element using an animation triggered by a change on the underlaying data.

Lazy transclusion (performance boost)

Significant performance gains are expected for directives requiring complex trees using nested ng-if or ng-switch-when (Eg: object hierarchies). These will perform much better now as compilation of transcluded content will only happen as their bound condition is being matched. This also means that on initial rendering some parts will not even require actual compilation.

You can get all technical details on this commit.

👮 Lazy transclusion is not available for directives using replace:true with either template or templateUrl without multiple slot transclusion.

Think I missed some features? Contact me on @gerardsans or gerard.sans_at_gmail.com. Thanks for reading!

Curious about some new features introduced in Angular 1.4? Follow the link below!

Resources

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Google Developers Experts

Experts on various Google products talking tech.

Gerard Sans

Written by

Developer Advocate @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader | Views are my own | @fullstackcon @ReactiveConf @ngcruise @UphillConf UK ☂

Google Developers Experts

Experts on various Google products talking tech.

Gerard Sans

Written by

Developer Advocate @AWSCloud | Just be AWSome | MC Speaker Trainer Community Leader | Views are my own | @fullstackcon @ReactiveConf @ngcruise @UphillConf UK ☂

Google Developers Experts

Experts on various Google products talking tech.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store