Angular — New features in Angular 1.5

Gerard Sans

Published in

Google Developer Experts

5 min readDec 18, 2015

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

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 feature brings the concept of components to Angular 1. Components are the building blocks of Angular 2 architecture so it just makes sense to start familiarising with Angular 2 style in our applications Today.

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

This feature enables a new level of transclusion where we can target multiple placeholders or slots. This give us more flexibility when creating our directives.

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

Simple transclusion

In Angular 1.4, we need to activate the transclude property. Besides that, we are using an isolated scope binded to the title attribute.

<!--  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

In order to apply this new feature we use the transclude property similar to an isolated scope.

<!-- 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)

In Angular 1.4, ngAnimate was totally refactored to be more flexible, reusable and performant. Now it’s time to see the results of that effort with a powerful addition to our animation techniques.

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.

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)

This is a performance improvement done in the $compile module and available to all directives using transclusion. It works deferring compilation for transcluded content so it will only occur when necessary.

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.