Getting Ready for AngularJS 1.2


AngularJS is going through their release cycle now and that means that AngularJS 1.2 is going to be released soon with some specific changes that you'll need to address. I'll be updating my Pluralsight Course with the 1.2 changes as soon as the new version ships.

Routing

The biggest change for most people is the routing support is now packaged separately. To use routing you'll need to do two things:

Include the new angular-route.js:

<!-- JS -->
<script src="~/Scripts/jquery-2.0.2.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>

You'll also need to specify that ngRoute is a dependency when you create your modules:

var module = angular.module("homeIndex", [
  'ngRoute'
]);

$q

The $q object has also changed. If you have used the always() call, you will need to change that to finally() to better align with other Q promise libraries. For example:

// Prior to 1.2
$http.get("foo").always(function () {});

// Now
$http.get("foo").finally(function () {});

// IE8 Compatible Version
$http.get("foo")['finally'](function () {});

Because the finally function isn't allowed in IE8, you'll need to use the final version shown here if you need to support IE8.

ngHtmlBind and ngHtmlBindUnsafe

In addition, the ngHtmlBindUnsafe has been replaced with ngHtmlBind. The ngHtmlBind now does not sanitize your data and just emits HTML. If you need to sanitize your code before emitting it, you should use the ngSanitize (basically just the old ngHtmlBind renamed to this new directive). This means that if you are expecting your HTML to be sanitized, you need to change your directives as this will cause old ngHtmlBind directives to now emit the HTML without sanitation.

ngMobile

The old ngMobile directive has been renamed to ngTouch since all the functionality depended on touch support.

Other Breaking Changes

I've only touched on the changes that directly effected me. You should read the release notes and breaking changes in the changelog. Remember to read the changes for previous 1.2.x versions too to see all the changes:

https://github.com/angular/angular.js/blob/master/CHANGELOG.md


Ready to Learn Vue with ASP.NET Core?

Shawn's 4-hour course will get you up to speed in no time. Vue.js is a great middle-ground between React and Angular for people who don't like the complexity of Angular, and the overly componentized React. Learn today at Wilder Minds Training!

Enroll Today


Shawn
Shawn Wildermuth
Author, Teacher, and Coach




My Courses

Wilder Minds Training
Vue.js by Example (Now Available)
Bootstrap 4 by Example
Intro to Font Awesome 5 (Free Course)
Pluralsight
Less: Getting Started (Coupon Available)
Building a Web App with ASP.NET Core, MVC6, EF Core, Bootstrap and Angular (updated for 2.1)
Using Visual Studio Code for ASP.NET Core Projects
Implementing ASP.NET Web API
Web API Design

Application Name WilderBlog Environment Name Production
Application Ver v4.0.30319 Runtime Framework x86
App Path D:\home\site\wwwroot\ Runtime Version .NET Core 4.6.26919.02
Operating System Microsoft Windows 10.0.14393 Runtime Arch X86