Dan Wahlin

Moving Blog to https://blog.codewithdan.com

Mon, 04 Apr 2016 09:00:00 GMT

After many years hosting my blog at https://weblogs.asp.net/dwahlin I’ve decided to move over to a custom domain - https://blog.codewithdan.com. I’ve really appreciated the hosting that Microsoft has provided and the excellent service behind the scenes by Neudesic. The existing blog and all of the posts will stay up but new posts will be at the URL mentioned below.

Why am I moving the blog you ask? First off, people have a real challenge spelling my last name (“Wahlin”) and it’s hard to remember “dwahlin” if you’re trying to go to the blog directly. Second, our new company website is going to be at https://www.codewithdan.com so I figured I might as well move the blog there as well. The company site will be released a bit later and we have a lot of great content planned for it. My wife came up with the “Code with Dan” concept based on feedback we’ve had from several clients over the years and felt that it’d be a lot easier to remember for people.

I may still post a portion of each blog post here at the old blog to gradually move people over, but if you have this blog (https://weblogs.asp.net/dwahlin) bookmarked you’ll want to change the bookmark to https://blog.codewithdan.com. Thanks!

New Pluralsight Course: Docker for Web Developers

Sun, 03 Apr 2016 21:23:15 GMT

How I Got Into Docker (and why you should too)

One of the most exciting technologies that I’ve researched and used over the past year is Docker. That’s a pretty bold statement, especially since I enjoy working with a lot of different technologies, so let me share a quick story about how I initially got started with Docker and and my personal journey (if you’d prefer you can jump directly to the Docker for Web Developers Course).

You may have heard the term “Docker” tossed around at work or online and wondered what it was…I know I did. I heard a few people mention it on Twitter a few years ago making claims like, “Docker provides a consistent way to deploy applications.” That sounded appealing but wasn’t enough to make me jump into it. I’ve worked in a lot of dev environments over the course of my career and have certainly run into challenges moving software between development, staging and production

environments so the general promise of Docker certainly intrigued me. But, when it came down to it I only had so many hours in the day to research new technologies so I pushed it off. It kept coming up again and again though so I realized I needed to make some time to look into it more.

Fast-forward a few more weeks and one night I decided to visit the Docker website and do a little reading on the features it offered. The additional features I learned about continued to interest me but at the time I felt like Docker was aimed squarely at SysAdmins which wasn’t that exciting to me - no offense to my SysAdmin friends. :-) It was also 100% Linux-based when it first came out and I wasn’t a “Linux guy” back then. I was super comfortable with Mac and Windows but “Linux” just wasn’t my thing. I put off looking into it more but decided to sign-up for the Docker Newsletter just to keep an eye on it and see if anything interesting showed up. I read a lot of great articles that listed some of the key features:

As I dug in deeper I learned that Docker allows “Images” published up on Docker Hub to be used to create instances of running “Containers”. An image is a super efficient way to get a given framework (Node.js, ASP.NET Core, PHP, etc.), database servers, caching servers and much more up and running on your dev machine or even in production. What’s so cool about the Docker technology is that “Images” aren’t the same thing as the “Virtual Machine Images” you may have used before. In fact, Docker Images are very different from Virtual Machine Images as they’re typically smaller and more efficient to start and stop. A Docker Image isn’t a full OS as with Virtual Machines – it’s a layer that’s added onto a host OS so there are a lot of benefits that Docker Images bring to the table. I’ll save that discussion for another post though. In the meantime, here’s a quick summation of Docker Images and Containers for you:

This still sounds/looks rather SysAdmin-ish though right? That’s what I thought initially too. Let’s get to the good stuff that can impact you and your development projects.

How Docker Can Help Web Developers (and many others)

One day I saw an article in the Docker Newsletter that focused on a few key benefits that Docker offered to web developers. After reading it and thinking it over more I had one of those “light bulb moments” and thought, “Hey, this technology can be used to setup a consistent development environment quickly and easily! How cool is that?” What do I mean by that exactly?

Let’s say that you need to get Node.js, MongoDB, nginx, Redis and possibly more up and running on your dev machine. In addition to getting these requirements all installed properly, you also have to worry about getting security, configuration and more in place. To top it off, everyone on your team needs to do the same thing on their machines. Do you all have the correct versions of the servers and frameworks installed? What happens in a month or two when a new version comes out for a server/framework that everyone decides to move to? Is it easy to move to the new version? Did everyone configure security the same? How many hours have you (or your team) spent getting a development environment like that up and running correctly (and consistently) for a particular project? When a new developer or contractor comes onboard how quickly can they get to work? Whew – that’s way too many questions to ask and way too much work to do before you even write a single line of code (and yes…I realize there are many ways to automate some of this but rather than digressing I’ll stay focused on Docker here).

I’ve wasted more time than I care to admit in some cases setting up my dev environment for projects. The good news is that Docker can greatly simplify the process of creating a consistent development environment across multiple team members, remote workers, contractors and more. And – it can do it quickly! There are certainly other benefits as well. When I’m ready to move to staging or production I can move the exact environment (via Docker Images) and feel confident that the application is going to run the same in the other environments.

Once I realized that Docker wasn’t just for SysAdmins (which is certainly an important role as well) and could play a huge role for developers I jumped in head first and have never looked back. Sure, there was a learning curve (after all – I did have to learn some Linux fundamentals) but I’ve quite honestly enjoyed the process every step of the way, appreciate the documentation that the Docker website offers and enjoy working with the tools provided by Docker such as Docker Machine, Docker Client and especially Docker Compose. I’ll be writing some posts in the near future about these tools and how they can be used so stay tuned. Follow me on Twitter at @DanWahlin if you’re interested in hearing about the latest posts.

And that brings us to the new course that I just released…

The New Pluralsight Course: Docker for Web Developers

I’ve been using Docker for quite awhile now and am still super excited about the benefits it offers software developers. In fact, I was so excited about the features that I decided to create a full video course on Pluralsight.com which was recently released. The course has over 5 hours of in-depth information about why and how you’d use Docker in your Web development environment. Here’s a small sampling of some of the topics covered:

Why use Docker as a Developer?
The difference between Docker Images and Virtual Machines
Installing Docker Toolbox on Mac and Windows
The role of Docker Hub for pulling images
Getting started quickly and easily with the Kitematic Tool
Using Docker Machine to work with Linux on Mac and Windows
Key Docker Machine and Docker Client commands
How do you hook your source code into Docker?
How do you build custom Docker images?
How do multiple containers talk to each other at runtime?
Bring up a complete development environment with Docker Compose
Push custom images to Docker Hub
Using Docker Cloud to deploy your images/containers to a cloud provider
Much more!

Here’s the official course table of contents…

Docker for Web Developers Video Course Outline

Docker's open app-building platform can give any web developer a boost in productivity. You'll learn how to use the Docker toolbox, how to work with images and containers, how to get your project running in the cloud, and more. View the course here.

Course Overview
Why Use Docker as a Developer?
Setting Up Your Dev Environment with Docker Toolbox
Using Docker Machine and Docker Client
Hooking Your Source Code into a Container
Building Custom Images with Dockerfile
Communicating Between Docker Containers
Managing Containers with Docker Compose
Running Your Containers in the Cloud
Reviewing the Case for Docker

I put a lot of blood, sweat, tears, late nights, head banging, head scratching, why won’t this s*@? work moments, awesome – it works! moments, joy, excitement and more into the course so I really hope you enjoy it! Get to the full course here!

Win Free Pluralsight Access!

Wait….you don’t have a Pluralsight subscription and are totally bummed because you can’t view the course? Well, the good news is that I’ll be giving away a bunch of 30 day subscriptions and even a free year subscription to one lucky winner try to help you out. If you’d like to enter the contest choose one (or both for a better chance of winning) of the following options.

Option 1: Follow me on Twitter at @DanWahlin and sign-up for the Code with Dan Newsletter below (there's a lot of great content in the newsletter!).

Option 2: Follow me on Twitter at @DanWahlin and Tweet about the contest to your followers (click the button below to send the official Tweet):

If you win I'll direct message you with details on claiming your prize (assuming you followed me as mentioned above). I’ll be randomly selecting Pluralsight subscription winners who subscribe to the newsletter and/or tweet the message above as well so feel free to do both to increase your odds. Good luck!

Video: Modern Web Development Interview with Channel 9

Fri, 15 Jan 2016 04:19:26 GMT

I had the privilege to sit down with Seth Juarez from Channel 9 at the AngleBrackets conference in Las Vegas (fall 2015) and talk about modern web development and the main technologies that drive it. We talked about a lot of different topics ranging from TypeScript, Angular and Aurelia on the client-side to Node.js and ASP.NET 5 on the server-side. Seth’s a great interview host (and a super cool guy to hang out with) and I really enjoyed talking with him about modern technology in today’s world. Check out the interview below.

Modern Web Development with Seth Juarez and Dan Wahlin

Getting Started with ES6 - Using Classes

Thu, 06 Aug 2015 06:27:00 GMT

In a previous post I introduced how ES6 can be transpiled to ES5 using Traceur or Babel. By using transpilers you can write“modern” code and leverage features found in ES6 today while still allowing the code to run in older browsers. In this post I’m going to dive into classes which is one of the shiny new features found in ES6.

Getting Started with ES6/ES2015 Classes

Classes are the subject of much debate in the JavaScript world with some people loving them and others hating them. I’ve never believed in one world view being right for every situation and think that classes definitely have their place. If nothing else they’re worth exploring so that you understand the different options provided by ES6. If you want to continue with the more traditional “functional programming” techniques available in JavaScript it’s important to note that you can still do that. Classes are an option provided by ES6 but certainly not required to write ES6 code.

Here’s an example of an ES6 class that defines an automobile:

class Auto {
    constructor(data) {
        this.make = data.make;
        this.model = data.model;
        this.year = data.year;
        this.price = data.price;
    }

    getTotal(taxRate) {
        return this.price + (this.price * taxRate);
    }

    getDetails() {
        return `${this.year} ${this.make} ${this.model}`;
    }
}

If you’ve worked with languages such as Java, C# or others that support classes the general syntax will probably look familiar. You can see that the class keyword is used to define a container named Auto. The class contains a constructor that is called when the class is created using the new keyword (more on “new” later). The constructor provides a place where you can initialize properties with values. In the Auto class example above a data object is passed into the constructor and its properties are associated with the make, model, year and price properties.

The Auto class also defines two functions named getTotal() and getDetails() as well. You’ll quickly notice that the function keyword isn’t used to define each function. That’s a new feature available in classes (and in others parts of ES6 such as functions in object literals) that provides a nice, compact way to define functions. Within the getDetails() function you’ll also notice another new feature in ES6 – template strings. I’ll provide additional details about this feature in a future post.

The class code shown above is referred to as a “class definition”. Classes can also be defined using a “class expression” syntax as well. An example of a class expression is show next:

let Automobile = class {
    constructor(data) {
        this.make = data.make;
        this.model = data.model;
        this.year = data.year;
        this.price = data.price;
    }

    getDetails() {
        return `${this.year} ${this.make} ${this.model}`;
    }
}

The Automobile variable in this example is assigned to a class expression that has a constructor and a getDetails() function. The let keyword used in this example creates a local scoped variable. If you put this code inside a block such as an if statement or for loop the variable’s scope will be limited to the block. That’s another new (and very welcome) feature provided by ES6.

ES6 classes can also contain property get and set blocks if desired. This is done by using the get and set keywords:

class AutoWithProperties {
    constructor(data) {
        this._make;
        this._model;
    }

    get make() {
        return this._make;
    }
    
    set make(val) {
        if (val) {
            this._make = val;
        } else {
            this._make = 'No Make';
        }
    }
    
    get model() {
        return this._model;
    }
    
    set model(val) {
        if (val) {
            this._model = val;
        } else {
            this._model = 'No Model';
        }
        
    }
}

The AutoWithProperties class defines two properties named make and model that read (the get block) and write (the set block) to and from backing properties named _make and _model.

Creating an Instance of a Class

Once a class is defined you can create an instance using the new keyword. For example, an instance of Auto can be created using the following code:

let auto = new Auto({
   make: 'Chevy',
   model: 'Malibu',
   price: 30000, 
   year: 2014
});

What happens if you try to call the Auto class as a function without using the new keyword? That’s one of the limitations of classes in ES6 and something the anti-class crowd will quickly point out as a flaw. Calling a class as a regular function results in the following error:

This limitation is problematic when using a “functional programming” approach and definitely something to consider before choosing to use classes.

Classes also aren’t hoisted like regular JavaScript functions. If you try to “new up” a class before the class is defined the class definition won’t be hoisted to the top of the code to make that scenario work as with regular JavaScript functions. Instead, you’ll get an error saying that the class is not a function. That’s another limitation of classes that you should be aware of.

Extending a Class

Extending a function in ES5 requires use of the prototype property. ES6 classes still rely on prototype under the covers, but the syntax is much easier to read and understand. To extend a class you can use the extends keyword as shown next:

class Car extends Auto {
    constructor(data) {
        super(data);
        this.isElectric = data.isElectric;
        this.isHatchback = data.isHatchback;
    }

    getDetails() {
        return `${super.getDetails()} Electric: ${this.isElectric} Hatchback: ${this.isHatchback}`;
    }
}

This example defines a new Car class that extends the Auto class. The class’s constructor forwards the data parameter to the base class by making a call to super().

It’s important to note that a call to super() must be made before properties are initialized using “this” (if you return Object.create(null) from the constructor then you don’t actually have to call super() though). Anytime you extend a class super() must be called even if no data is passed to the base class’s constructor. The only exception to this rule is if the base and derived classes do not explicitly define custom constructors. In that case constructors will be implicitly created for both of the classes.

Here's a fiddle with the Auto and Car code in it that you can play around with:

Summary

Classes provide a succinct and clean way to encapsulate code that makes JavaScript feel more “object-oriented” even though prototypes are still used behind the scenes. They also provide constructors, support properties, allow functions to be defined without using the function keyword and support extension using the extends keyword. Developers coming from languages that support classes will feel right at home using the new class feature in ES6.

So should you move all of your code to classes as you migrate to ES6? Developers that prefer “functional programming” will be quick to say NO and avoid them like the plague. Classes don’t fit in well with the functional programming approach. If you understand their limitations (having to use new, no hoisting, etc.) then I think they can work well in some applications although it depends on the type of JavaScript code you like to write. I always say, “Use the right tool for the right job” which means taking the time to learn the ins-and-outs of classes and deciding if their pros outweigh their cons for your target application.

You can play around with classes by using the fiddle above, by using my ES6 starter project available at https://github.com/DanWahlin/ES6-Modules-Starter or by visiting the Babel ES6 playground.

Video: Building a Single-Page App with Angular, TypeScript, Azure Active Directory and Office 365 APIs

Sun, 03 May 2015 02:18:36 GMT

I had the opportunity to speak at the BUILD 2015 conference in San Francisco with my friend Andrew Connell and had a great time! We gave a talk on Angular, TypeScript, Azure AD and Office 365 APIs and I also gave two “Express” talks on TypeScript. It was super fun to meet new people and hang out with everyone at the conference. I even had the opportunity to check out the upcoming HoloLens device which was super cool! I was heading up an elevator to a meeting and a member of the HoloLens team approached me and asked if I had some time to do some “HoloLens Testing”. Let’s just say that I was a bit late for my meeting – I wasn’t going to pass up the opportunity to check out HoloLens in person.

Thanks to everyone who came to the talk. We had a great turnout! If you weren’t able to make it (it was tough to get a ticket to BUILD this year) then you can catch the video below.

We had some microphone challenges for the first minute or so of the talk so it looks like they cut out the introduction but everything else is there if you’re interested in watching the talk. I have no idea why they chose the picture below for the video overlay. I’m apparently saluting Angular and TypeScript (with the wrong hand).

Building a Single-Page App with Angular, TypeScript, Azure AD and Office 365 APIs

The Role of Interfaces in TypeScript

Mon, 13 Apr 2015 17:57:00 GMT

In my last post I talked about how classes and interfaces could be extended in the TypeScript language. By using TypeScript’s extends keyword you can easily create derived classes that inherit functionality from a base class. You can also use the extends keyword to extend existing interfaces and create new ones. In the previous post I showed an example of an ITruckOptions interface that extends IAutoOptions. An example of the interfaces is shown next:

interface IAutoOptions {
    engine: IEngine;
    basePrice: number;
    state: string;
    make: string;
    model: string;
    year: number;
}

interface ITruckOptions extends IAutoOptions {
    bedLength: string;
    fourByFour: bool;
}

I also showed how a class named Engine can implement an interface named IEngine. By having the IEngine interface in an application you can enforce consistency across multiple engine classes.

interface IEngine {
    start(callback: (startStatus: bool, engineType: string) => void) : void;
    stop(callback: (stopStatus: bool, engineType: string) => void) : void;
}

class Engine implements IEngine {
    constructor(public horsePower: number, public engineType: string) { }

    start(callback: (startStatus: bool, engineType: string) => void) : void {
        window.setTimeout(() => {
            callback(true, this.engineType);
        }, 1000);
    }

    stop(callback: (stopStatus: bool, engineType: string) => void) : void {
        window.setTimeout(() => {
            callback(true, this.engineType);
        }, 1000);
    }
}

Although interfaces work well in object-oriented languages, JavaScript doesn’t provide any built-in support for interfaces so what role do they actually play in a TypeScript application? The first answer to that question was discussed earlier and relates to consistency. Classes that implement an interface must implement all of the required members (note that TypeScript interfaces also support optional members as well). This makes it easy to enforce consistency across multiple TypeScript classes. If a class doesn’t implement an interface properly then the TypeScript compiler will throw an error and no JavaScript will be output. This lets you catch issues upfront rather than after the fact which is definitely beneficial and something that simplifies maintenance down the road.

If you look at the JavaScript code that’s generated you won’t see interfaces used at all though – JavaScript simply doesn’t support them. Here’s an example of the JavaScript code generated by the TypeScript compiler for Engine:

var Engine = (function () {
    function Engine(horsePower, engineType) {
        this.horsePower = horsePower;
        this.engineType = engineType;
    }
    Engine.prototype.start = function (callback) {
        var _this = this;
        window.setTimeout(function () {
            callback(true, _this.engineType);
        }, 1000);
    };
    Engine.prototype.stop = function (callback) {
        var _this = this;
        window.setTimeout(function () {
            callback(true, _this.engineType);
        }, 1000);
    };
    return Engine;
})();

Looking through the code you’ll see that there’s no reference to the IEngine interface at all which is an important point to understand with TypeScript – interfaces are only used when you’re writing code (the editor can show you errors) and when you compile. They’re not used at all in the generated JavaScript.

In addition to driving consistency across TypeScript classes, interfaces can also be used to ensure proper values are being passed into properties, constructors, or functions. Have you ever passed an object literal (for example { firstName:’John’, lastName:’Doe’}) into a JavaScript function or object constructor only to realize later that you accidentally left out a property that should’ve been included? That’s an easy mistake to make in JavaScript since there’s no indication that you forgot something. With TypeScript that type of problem is easy to solve by adding an interface into the mix.

The Auto class shown next demonstrates how an interface named IAutoOptions can be defined on a constructor parameter. If you pass an object into the constructor that doesn’t satisfy the IAutoOptions interface then you’ll see an error in editors such as Visual Studio and the code won’t compile using the TypeScript compiler.

class Auto {
    basePrice: number;
    engine: IEngine;
    state: string;
    make: string;
    model: string;
    year: number;

    constructor(options: IAutoOptions) {
        this.engine = options.engine;
        this.basePrice = options.basePrice;
        this.state = options.state;
        this.make = options.make;
        this.model = options.model;
        this.year = options.year;
    }
}

An example of using the Auto class’s constructor is shown next. In this example the year (a required field in the interface) is missing so the object doesn’t satisfy the IAutoOptions interface.

var auto = new Auto({
    engine: new Engine(250, 'V8'),
    basePrice: 45000,
    state: 'Arizona',
    make: 'Ford',
    model: 'F-150'
});

In this example the object being passed into the Auto’s constructor implements 5 out of 6 fields from the IAutoOptions interface. Because the constructor parameter requires 6 fields an error will be displayed in the editor and the TypeScript compiler will error out as well if you try to compile the code to JavaScript. An example of the error displayed in Visual Studio is shown next:

This makes it much easier to catch issues such as missing data while you’re writing the initial code as opposed to catching issues after the fact while trying to run the actual JavaScript. If you write unit tests then this functionality should also help ensure that tests are using proper data.

Interfaces also allow for more loosely coupled applications as well. Looking back at the Auto class code you’ll notice that the engine field is of type IEngine. This allows any object that implements the interface to be passed which provides additional flexibility. The same can be said about the Auto’s constructor parameter since any object that implement IAutoOptions can be passed.

Conclusion

In this post you’ve seen that Interfaces provide a great way to enforce consistency across objects which is useful in a variety of scenarios. In addition to consistency, interfaces can also be used to ensure that proper data is passed to properties, constructors and functions. Finally, interfaces also provide additional flexibility in an application and make it more loosely coupled. Although they never appear in the generated JavaScript, they help to identify issues upfront as you’re building an application and certainly help as modifications are made in the future.

If you’d like to learn more about TypeScript check out the TypeScript Fundamentals course on Pluralsight.com.

Extending Classes and Interfaces using TypeScript

Fri, 10 Apr 2015 17:49:00 GMT

In a previous post I discussed the fundamentals of the TypeScript language and how it can be used to build JavaScript applications. TypeScript is all about strongly-typed variables and function parameters, encapsulation of code, and catching issues upfront as opposed to after the fact to provide more maintainable code bases. One of the great features it offers is the ability to take advantage of inheritance without having to be an expert in JavaScript prototypes, constructors, and other language features (although I certainly recommend learning about those features regardless if you use TypeScript or not).

In this post I’ll discuss how classes and interfaces can be extended using TypeScript and the resulting JavaScript that’s generated. Let’s jump in!

Extending Classes and Interfaces

Let’s assume that we have a TypeScript class named Auto that has the following code in it:

class Auto {
    private _basePrice: number;
    engine: IEngine;
    state: string;
    make: string;
    model: string;
    year: number;
    accessoryList: string;

    constructor(options: IAutoOptions) {
        this.engine = options.engine;
        this.basePrice = options.basePrice;
        this.state = options.state;
        this.make = options.make;
        this.model = options.model;
        this.year = options.year;
    }

    calculateTotal() : number {
        var taxRate = TaxRateInfo.getTaxRate(this.state);
        return this.basePrice + (taxRate.rate * this.basePrice);
    }

    addAccessories(...accessories: Accessory[]) {
        this.accessoryList = '';
        for (var i = 0; i < accessories.length; i++) {
            var ac = accessories[i];
            this.accessoryList += ac.accessoryNumber + ' ' + ac.title + '<br />';
        }
    }

    getAccessoryList(): string {
        return this.accessoryList;
    }

    get basePrice(): number {
        return this._basePrice;
    }

    set basePrice(value: number) {
        if (value <= 0) throw 'price must be >= 0';
        this._basePrice = value;
    }
}

Looking through the code you can see that the class has several members including fields, a constructor, functions (including a function that accepts a special type of … parameter referred to as a rest parameter), and the get and set blocks for a property named basePrice. Although unrelated to inheritance, it’s important to note that properties in TypeScript only work when setting the TypeScript compilation target to ECMAScript 5 using the --target switch (for example: tsc.exe --target ES5 YourFile.ts).

The engine field in the Auto class accepts any type that implements a TypeScript interface named IEngine and the constructor accepts any object that implements an IAutoOptions interface. Both of these interfaces are shown next:

interface IEngine {
    start(callback: (startStatus: boolean, engineType: string) => void) : void;
    stop(callback: (stopStatus: boolean, engineType: string) => void) : void;
}

interface IAutoOptions {
    engine: IEngine;
    basePrice: number;
    state: string;
    make: string;
    model: string;
    year: number;
}

The start() and stop() functions in the IEngine interface both accept a callback function. The callback function must accept two parameters of type boolean and string. An example of implementing the IEngine interface using TypeScript is shown next. A class that implements an interface must define all members of the interface unless the members are marked as optional using the ? operator.

class Engine implements IEngine {
    constructor(public horsePower: number, public engineType: string) { }

    start(callback: (startStatus: boolean, engineType: string) => void) : void{
        window.setTimeout(() => {
            callback(true, this.engineType);
        }, 1000);
    }

    stop(callback: (stopStatus: boolean, engineType: string) => void) : void{
        window.setTimeout(() => {
            callback(true, this.engineType);
        }, 1000);
    }
}

It goes without saying that if we wanted to create a Truck class that extends the Auto class we wouldn’t want to cut-and-paste the code from Auto into Truck since that would lead to a maintenance headache down the road. Fortunately, TypeScript allows us to take advantage of inheritance to re-use the code in Auto. An example of a Truck class that extends the Auto class using the TypeScript extends keyword is shown next:

class Truck extends Auto {
    private _bedLength: string;
    fourByFour: boolean;

    constructor(options: ITruckOptions) {
        super(options);
        this.bedLength = options.bedLength;
        this.fourByFour = options.fourByFour;
    }

    get bedLength(): string {
        return this._bedLength;
    }

    set bedLength(value: string) {
        if (value == null || value == undefined || value == '') {
            this._bedLength = 'Short';
        }
        else {
            this._bedLength = value;
        }
    }
}

The Truck class extends Auto by adding bedLength and fourByFour capabilities. The constructor also accepts an object that implements the ITruckOptions interface which in turn extends the IAutoOptions interface shown earlier. Notice that interfaces can also be extended in TypeScript by using the extends keyword:

interface ITruckOptions extends IAutoOptions {
    bedLength: string;
    fourByFour: boolean;
}

Here’s an example of creating a new instance of the Truck class and passing an object that implements the ITruckOptions interface into its constructor:

var truck = new Truck({
    engine: new Engine(250, 'V8'),
    basePrice: 45000,
    state: 'Arizona',
    make: 'Ford',
    model: 'F-150',
    year: 2013,
    bedLength: 'Short Bed',
    fourByFour: true
});

Inheritance in JavaScript

You can see that the TypeScript extends keyword provides a simple and convenient way to inherit functionality from a base class (or extend an interface) but what happens behind the scenes once the code is compiled into JavaScript? After all, JavaScript doesn’t have an extends or inherits keyword in the language - at least not in ECMAScript 5 or earlier. If you look at the JavaScript code that’s output by the TypeScript compiler you’ll see that a little magic is added to simulate inheritance in JavaScript using prototyping.

First, a variable named __extends is added into the generated JavaScript and it is assigned to a function that accepts two parameters as shown next:

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};

The function accepts the derived/child type (the d parameter) and the base type (the b parameter). Inside of the function an object named __ is created (definitely a strange name) and the derived type is assigned to it’s constructor. From there, the base type’s prototype is assigned to the __ object’s prototype. To finish things up a new instance of the __ object is created and assigned to the derived type’s prototype so it picks up prototype members from the base type. In the end, this little function provides a re-useable way to handle inheritance between two objects in JavaScript. If you’re new to prototypes then you’re probably appreciating the simplicity provided by the TypeScript extends keyword!

The __extends function is used later in the generated JavaScript code to handle inheritance between Truck and Auto. An example of the code that’s generated to represent the Truck class is shown next:

var Truck = (function (_super) {
    __extends(Truck, _super);
    function Truck(options) {
        _super.call(this, options);
        this.bedLength = options.bedLength;
        this.fourByFour = options.fourByFour;
    }
    Object.defineProperty(Truck.prototype, "bedLength", {
        get: function () {
            return this._bedLength;
        },
        set: function (value) {
            if(value == null || value == undefined || value == '') {
                this._bedLength = 'Short';
            } else {
                this._bedLength = value;
            }
        },
        enumerable: true,
        configurable: true
    });
    return Truck;
})(Auto);

Notice that the Truck variable is assigned to a function that accepts a parameter named _super. This parameter represents the base class to inherit functionality from. The function assigned to Truck is self-invoked at the bottom of the code and the base class to derive from (Auto in this example) is passed in for the value of the _super parameter. The __extends function discussed earlier is then called inside of the Truck function and the derived type (Truck) and base type (Auto) are passed in as parameters. The magic of inheritance then happens using prototypes as discussed earlier.

Conclusion

In this post you’ve seen how TypeScript can be used to create an inheritance hierarchy and the resulting JavaScript that’s generated. You’ve also seen how interfaces can be created, implemented, and even extended using TypeScript.

Check out the TypeScript Fundamentals course on Pluralsight.com and see what TypeScript offers for both large-scale and small-scale JavaScript applications.

Introducing the AngularU Conference

Sun, 29 Mar 2015 21:49:00 GMT

In late 2014 my good friend Peter Kellner approach me with a big idea – an idea that immediately caught my attention. He wanted to explore collaborating on a new conference idea that would highlight Angular and other “hot” Web development topics and wondered if I’d be interested in working with him and another friend of his named Kevin Nilson (who is also a good friend now) on a full-scale conference. I’ve been involved with chairing a lot of conference tracks over the years but never been the driving force behind organizing an entire conference. While the idea was definitely exciting it was also a little scary – at least initially.

After talking more with Peter and Kevin I decided to jump in and we’ve been working hard to put on a top-notch conference called AngularU (short for “Angular University”) that will be held in San Francisco from June 22 – 25, 2015. I’m really excited about the conference and thought I’d discuss some of the key reasons in this post.

The Web is Changing Rapidly

It’s no secret that the web is changing at a rapid pace. In fact “rapid” may be an understatement since in the time I’ve been writing this post I suspect several new JavaScript or CSS libraries have been released on Github. Keeping up with the pace of Web technologies can be a challenging proposition to say the least although for me personally I think it’s all part of the fun of working in this space. In my training classes I always tell people that, “If you’re getting bored you’re just not trying hard enough” since there’s so much to learn.

When Peter and I first discussed the concept of doing an Angular conference I thought about it more and realized that while focusing on Angular would be good, several other conferences were already doing that exact thing really well such as ng-conf (friends from the ng-conf event such as Aaron Frost and Joe Eames have even taken the time to provide us with a lot of excellent feedback). I took a step back and thought about what web technologies I’d like to see included if I could create my own conference given the rapid pace of the web in general. After thinking about it more I decided that I’d want a conference that had Angular sessions (including Angular 2!) as well as sessions on TypeScript, ES6, and Web Components. I suggested that general concept to Peter and we agreed that providing more broad coverage of web technologies would be the overall goal of AngularU. As a result, the AngularU conference now has many talks lined up to discuss TypeScript, ES6, Web Components, CSS and more which should help attendees get a good understanding about the latest and greatest technologies out there.

Top-Notch Experts and Speakers

There are a lot of conferences out there and many claim to have the “best speakers in the industry”. If I was going to be involved with a conference then I definitely wanted some of the top names and key players in the industry to be involved. Peter, Kevin and I decided that we wanted the Google team to give the keynote on Angular 2. Fortunately, we had a meeting with Brad Green and Igor Minar from the Angular team and they agreed to give the keynote. We’re really excited that Brad, Igor, and Misko Hevery have agreed to come speak! It’ll be great to hear about the latest updates on Angular 2 in June.

We didn’t stop there. With the big announcement about TypeScript and Angular we also wanted a top-notch person involved with TypeScript to come speak. As a result, the day 2 keynote at AngularU will be by Jonathan Turner, the program manager on the TypeScript team. We’re super excited to have Jonathan involved with the conference as well. We also wanted someone very well known in the JavaScript community to be involved who’s had a tremendous influence over the years on the JavaScript code most of us write today. We’re very excited to have Douglas Crockford coming as well to give a day 1 afternoon keynote to discuss his latest findings in the world of JavaScript!

In addition to the keynote speakers we also have many additional great speakers and experts in the industry such as John Papa (he and I will be giving a talk after the day 1 keynote), John Lindquist, Lukas Ruebbelke and many more. Check out the http://angularu.com site for a list of speakers (more are being added as we finalize talk selections).

AngularU Sessions

So what are some of the topics speakers will be covering at AngularU? Here are a few of the talks:

Angular 2 Keynote
TypeScript Keynote
JavaScript/ES6 Keynote
Migrating to Angular 2
Crazy Fast Prototyping with Angular
Modular Angular: Building Reusable Components Today
ES6 with Angular Today
Web Components and the Shadow DOM
Creating D3 components with Angular 2 and TypeScript
Angular 2 Server Rendering
Angular 2 Core Concepts
Foundation for Apps: Integrating Angular with Responsive Web Apps
Many more!

Check out the AngularU website to see a complete list of speakers and talks. We’ll be updating it with new talks and speakers in early April so check back often for the latest.

Have Fun While Learning and Networking

People learn best while they’re having fun and we plan to make AngularU a fun yet educational event. From the AngularU game room to the lunch and attendee party events, we have a lot of great stuff planned that will help people meet and get a chance to discuss all of the things happening with web development. In addition to the events planned for attendees, we also have a community night planned that anyone from the San Francisco area can attend and have other events to give everyone a chance to talk with the speakers and other experts who will be attending.

Come Join Us at AngularU in San Francisco!

We’ve come a long way from the initial call that Peter and I had about potentially doing a conference and are super excited about all of the great speakers and content that will be at the event! We hope that you’ll come join in the fun and learning at AngularU!

AngularU will run from June 22nd – 23rd at the Hyatt Regency San Francisco Airport hotel and conference center. Post-conference workshops will run on June 24th – 25th at the same location.

Creating a TypeScript Workflow with Gulp

Mon, 23 Mar 2015 07:14:15 GMT

TypeScript provides a lot of great functionality that lets you leverage many of the features available in ES6 today but how do you get started using it in your favorite editor? If you’re using Visual Studio or WebStorm then TypeScript support can be used directly and everything happens magically without much work on your part. But, if you’re using Sublime Text, Brackets, Atom, or another editor you’ll have to find a plugin to compile .ts files to JavaScript or create your own custom workflow.

While several plugins exist to compile TypeScript and even provide code help as you’re writing TypeScript code in different editors, I generally prefer to use my own custom workflow. There are multiple benefits associated with going with this approach including the ability to standardize and share tasks across team members as well as being able to tie the workflow into a custom build process used in continuous integration scenarios. In this post I’ll walk through the process of creating a custom TypeScript workflow using Gulp (a JavaScript task manager). It’s a workflow setup that my friend Andrew Connell and I created when we recently converted an application to TypeScript. Throughout the post you’ll learn how to setup a file named gulpfile.js to compile TypeScript to JavaScript and also see how you can “lint” your TypeScript code to make sure it’s as clean and tidy as possible.

Getting Started Creating a Custom TypeScript Workflow

I talked about using Gulp to automate the process of transpiling ES6 to ES5 in a previous post. The general process shown there is going to be used here as well although I’ll be providing additional details related to TypeScript. If you’re new to Gulp, it’s a JavaScript task manager that can be used to compile .ts files to .js files, lint your TypeScript, minify and concatenate scripts, and much more. You can find additional details at http://gulpjs.com.

Here’s a step-by-step walk-through that shows how to get started creating a TypeScript workflow with Gulp. Although there are several steps to perform, it’s a one-time setup that can be re-used across projects. If you’d prefer to use a starter project rather than walking through the steps that are provided in this post then see the project at https://github.com/DanWahlin/AngularIn20TypeScript or download the project associated with the exact steps shown in this post here.

Creating the Application Folders and Files

Create a new folder where your project code will live. You can name it anything you’d like but I’ll call it typescriptDemo in this post.
Create the following folders inside of typescriptDemo:

src
src/app
src/js

Open a command-prompt in the root of the typescriptDemo folder and run the following npm command (you’ll need to have Node.js installed) to create a file named package.json.

npm init

Answer the questions that are asked. For this example you can go with all of the defaults it provides. After completing the wizard a new file named package.json will be added to the root of the folder.
Create the following files in the typescriptDemo folder:

gulpfile.js
gulpfile.config.js
tslint.json

Installing Gulp, Gulp Modules and TSD

Now let’s get Gulp installed globally on your machine. Open a command-prompt and run the following command:

npm install gulp –g

Open package.json and add the following devDependencies property into it. The location of the property in the file doesn’t really matter but I normally put it at the bottom. A sample package.json file with the dependencies already in it can be found at https://github.com/DanWahlin/AngularIn20TypeScript.

Note: The module versions shown here will certainly change over time. You can visit http://npmjs.org to find the latest version of a given module.

"devDependencies": { 
    "gulp": "^3.8.11", 
    "gulp-debug": "^2.0.1", 
    "gulp-inject": "^1.2.0", 
    "gulp-sourcemaps": "^1.5.1", 
    "gulp-tslint": "^1.4.4", 
    "gulp-typescript": "^2.5.0", 
    "gulp-rimraf": "^0.1.1" 
}

Ensure that your command window path is at the root of the typescriptDemo folder and run the following command to install the dependencies:

npm install
The http://definitelytyped.org site provides a Node.js module named tsd that can be used to install TypeScript type definition files that are used to provide enhanced code help in various editors. Install the tsd module globally by running the following command:

npm install tsd@next -g
Run the following command:

tsd init
Open the tsd.json file that is generated in the root of typescriptDemo and change the following properties to include “tools” in the path as shown next:

"path": "tools/typings",
"bundle": "tools/typings/tsd.d.ts"
Let’s use tsd to install a TypeScript definition file for Angular (an angular.d.ts file) and update the tsd.json file with the Angular file details as well. Run the following command:

tsd install angular --save

Note: You can install additional type definition files for other JavaScript libraries/frameworks by running the same command but changing the name from “angular” to the appropriate library/framework. See http://definitelytyped.org/tsd for a list of the type definition files that are available.

Let’s now install the jQuery type definition as well since the Angular type definition file has a dependency on it:

tsd install jquery --save
If you look in the typescriptDemo folder you’ll see a new folder is created named tools. Inside of this folder you’ll find a file named typings that has an angular/angular.d.ts type definition file and a jquery/jquery.d.ts file in it. You’ll also see a file named tsd.json.
Create a file named typescriptApp.d.ts in the typescriptDemo/tools/typings folder. This file will track all of the TypeScript files within the application to simplify the process of resolving dependencies and compiling TypeScript to JavaScript.
Add the following into the typescriptApp.d.ts file and save it (the comments are required for one of the Gulp tasks to work properly):

//{

//}

Creating Gulp Tasks

Open https://github.com/DanWahlin/AngularIn20TypeScript/blob/master/gulpfile.config.js in your browser and copy the contents of the file into your empty gulpfile.config.js file. This file sets up paths that will be used when performing various tasks such as compiling TypeScript to JavaScript.
Open https://github.com/DanWahlin/AngularIn20TypeScript/blob/master/gulpfile.js in your browser and copy the contents of the file into your empty gulpfile.js file. This creates the following Gulp tasks:

gen-ts-refs: Adds all of your TypeScript file paths into a file named typescriptApp.d.ts. This file will be used to support code help in some editors as well as aid with compilation of TypeScript files.

ts-lint: Runs a “linting” task to ensure that your code follows specific guidelines defined in the tsline.js file.

compile-ts: Compiles TypeScript to JavaScript and generates source map files used for debugging TypeScript code in browsers such as Chrome.

clean-ts: Used to remove all generated JavaScript files and source map files.

watch: Watches the folder where your TypeScript code lives and triggers the ts-lint, compile-ts, and gen-ts-refs tasks as files changes are detected.

default: The default Grunt task that will trigger the other tasks to run. This task can be run by typing gulp at the command-line when you’re within the typescriptDemo folder.

Open https://github.com/DanWahlin/AngularIn20TypeScript/blob/master/tslint.json in your browser and copy the contents of the file into your empty tslint.js file. This has the “linting” guidelines that will be applied to your code. You’ll more than likely want to tweak some of the settings in the file depending on your coding style.

Compiling TypeScript to JavaScript

Now that the necessary files are in place (whew!), let’s add a test TypeScript file into the application folder and try to compile it to JavaScript. Create a file named customer.ts in the typescriptDemo/src/app folder.

Add the following code into the customer.ts file:

class Customer {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}

Run the following command in your command window (run it from the root of the typescriptDemo folder):

gulp
You should see output that shows that the tasks have successfully completed.
Open the src/js folder and you should that two new files named customer.js and customer.js.map are now there.
Go back to customer.ts and change the case of the Customer class to customer. Save the file and notice that the gulp tasks have run in the command window. You should see a tslint error saying that the case of the class is wrong.
Your Gulp/TypeScript workflow is now ready to go.

Conclusion

In this post you’ve seen the steps required to create a custom TypeScript workflow using the Gulp JavaScript task runner. Although you may certainly want to tweak some of the settings and tasks, the steps shown here should help get you started using TypeScript in your applications.

In case you missed it earlier in the post, a project that has all of the steps already completed can be found at https://github.com/DanWahlin/AngularIn20TypeScript. You can also find the exact setup discussed in this post here (just run npm install to get the required modules for the project).

Getting Started with TypeScript – Classes, Types and Interfaces

Sun, 08 Mar 2015 16:38:00 GMT

One of the big announcements at ng-conf this week was the collaborative work that the Angular and TypeScript teams have been doing. Angular 2 will leverage TypeScript heavily and you can as well in any type of JavaScript application (client-side or even server-side with Node.js). You can also use ES6 or ES5 with Angular 2 if you decide that TypeScript isn't for you. Andrew Connell and I gave a talk on TypeScript at ng-conf that you can view here if interested:

I've been a big fan of TypeScript for many years and decided to update a few previous posts I've done to help people get started with it. In this first post I'll talk about the basics of TypeScript and provide additional details about the language in future posts.

TypeScript Overview

Here’s what the TypeScript site (http://typescriptlang.org) says about TypeScript:

TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

TypeScript was created by Anders Hejlsberg (the creator of the C# language) and his team at Microsoft. To sum it up, TypeScript is a language based on ES6 standards that can be compiled to JavaScript. It isn’t a stand-alone language that’s completely separate from JavaScript’s roots though. It’s a superset of JavaScript which means that standard JavaScript code can be placed in a TypeScript file (a file with a .ts extension) and used directly. That’s a very important point/feature of the language since it means you can use existing JavaScript code and frameworks with TypeScript without having to do major code conversions to make it all work. Once a TypeScript file is saved it can be compiled to JavaScript using TypeScript’s tsc.exe compiler tool, by using a variety of editors/tools, or by using JavaScript task runners such as Grunt or Gulp.

TypeScript offers several key features. First, it provides built-in static type support meaning that you define variables and function parameters as being “string”, “number”, “boolean”, and more to avoid incorrect types being assigned to variables or passed to functions. Second, TypeScript provides a way to write modular code by directly supporting ES6 class and module definitions and it even provides support for custom interfaces that can be used to drive consistency. Finally, TypeScript integrates with several different tools such as Brackets, Sublime Text, Emacs, Visual Studio, and Vi to provide syntax highlighting, code help, build support, and more depending on the editor. Find out more about editor support at http://www.typescriptlang.org/#Download. In addition to all of this, TypeScript supports much of ES6 (with more and more ES6 features being added in each release) and also includes support for concepts such as generics (code templates), interfaces, and more.

TypeScript can also be used with existing JavaScript frameworks/libraries such as Angular, Node.js, jQuery, and others and even catch type issues and provide enhanced code help as you build your apps. Special “declaration” files that have a d.ts extension are available for over 300 frameworks/libaries and with the latest announcement at ng-conf by the Angular and TypeScript teams I fully expect that number to go even higher. Visit http://definitelytyped.org to access the different declaration files that can be used with tools to provide additional code help and ensure that a string isn’t passed to a parameter that expects a number. Although declaration files aren’t required, TypeScript’s support for declaration files makes it easier to catch issues upfront while working with existing libraries such as Angular and jQuery.

Getting Started with TypeScript

To get started learning TypeScript visit the TypeScript Playground available at http://www.typescriptlang.org. Using the playground editor you can experiment with TypeScript code, get code help as you type, and see the JavaScript that TypeScript generates once it’s compiled. Here’s an example of the TypeScript playground in action:

One of the first things that may stand out to you about the code shown above is that classes can be defined in TypeScript. This makes it easy to group related variables and functions into a container which helps tremendously with re-use and maintainability especially in enterprise-scale JavaScript applications. While you can certainly simulate classes using JavaScript patterns (note that ECMAScript 6 will support classes directly), TypeScript makes it quite easy especially if you come from an object-oriented programming background. An example of the Greeter class shown in the TypeScript Playground is shown next:

class Greeter {
    greeting: string;

    constructor (message: string) {
        this.greeting = message;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

Looking through the code you’ll notice that types can be defined on variables and parameters such as greeting: string, that constructors can be defined, and that functions can be defined such as greet(). The ability to define types is a key feature of TypeScript (and where its name comes from) that can help identify bugs upfront before even running the code. Many types are supported including primitive types like string, number, boolean, array, and null as well as object literals and more complex types such as HTMLInputElement (for an <input> tag). Custom types can be defined as well.

The JavaScript output by compiling the TypeScript Greeter class is shown next:

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

Notice that the code is using JavaScript prototyping and closures to simulate a Greeter class in JavaScript. The body of the code is wrapped with a self-invoking function to take the variables and functions out of the global JavaScript scope. This is important feature that helps avoid naming collisions between variables and functions.

In cases where you’d like to wrap a class in a naming container (similar to a namespace or package in other languages) you can use TypeScript’s module keyword. The following code shows an example of wrapping an AcmeCorp module around the Greeter class. In order to create a new instance of Greeter the module name must now be used. This can help avoid naming collisions that may occur with the Greeter class.

module AcmeCorp {
    export class Greeter {
        greeting: string;

        constructor (message: string) {
            this.greeting = message;
        }

        greet() {
            return "Hello, " + this.greeting;
        }
    }
}

var greeter = new AcmeCorp.Greeter("world");

In addition to being able to define custom classes and modules in TypeScript, you can also take advantage of inheritance by using TypeScript’s extends keyword. The following code shows an example of using inheritance to define two report objects:

class Report {
    name: string;

    constructor (name: string) {
        this.name = name;
    }

    print() {
        alert("Report: " + this.name);
    }
}

class FinanceReport extends Report {
    constructor (name: string) {
        super(name);
    }

    print() {
        alert("Finance Report: " + this.name);
    }

    getLineItems() {
        alert("5 line items");
    }
}

var report = new FinanceReport("Month's Sales");
report.print();
report.getLineItems();

In this example a base Report class is defined that has a variable (name), a constructor that accepts a name parameter of type string, and a function named print(). The FinanceReport class inherits from Report by using TypeScript’s extends keyword. As a result, it automatically has access to the print() function in the base class. In this example the FinanceReport overrides the base class’s print() method and adds its own. The FinanceReport class also forwards the name value it receives in the constructor to the base class using the super() call.

TypeScript also supports the creation of custom interfaces when you need to provide consistency across a set of objects and ensure that proper types are used. The following code shows an example of an interface named Thing (from the TypeScript samples) and a class named Plane that implements the interface to drive consistency across the app. Notice that the Plane class includes intersect and normal as a result of implementing the interface.

interface Thing {
    intersect: (ray: Ray) => Intersection;
    normal: (pos: Vector) => Vector;
    surface: Surface;
}

class Plane implements Thing {
    normal: (pos: Vector) =>Vector;

    intersect: (ray: Ray) =>Intersection;

    constructor (norm: Vector, offset: number, public surface: Surface) {
        this.normal = function (pos: Vector) { return norm; }
        this.intersect = function (ray: Ray): Intersection {
            var denom = Vector.dot(norm, ray.dir);
            if (denom > 0) {
                return null;
            } else {
                var dist = (Vector.dot(norm, ray.start) + offset) / (-denom);
                return { thing: this, ray: ray, dist: dist };
            }
        }
    }
}

At first glance it doesn’t appear that the surface member is implemented in Plane but it’s actually included automatically due to the public surface: Surface parameter in the constructor. Adding public varName: Type to a constructor automatically adds a typed variable into the class without having to explicitly write the code as with normal and intersect.

TypeScript has many additional language features but defining types and creating classes, modules, and interfaces are some of the key features it offers. I'll be covering additional features in future posts so stay tuned. Subscribe to my Web Weekly newsletter (at the top of the blog or below) to stay up-to-date on all of the latest technology that I find and write about.

The AngularJS Custom Directives Video Training Course Has Been Released!

Sun, 22 Feb 2015 15:00:00 GMT

I’m excited to announce that my new AngularJS Custom Directives video training course has been released on Udemy.com! If you’ve been wanting to dive deeper into AngularJS directives and understand how they work while also clarifying terms such as isolate scope, transclusion, linking, and much more then this is the course for you. If you enjoyed my AngularJS JumpStart course or my AngularJS in 60ish Minutes video on YouTube then I guarantee you’ll love this course.

The first 2 modules of the course are available to view absolutely free so that you can check it out. Here’s an additional free video from the Isolate Scope section in Module 3 of the course.

Understanding Shared and Isolate Scope

AngularJS Custom Directives Course Overview

Are you interested in learning how to take your AngularJS skills to the next level? Have you been confused by terms like tranclusion, isolate scope, interpolation, local scope properties, and more? Have you wanted to build custom directives but didn't know where to start? Look no further than the AngularJS Custom Directives course!

Throughout this course you'll be provided with a step-by-step look at the process of creating custom directives and cover key concepts that you need to know to take your AngularJS skills to the next level. Topics such as the $compile service, the directive definition object (DDO), the link() function, isolate scope, controller integration, transclusion, working with the $interpolate service, $asyncValidators, and much more are covered as well as techniques for structuring AngularJS directive code.

In addition to expert instruction by AngularJS Google Developer Expert (GDE) Dan Wahlin you'll also be provided with hands-on code samples that you can follow along with at your own pace. Just pause or rewind the video if you need to see the code again or jump right to the end solution that's provided if you'd like. Begin and end code is provided so that you can maximize your learning and become an expert in building directives!

The modules covered in the course include:

Getting Started with Directives
Shared and Isolate Scope
The Link Function
Using Controllers in Directives
Bonus Content (several robust directive examples)

Many additional details are provided throughout the modules including coverage of the $parse and $interpolate services, how controllers and the link function can be used in concert, why and how to use transclusion to merge custom content, pros and cons of available coding approaches for custom directives, techniques for passing parameter data to functions when using local scope properties, and much, much more.

View a complete list of topics covered here.

Adding Azure Active Directory and OWIN Code into an AngularJS/ASP.NET MVC Application to Handle User Authentication

Mon, 26 Jan 2015 00:40:07 GMT

In a previous post I discussed how to setup the necessary configuration code and assemblies in an AngularJS/ASP.NET MVC application in order to authenticate users against Azure Active Directory (AAD). Once the initial configuration is complete you can write code to redirect users to the AAD login screen to retrieve an ID token.

In Part 4 of an article series I’m writing for http://itunity.com I discuss the necessary code that’s required to authenticate a user and retrieve the ID token. Additional topics covered include hooking AAD into the ASP.NET MVC pipeline, creating an Entity Framework token cache, triggering authentication against AAD in MVC controllers, and more. Here’s an excerpt from the article. The complete code for the application discussed in the article series can be found on the OfficeDev Github site.

Adding AAD Configuration and Assemblies into an Application

Part 3 of this series covered how to access the Client ID, Key, and Tenant ID values from Azure Active Directory (AAD) and add them into web.config. It also showed how to get the necessary AAD and OWIN NuGet packages in place and create a SettingsHelper class to simplify the process of accessing web.config values.

In this article, you’ll see how the values defined in web.config can be used to associate a custom application with AAD. Topics covered include setting up a token storage cache, hooking AAD code into the OWIN startup process, and creating an ASP.NET MVC controller to display a login page to end users and handle directing them to the application upon successful authentication. All of the code that follows is from the Expense Manager application that’s available on the OfficeDev GitHub site.

Let’s kick things off by looking at AAD token storage and the role it plays in applications.

AAD Token Storage

The NuGet packages added into the application (see Part 3 of this series) provide the necessary functionality to authenticate a user with AAD. Once authenticated, AAD will return an ID token that can be stored by the application and used as secured resources such as Web API, Office 365 APIs, or other resources are accessed. The AAD documentation provides a diagram that sums up the overall authentication workflow well:

Figure 1. The flow as a user logs into AAD, gets an ID token, and then accesses an application and additional resources. This image is from http://msdn.microsoft.com/en-us/library/azure/dn499820.aspx.

While the token received by the application can be stored in memory during development, it’s recommended that a more robust token store be put in place to handle that task for production. You can find several sample applications that integrate with AAD and handle tokens on the Azure Active Directory Github samples site. Some of the samples use an in-memory store while others rely on a database, which is recommended when an app is ready to move to production.

In this part of the article, you’ll see the steps required to get an Entity Framework and SQL Server token store in place. If you don’t already have the Entity Framework NuGet package installed in your project you’ll need to install it.

From a high level, the following tasks will be discussed:

Create a model class named PerWebUserCache that’s used to define properties that are needed to store and retrieve AAD tokens.
Create an Entity Framework DbContext class named EFADALContext that interacts with a SQL Server database.
Create a token cache class named EFADALTokenCache that uses the context class to store and retrieve tokens from a SQL Server database.
Add startup code that uses the previous classes and is responsible for handling authentication as a user requests a secure resource.

To get started, add a new class named PerWebUserCache.cs into the Models folder of an ASP.NET MVC application. This code defines properties that will be used by the token store. Add the following code into the class:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace ExpenseManager.Models
{
   public class PerWebUserCache
   {
       [Key]
       public int EntryId { get; set; }
       public string webUserUniqueId { get; set; }
       public byte[] cacheBits { get; set; }
       public DateTime LastWrite { get; set; }
   }
}

Listing 1. The PerWebUserCache model class defines properties that will be used by the token store.

Now add a class named EFADALContext.cs into the Utils folder. This class will derive from Entity Framework’s DbContext class and handle mapping the PerWebUserCache object to the proper table in SQL Server. Add the following code into the EFADALContext class:

using ExpenseManager.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;
using System.Linq;
using System.Web;

namespace ExpenseManager.Utils
{
   public class EFADALContext : DbContext
   {
       public EFADALContext() : base("EFADALContext")
       {
       }
       public DbSet<PerWebUserCache> PerUserCacheList { get; set; }
       protected override void OnModelCreating(DbModelBuilder modelBuilder)
       {
           modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
       }
   }
}

Listing 2. The EFADALContext class handles table creation and queries with SQL Server.

Now that the model and database context classes have been created, a token cache class named EFADALTokenCache can be created that uses the context to store and retrieve AAD tokens. This is one of many classes provided by the AAD samples site on GitHub that was mentioned earlier.

Add a class named EFADALTokenCache.cs into the Utils folder that has the following code in it:

using Microsoft.IdentityModel.Clients.ActiveDirectory;
using ExpenseManager.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace ExpenseManager.Utils
{
   public class EFADALTokenCache : TokenCache
   {
       private EFADALContext _Context = new EFADALContext();
       string User;
       PerWebUserCache Cache;

       // constructor
       public EFADALTokenCache(string user)
       {
           // associate the cache to the current user of the web app
           User = user;
           this.AfterAccess = AfterAccessNotification;
           this.BeforeAccess = BeforeAccessNotification;
           this.BeforeWrite = BeforeWriteNotification;

           // look up the entry in the DB
           Cache = _Context.PerUserCacheList.FirstOrDefault(c => 
                    c.webUserUniqueId == User);
           // place the entry in memory
           this.Deserialize((Cache == null) ? null : Cache.cacheBits);
       }

       // clean up the DB
       public override void Clear()
       {
           base.Clear();
           foreach (var cacheEntry in _Context.PerUserCacheList)
               _Context.PerUserCacheList.Remove(cacheEntry);
           _Context.SaveChanges();
       }

       // Notification raised before ADAL accesses the cache.
       // This is your chance to update the in-memory copy from the DB
       // if the in-memory version is stale.
       void BeforeAccessNotification(TokenCacheNotificationArgs args)
       {
           if (Cache == null)
           {
               // first time access
               Cache = _Context.PerUserCacheList.FirstOrDefault(c => 
                        c.webUserUniqueId == User);
           }
           else
           {   // retrieve last write from the DB
               var status = from e in _Context.PerUserCacheList
                            where (e.webUserUniqueId == User)
                            select new
                            {
                                LastWrite = e.LastWrite
                            };
               // if the in-memory copy is older than the persistent copy
               if (status.First().LastWrite > Cache.LastWrite)

               // read from from storage, update in-memory copy
               {
                   Cache = _Context.PerUserCacheList.FirstOrDefault(
                            c => c.webUserUniqueId == User);
               }
           }
           this.Deserialize((Cache == null) ? null : Cache.cacheBits);
       }

       // Notification raised after ADAL accessed the cache.
       // If the HasStateChanged flag is set, ADAL changed the content of the cache
       void AfterAccessNotification(TokenCacheNotificationArgs args)
       {
           // if state changed
           if (this.HasStateChanged)
           {
               Cache = new PerWebUserCache
               {
                   webUserUniqueId = User,
                   cacheBits = this.Serialize(),
                   LastWrite = DateTime.Now
               };

               // update the DB and the lastwrite                
               _Context.Entry(Cache).State = Cache.EntryId == 0 ? 
                  EntityState.Added : EntityState.Modified;
               _Context.SaveChanges();
               this.HasStateChanged = false;
           }
       }
       void BeforeWriteNotification(TokenCacheNotificationArgs args)
       {
           // if you want to ensure that no concurrent write takes place, 
           // use this notification to place a lock on the entry
       }
   }
}

Listing 3. The EFADALTokenCache class is responsible for storing and retrieving AAD tokens used by the application.

This code handles managing an in-memory store that is backed by a database. As changes are made or the local cache becomes stale, calls are made to update the proper fields in the database. With the EFADALTokenCache class in place along with the model and database context classes, it’s now time to add AAD code in the application to allow users to be authenticated. This code will tie AAD into OWIN so that any secured application resources trigger the authentication process.

Read the full article at http://www.itunity.com/article/integrating-angularjs-azure-active-directory-services-office-365sharepoint-part-4-771.

Adding Azure Active Directory Configuration Code and Assemblies into an AngularJS/ASP.NET MVC Application

Mon, 26 Jan 2015 00:20:28 GMT

In a previous post I discussed the process for registering an application with Azure Active Directory (AAD) so that users can be authenticated. AAD supports a wide range of features that can be used to perform authentication, authorization, and claims-based security tasks.

Once an application has been registered with AAD you’ll need to add configuration code into the application’s web.config file, add related NuGet packages, and add custom C# code into the application in order to take advantage of AAD authentication functionality. In Part 3 of an article series I’m writing for http://itunity.com I discuss these tasks and walk-through the complete process. Here’s an excerpt from the article.

Integrating AngularJS with Azure Active Directory and Office 365/SharePoint, Part 3 – Adding AAD Configuration and Assemblies into an Application

You can choose from many different techniques to authenticate users in an application. You can build a custom solution using a file or database, you can use Active Directory, you can deploy a third-party solution, or you can use a cloud-based service, to name just a few. Every situation is unique so the authentication choice made really depends upon the requirements of the application. In cases where an application can be used from a variety of locations and devices, a cloud-based authentication solution can work quite well.

Part 2 of this article series showed the process for registering an application with the Azure Active Directory (AAD) cloud service. Once you’ve registered an application, you can configure the Client ID and key created in AAD in your custom application. You can then add AAD assemblies to provide authentication functionality.

In this article, I’ll discuss how to get the necessary configuration and assemblies in place to tie the AngularJS Expense Manager application discussed in Part 1 to AAD so that users can authenticate into Office 365 services. In Part 4 I will provide a walk-through of the code that needs to be added into the application to enable user authentication with AAD.

Let’s start by discussing the assemblies that need to be installed into the application and how you can simplify that process by using NuGet.

Installing the required assemblies using NuGet

Once an application has been registered with AAD (refer to the Part 2 article for step-by-step details on doing that) you can begin the process of integrating AAD authentication into the application. To get started, you’ll need to add several assemblies into your project including some AAD-specific assemblies as well as OWIN assemblies. The AAD assemblies will be used to communicate with AAD while the OWIN assemblies will be used to hook AAD authentication into the custom application. Here’s a step-by-step walkthrough of getting the assemblies into a project.

Create a new ASP.NET MVC application in Visual Studio (the sample application is named “ExpenseManager”). Now select Tools → NuGet Package Manager → Package Manager Console from the Visual Studio menu.

Once the Package Manager Console is open, run the following commands in it to get the necessary assemblies into place as shown in Figure 1.

Figure 1. Installing NuGet packages using the Package Manager Console.

Type each of the following commands into the command-prompt area and press Enter to install the specific Nuget package:

Install-Package -Id Microsoft.Owin.Host.SystemWeb
Install-Package -Id Microsoft.Owin.Security.Cookies
Install-Package -Id Microsoft.Owin.Security.OpenIdConnect
Install-Package -Id Microsoft.IdentityModel.Clients.ActiveDirectory

After installing the Nuget packages, open the References node in the Solution Explorer and note that several new assemblies have been added that are related to AAD and authentication. Figures 2 and 3 show a few of the assemblies that are added:

Figure 2. Assemblies related to AAD.

Figure 3. OWIN assemblies.

Now that the essential assemblies are installed, it’s time to add the application’s AAD Client ID and Key into the application. These values are needed to “hook” the application to AAD.

Note that all of the code that follows is from the Expense Manager application that’s available on the OfficeDev GitHub site.

Read the full article at http://www.itunity.com/article/integrating-aad-services-angularjs-office-365-part-3-770.

Creating Custom AngularJS Directives Part 6 - Using Controllers

Mon, 29 Dec 2014 22:06:33 GMT

Creating Custom AngularJS Directives Series

Up to this point in the AngularJS directives series you’ve learned about many key aspects of directives but haven’t seen anything about how controllers fit into the picture. Although controllers are typically associated with routes and views, they can also be embedded in AngularJS directives. In fact, there are many scenarios where custom directives can take advantage of controllers to minimize code and simplify maintenance. While using controllers in directives is certainly optional, if you’d prefer to build directives using similar techniques that you use now to build views then you’ll find controllers are essential in many cases. By using controllers, directives start to feel like “child views”.

In this post I’ll walk through the process of integrating controllers into directives and show the role that they can play. Let’s start off by looking at a directive that doesn’t use a controller and talk through the pros and cons of the approach.

A Directive without a Controller

Directives provide several different ways to render HTML, collect data, and perform additional tasks. In situations where a directive is performing a lot of DOM manipulation, using the link function makes sense. Here’s a simple example of the link function in action:

(function() {

  var app = angular.module('directivesModule');

  app.directive('domDirective', function () {
      return {
          restrict: 'A',
          link: function ($scope, element, attrs) {
              element.on('click', function () {
                  element.html('You clicked me!');
              });
              element.on('mouseenter', function () {
                  element.css('background-color', 'yellow');
              });
              element.on('mouseleave', function () {
                  element.css('background-color', 'white');
              });
          }
      };
  });

}());

Adding a controller into this directive doesn’t make much sense given that the goal is to handle events and manipulate the DOM. Although it would be possible to accomplish the same task using a view in the directive (along with built-in AngularJS directives such as ng-click) and controller there’s really no reason to add a controller into this directive if DOM manipulation is the overall end goal.

In cases where you’re manipulating the DOM, integrating data into the generated HTML, handling events, and more, adding a controller can minimize the amount of code you write and simplify the overall process in some cases. To make this more clear, let’s look at an example of a directive then renders a list of items and provides a button that can be used to add items to the list. Here’s the simple output that the directive renders:

There are several different ways to handle rendering this type of UI. A typical DOM-centric approach would use the link function to handle everything as shown in the following directive. Keep in mind there are many ways to do this and the overall goal is to demonstrate DOM-centric code (as simply as possible):

(function() {

  var app = angular.module('directivesModule');

  app.directive('isolateScopeWithoutController', function () {
      
      var link = function (scope, element, attrs) {
              
              //Create a copy of the original data that’s passed in              
              var items = angular.copy(scope.datasource);
              
              function init() {
                  var html = '<button id="addItem">Add Item</button><div></div>';
                  element.html(html);
                  
                  element.on('click', function(event) {
                      if (event.srcElement.id === 'addItem') {
                          addItem();
                          event.preventDefault();
                      }
                  });
              }
              
              function addItem() {
                  //Call external function passed in with &
                  scope.add();

                  //Add new customer to the local collection
                  items.push({
                      name: 'New Directive Customer'
                  });
                  
                  render();
              }
              
              function render() {
                  var html = '<ul>';
                  for (var i=0,len=items.length;i<len;i++) {
                      html += '<li>' + items[i].name + '</li>'
                  }
                  html += '</ul>';                  
                  
                  element.find('div').html(html);
              }
              
              init();
              render();        
      };
      
      
      return {
          restrict: 'EA',
          scope: {
              datasource: '=',
              add: '&',
          },
          link: link
      };
  });

}());

Although this code gets the job done, it’s more along the lines of a jQuery plugin and takes what I refer to as a “control-oriented” approach where tag names and/or IDs are prevalent in the code. All of the DOM manipulation is handled manually which is fine and maybe even preferred in some cases (for performance reasons for example), but it’s definitely not the normal way we build Angular apps. The DOM manipulation code is mixed in with the scope which starts to get messy especially as the directive grows in size.

As the button is clicked the addItem() function is called which handles calling an isolate scope property (add) and invoking the render() function which renders a <ul> tag and multiple <li> tags. There’s nothing wrong with this approach per se, but I’m not a fan of having a lot of separate strings embedded in the JavaScript since they can cause a maintenance nightmare over time. While a small directive like this is fairly easy to maintain, the code can get more challenging as the directive has additional features added.

There’s also a more subtle issue at play in this code. When scope.add() is called the invoked parent scope function will need to use $scope.$apply() to update any properties in the parent scope since the call to add is being made from vanilla JavaScript rather than from within the context of AngularJS (something that’s outside the scope of this post, but definitely important to consider). Finally, the directive doesn’t resemble the “child view” concept that was mentioned at the beginning of the post – it’s just a bunch of code. How can a controller help out in this example? Let’s take a look.

Adding a Controller and View into a Directive

The directive shown in the previous section gets the job done but what if you could write it much like you’d write a standard AngularJS view and use a more data-oriented approach as opposed to the control-oriented approach that the DOM takes? By using a controller and view in a directive the development process feel more along the lines of what you do everyday in AngularJS applications.

Here’s an example of converting the directive shown earlier into a cleaner version (in my opinion anyway) that relies on a controller and a simple view:

(function() {

  var app = angular.module('directivesModule');

  app.directive('isolateScopeWithController', function () {
      
    var controller = ['$scope', function ($scope) {

          function init() {
              $scope.items = angular.copy($scope.datasource);
          }

          init();

          $scope.addItem = function () {
              $scope.add();

              //Add new customer to directive scope
              $scope.items.push({
                  name: 'New Directive Controller Item'
              });
          };
      }],
        
      template = '<button ng-click="addItem()">Add Item</button><ul>' +
                 '<li ng-repeat="item in items">{{ ::item.name }}</li></ul>';
      
      return {
          restrict: 'EA', //Default in 1.3+
          scope: {
              datasource: '=',
              add: '&',
          },
          controller: controller,
          template: template
      };
  });

}());

The directive could be used in one of the following ways:

Attribute: <div isolate-scope-with-controller datasource="customers" add="addCustomer()"></div>

Element: <isolate-scope-with-controller datasource="customers" add="addCustomer()">
         </isolate-scope-with-controller>

Looking through the directive code you can see that it’s very similar to the approach you’d take for writing a normal view with a controller. I’d argue that it looks like you’re writing a “child view” as mentioned at the beginning of this post since the code is focused more on the data and less on the “controls” in the view. The view takes advantage of AngularJS directives to handle various control rendering tasks which eliminates all of the DOM code that had to be written before.

The view is defined using the template property and the controller is defined using the controller property. Keep in mind that the view can be loaded from a file using the templateUrl property or from the $templateCache as well – it doesn’t have to be embedded directly in the directive. The templateUrl or $templateCache options are really useful when a view has a lot of HTML in it that you don’t want embedded in the directive.

As mentioned, the code in the view leverages existing AngularJS directives such as ng-click and ng-repeat and also uses {{ … }} data binding expressions. This eliminates the DOM code shown earlier in the DOM-centric/control-oriented directive. The controller has the $scope injected as you’d expect and uses it to define an items property which is consumed by ng-repeat in the view to generate <li> tags. As the button in the view is clicked the addItem() function on the $scope is invoked which calls the add isolate scope property and adds a new item object into the local collection (since angular.copy() is used items added into the local collection won’t show up in the parent scope). Because addItem() is called using ng-click, the parent scope call that is made ($scope.add()) won’t need to worry about using $scope.$apply() as mentioned in the earlier section.

In situations where a directive is being written with raw performance in mind then the DOM-centric approach shown earlier may be preferred I realize since you’d be purposely taking over control of the HTML that’s generated and avoiding the use of Angular directives. If you ever attend one of my conference sessions or training classes you’ll often hear me say, “Use the right tool for the right job”. I’ve never believed that “one size fits all” and know that each situation and application is unique.

This thought process definitely applies to directives since there are many different ways to write them. In many situations I’m happy with how AngularJS performs and know about the pitfalls to avoid so I prefer the controller/view type of directive whenever possible. It makes maintenance much easier down the road since you can leverage existing Angular directives in the directive’s view and modify the view using a controller and scope. If, however, I was trying to maximize performance and eliminate the use of directives such as ng-repeat then going the DOM-centric route with the link function might be a better choice. Again, choose the right tool for the right job.

Using controllerAs in a Directive

If you’re a fan of the controllerAs syntax you may be wondering if the same style can be used inside of directives. The answer is “yes”! When you define a Directive Definition Object (DDO) in a directive you can add a controllerAs property. Starting with Angular 1.3 you’ll also need to add a bindToController property as well to ensure that properties are bound to the controller rather than to the scope. Here’s an example of the previous directive that has been converted to use the controllerAs syntax:

(function() {

  var app = angular.module('directivesModule');

  app.directive('isolateScopeWithControllerAs', function () {
      
      var controller = function () {
          
              var vm = this;
          
              function init() {
                  vm.items = angular.copy(vm.datasource);
              }
              
              init();
              
              vm.addItem = function () {
                  vm.add();

                  //Add new customer to directive scope
                  vm.items.push({
                      name: 'New Directive Controller Item'
                  });
              };
      };    
      
      var template = '<button ng-click="vm.addItem()">Add Item</button>' +
                     '<ul><li ng-repeat="item in vm.items">{{ ::item.name }}</li></ul>';
      
      return {
          restrict: 'EA', //Default for 1.3+
          scope: {
              datasource: '=',
              add: '&',
          },
          controller: controller,
          controllerAs: 'vm',
          bindToController: true, //required in 1.3+ with controllerAs
          template: template
      };
  });

}());

Notice that a controller alias of vm (short for “ViewModel”) has been assigned to the controllerAs property and that the alias is used in the controller code and in the view. The bindToController property is set to true to ensure that properties are bound to the controller instead of the scope. While this code is very similar to the initial controller example shown earlier, it allows you to use “dot” syntax in the view (vm.customers for example) which is a recommended approach.

Conclusion

Controllers can be used to cleanup directives in many scenarios. Although using a controller isn’t always necessary, you’ll find that by levering the “child view” concept in directives your code can be kept more maintainable and easier to work with. The next post in the series moves on to discuss additional features that can be used in directives such as $asyncValidators.

Getting Started with ES6 – Transpiling ES6 to ES5 with Traceur and Babel

Tue, 16 Dec 2014 07:59:00 GMT

In the first post in this series I introduced key features in ECMAScript 6 (ES6), discussed tools that can be used today to transpile code to ES5 so that it can work in today’s browsers, and listed several resources that will help get you started. Before jumping into the first official ES6 feature (that’s coming in the next post) I wanted to write a step-by-step walkthrough that covers how to get the Traceur and Babel transpilers working with Gulp (a JavaScript task runner). I’m also going to sneak in a little TypeScript as well since it’s another option. By getting these tools in place you can start writing ES6 code, convert/transpile it to ES5, and then use the generated code in older browsers. Going that route lets you take advantage of the future of JavaScript right now without having to wait around until all of the browsers fully support ES6.

Two options are available in this post. If you want a step-by-step look at getting Gulp setup to work with ES6 transpilers then I’d recommend reading the entire post. If you want to start working with ES6 but aren’t interested in getting the ES6 transpilers setup then skip to the Configuring ES6 Samples section below where you can download a project that has everything in place and discusses how to get started using it.

Let’s jump into a step-by-step walk-through of setting up Gulp, Traceur and Babel.

Installing Node.js and Gulp

Transpilers such as Traceur and Babel can be run directly from the command line which makes it fairly trivial to convert ES6 code to ES5. However, after performing a command-line task a few times you’ll begin to wonder if there’s a way to automate the process. The good news is that JavaScript task runner tools such as Grunt or Gulp can automate just about any JavaScript task you can think of. You can use them to perform a variety of tasks such as restarting a Node.js server if it dies, “live” reloading a webpage as HTML or CSS code changes, concatenating and minifying JavaScript files, finding unused CSS classes in a file, plus much more. You can also use these tools to automatically convert ES6 code to ES5 as you save a code file.

While both tools get the job done well, I personally prefer Gulp so the steps that follow will show how to use it. I’m going to assume that you haven’t done much with Node.js or Gulp so if you’re already a Node.js or Gulp expert you can gloss over some of the steps that follow. Let’s get started by getting Node.js and Gulp installed.

Step 1: Install Node.js

Gulp requires Node.js so the first thing you’ll need to do (if you haven’t done it already) is install Node.js on your machine. Navigate to http://nodejs.org in the browser and click the Install button to download the Node.js installation file.

Once the file downloads, double-click it and follow the instructions to install Node.js on your machine.

Step 2: Use npm to Install Gulp

When you install Node.js you also get access to another tool called npm that can be used to install Node.js modules. Gulp is one of many modules that are available (see https://www.npmjs.com for a complete list). Follow these steps to use npm to install Gulp.

Note for Mac Users: You may need to add “sudo” in front of the install commands below if they fail. If you don’t want to use sudo (for security reasons) check out this post.

Create the following folder structure on your desktop (or anywhere else you’d like to create it):
Open a command-prompt and navigate to the es6Demos folder.
Type the following at the command-prompt:

npm init
Running this command will start a command-line wizard that’s used to generate a file named package.json.
Accept all of the defaults for now (or you can supply values for the author name, description, etc. if you’d like) by pressing Return/Enter for each question asked.
At the end of the wizard you’ll be asked to type “yes” to complete the process. The package.json file that’s generated is used to store all of the modules that your app may use (such as Gulp and others).
Type the following at the command-prompt to install the Gulp module globally on your machine:

npm install gulp -g
Next type the following at the command-prompt to add Gulp to your package.json file’s dev dependencies. This will cause the package.json file to be updated and add a node_modules folder into the es6Demos folder that contains Gulp-related code/files.

npm install gulp --save-dev
To try out Gulp, type the following at the command-prompt and press Enter/Return. You should see an error saying that no gulpfile was found.

gulp

Step 3: Install Traceur, Babel, and Additional Gulp Modules

Now that Node.js and Gulp are available it’s time to load the Traceur and Babel Gulp modules so that we can use them to transpile ES6 code to ES5. In a “real” app you’d choose one of these rather than using both at the same time, but you’ll configure both here so that you can see the type of ES5 code that they generate.

I’m going to show the entire process for getting Gulp modules in place. At the end of the steps I’ll show how simple it is to get everything going using npm and the package.json file though so that in the future this process is super quick.

Run the following commands at the command-prompt (it should still be at the es6Demos folder) to install Gulp modules (and some others) that can be used to transpile ES6 to ES5. As mentioned above, I’m showing how to install each individual Gulp module so that you understand the process. It’s a one-time setup process and can be re-used once in place as you’ll see at the end of this section.

npm install gulp-babel --save-dev
npm install babel-preset-es2015 –save-dev
npm install gulp-traceur --save-dev
npm install gulp-typescript --save-dev
npm install gulp-plumber --save-dev
npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev

Although the gulp-plumber, gulp-concat, gulp-typescript, and gulp-uglify modules are optional, they’re quite useful in a real-life workflow. The gulp-plumber module can help fix errors that occur in the Gulp pipeline while gulp-concat and gulp-uglify can be used to concatenate and minify JavaScript files to get them ready for production. I won’t focus on them in this post but they’re good to have in place and use once you’re ready to move files into production.
Open the package.json file that’s in the es6Demos folder in a text editor and notice that a devDependencies property has been added along with details about each module that you installed earlier including their version number. The file should look something like the following (note that I removed a few properties to keep it short and removed the versions since they change frequently):
```
{
  "name": "ES6Demos",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^x.x.x",
    "gulp-babel": "^x.x.x",
    "babel-preset-es2015": "^x.x.x",
    "gulp-concat": "^x.x.x",
    "gulp-plumber": "^x.x.x",
    "gulp-traceur": "^x.x.x",
    "gulp-typescript": "^x.x.x",
    "gulp-uglify": "^x.x.x","
  }
}
```
Open the node_modules folder and notice the subfolders that are there now.
In the root folder add a file named .babelrc that has the following content: { “presets”: [“es2015”] }

Step 4: Creating a gulpfile

Now that all of the necessary modules are in place it’s time to create a Gulp task runner file name gulpfile.js. This file is responsible for defining tasks that use the Gulp modules installed earlier such as Traceur and Babel.

Create a new file in the es6Demos folder named gulpfile.js.
Add the following code into gulpfile.js to load the Gulp modules installed earlier and define a few paths:
```
var gulp = require('gulp'),
    traceur = require('gulp-traceur'),
    babel = require('gulp-babel'),
    plumber = require('gulp-plumber'),
    es6Path = 'es6/*.js',
    compilePath = 'es6/compiled';
```
Now add the following code under the code in the previous step to create a new Traceur task. This adds the plumber module into the streaming process to handle any errors that occur in the the piping process more gracefully and then invokes the Traceur transpiler. The blockBinding property allows block level definitions to be used in the ES6 code via a new let keyword (more about that feature in a future post).
```
gulp.task('traceur', function () {
    gulp.src([es6Path])
        .pipe(plumber())
        .pipe(traceur({ blockBinding: true }))
        .pipe(gulp.dest(compilePath + '/traceur'));
});
```

Now add code to create a Babel task:

gulp.task('babel', function () {
    gulp.src([es6Path])
        .pipe(plumber())
        .pipe(babel())
        .pipe(gulp.dest(compilePath + '/babel'));
});

The previous tasks will cause ES6 to be transpiled to ES5 (using two different techniques) but they won’t run any time an ES6 file is saved. To automate the process add the following watch task:
```
gulp.task('watch', function() {

    gulp.watch([es6Path], ['traceur', 'babel']);

});
```
Finally, create a default task that runs the traceur, babel, and watch tasks when you first start Gulp:
```
gulp.task('default', ['traceur', 'babel', 'watch']);
```
Save gulpfile.js and run the following command again at the command-prompt:

gulp
The Gulp tasks should now run and the console should display output about the tasks.
Leave the console up and running and continue to the next section.

Transpiling ES6 to ES5

Now that you have Gulp up and running and the Traceur and ES6 tasks in place it’s time to transpile ES6 to ES5.

Add a new file named car.js into the es6 folder.
Add the following code into car.js. I’ll be discussing this code in a future post but in a nutshell, ES6 now supports encapsulating code by using classes.
```
class Car {
    
    constructor(engine) {
        this.engine = engine;
    }

}
```

Open the es6/compiled/traceur folder and open the car.js file. It will have the following ES5 code in it:

"use strict";
var Car = function Car(engine) {
  this.engine = engine;
};
($traceurRuntime.createClass)(Car, {}, {});

The car.js file in es6/compiled/babel has the following ES5 code:

"use strict";

var Car = function Car(engine) {
  this.engine = engine;
};

You’ve now successfully transpiled ES6 code to ES5 using both Traceur and Babel.

Configuring the ES6 Samples

If you decided to skip all of the steps above you can visit http://github.com/danwahlin/es6samples and click the Download ZIP button to get all of the code (or clone the repository if you’re familiar with Git). Once you have the code extracted follow the steps below to get Gulp and the transpilers setup.

Note that if you’re on a Mac you may need to use “sudo” (prefix each of the npm commands with it) if any of the install commands trigger an error.

Install Node.js if it’s not already on your system.
Open a command-prompt and navigate to the project’s root folder that has the package.json file in it.
If you haven’t already installed Gulp run the following command:

npm install gulp -g
Run npm install to get the necessary Node.js/Gulp modules installed.
Run the following command to transpile the JavaScript files from ES6 to ES5 and start the file watcher:

gulp
Open the es6/compiled folder and look at the files that are generated in the two subfolders (traceur and babel).

Conclusion

Transpilers such as Traceur and Babel provide a way to convert ES6 code to ES5 quickly and easily. In this post you’ve seen a step-by-step walk-through of setting up the Gulp task runner to automate the transpilation process and how it can simplify the overall process of converting ES6 code and ES5. Now that the setup work for transpiling files is in place it’s time to jump into some of the different ES6 features that are available. Stay tuned for future posts.

Onsite Developer Training: If your company is interested in onsite training on JavaScript, ES6, AngularJS, Node.js, C# or other technologies please email training@wahlinconsulting.com for details about the classes that we offer.

Registering a Custom AngularJS Application with Azure Active Directory

Sun, 07 Dec 2014 19:42:28 GMT

If you’re working with Azure and need to add authentication and identity management into an application look no further than Azure Active Directory (AAD). AAD provides a robust set of services for single sign-on, authentication, multi-factor authentication, and more. Rather than setting up a custom authentication provider for an app, you can leverage existing functionality provided by AAD.

To associate a custom application with AAD you first need to register it. If you’ve ever registered a custom app with Facebook, Twitter, or another service you’ll find the AAD app registration process to be quite similar. When you register your application, AAD will generate a client ID and password that can be configured in your app and act as a “hook” between the two. Once that’s done the application can direct all authentication actions to AAD and upon successful authentication, AAD can redirect the user back to a page in your custom app. This causes identity and access tokens to be provided to your application by AAD. An identity token has information about a given authenticated user (in addition to other details) while an access token provides temporary access to a secured resource (such as Office 365 services) that is also registered with AAD.

In a previous post I discussed a series of articles that I’m writing about AngularJS, Azure Active Directory, and Office 365/SharePoint for itunity.com. The first article introduced the application and provided an overview of the technologies used while the second article walks through how to register the custom application with AAD. Although I can’t post the entire article, here’s a snippet from it with a link to the complete article below.

Integrating AngularJS with Azure Active Directory and Office 365/SharePoint, Part 2

Part 1 of this article series introduced a stand-alone Expense Manager application built using AngularJS, Azure Active Directory, and the Office 365/SharePoint APIs. The overall scenario discussed throughout the series revolves around integrating data from the cloud into an application that can stand on its own and run gracefully in desktop browsers and mobile/tablet browsers. If you haven't read through Part 1, I encourage you to read it first before going through this article since it provides additional context about the application and the technologies used to build it. If you're new to Microsoft Azure or Office 365 cloud services, I also recommend that you learn more about them at http://azure.microsoft.com and http://products.office.com/business/enterprise-productivity-tools.

One of the essential requirements that enterprise applications (and many non-enterprise applications) have is authentication and identity management. Although you can certainly use on-premise deployments of Active Directory (AD) or another custom security provider, Azure Active Directory (AAD) integrates directly with Office 365/SharePoint APIs (in addition to several others) and lets you harness the power of the cloud. In this article, you'll see how a custom application such as the Expense Manager application discussed in Part 1 can be registered with Azure Active Directory so that users can be authenticated. In the next article in the series, we'll explore the AAD code that's required and see how it plugs into an ASP.NET MVC application.

So what is Azure Active Directory and how do you get started using it? In a nutshell, it provides "Identity and Access Management for the Cloud" (see http://azure.microsoft.com/services/active-directory for additional details). By using the Azure management website, you can setup and integrate AAD authentication and identity management into custom applications and also use it to secure Office 365/SharePoint deployments. AAD has many additional features, but the Expense Manager application discussed in this series uses it strictly for authentication purposes so that Office 365/SharePoint lists can be accessed and modified.

You can manage your Azure account and AAD functionality by going to https://manage.windowsazure.com. A new Azure management portal (https://portal.azure.com) is also available but it's currently in beta (as I’m writing this article) and doesn't offer AAD features yet. It's important to point out that going through the Azure management site isn't the only solution for registering a custom application with AAD so that users can authenticate. When working with Office 365/SharePoint APIs, you can simplify the overall process by using the Microsoft Office 365 API Tools, which is another topic that will be covered in this article.

Let's get started by taking a look at how to register a custom application with AAD using the Azure management site. Once you see how to manually register an application with AAD, you'll then learn about the Microsoft Office 365 API Tools and see how they can be installed and used to register an application from within Visual Studio.

Registering an application with Azure Active Directory

In order to add AAD authentication functionality into the Expense Manager application (or any custom application), it has to be registered with AAD. The standard way to register an application is to login to your Azure account (https://manage.windowsazure.com) and click the Active Directory item on the left.

Figure 1: Login to Azure and click Active Directory to begin the process of registering an application with AAD

Once you click on Active Directory in the Azure management site, the next screen lets you select the directory that the application should be associated with. By default you'll see a Default Directory entry (Figure 2) unless you've created a custom directory.

Figure 2: Select the directory that your application should be associated with

Read the full article at http://www.itunity.com/article/integrating-angularjs-o365-aad-registering-custom-app-720.

Building Applications with AngularJS, Azure Active Directory, and Office 365/SharePoint

Sun, 07 Dec 2014 18:52:28 GMT

One of my favorite features of Single Page Applications (SPAs) is the ability to integrate data from nearly any backend technology and have it display on a variety devices (desktop browser, mobile, tablet, and more). Whether you’re calling a service like Firebase or Azure Mobile Services or hitting a custom REST API, the data that’s returned can be integrated into your SPA regardless of the language, technology, or operating system being used on the server.

Some of the backend technologies I’ve been spending a lot of time with from a business perspective lately include Azure and the the Office 365/SharePoint API. Azure provides a wealth of cloud services such as websites, virtual machines, a cloud-based Active Directory, mobile services, and much more while Office 365/SharePoint provides access to mail, contacts, calendars, files, SharePoint services, and other data services.

We’ve been building AngularJS applications that take advantage of some of the new features provided by these cloud services and writing a series of articles about them for itunity.com site. The first article is titled Integrating AngularJS with Azure Active Directory and Office 365/SharePoint, Part 1 and was writing by myself and my good friend Spike Xavier. I’m not able to post the entire article here, but here’s a snippet from it. The full article can be found on the itunity.com site.

Integrating AngularJS with Azure Active Directory and Office 365/SharePoint, Part 1

Data is everywhere in today’s business environment and employees expect to be able to access it regardless of where it lives. They don’t care if it’s stored in a database, retrieved from a service, found in a SharePoint list or library, or stored somewhere else up in the cloud. Regardless of where the data lives, they expect to be able to get to it on any operating system, with any browser, and using any device.

With the popularity of SharePoint across many organizations an enormous amount of business data is added into lists and libraries every day. If employees have access to SharePoint directly on their chosen device then a variety of techniques can be used to expose the data to them ranging from SharePoint pages, Web Parts, App parts, Pages, and more. However, if they won’t always be using SharePoint directly to access the data how can you get it to them? Fortunately, this isn’t a new problem and has been possible for many years using SharePoint Web Services or RESTful services. How does that process change though if you’re using Microsoft Azure, Office 365 and SharePoint?

In this article series, we’ll walk you through the process of creating an external application that can interact with Microsoft Azure Active Directory, Office 365 and SharePoint. The overall goal of the series is to show developers that may be new to SharePoint how they can leverage existing HTML and JavaScript development skills to integrate with Azure and pull Office 365/SharePoint data into custom Web applications.

This first article will discuss whether or not a SharePoint-centric application or external application should be considered. It’ll also introduce an Expense Manager application and explain what it offers. Future articles in this series will discuss the technologies used by the Expense Manager application and dive into how AngularJS can be used to build a single-page application (SPA) that can be used by employees on any device throughout an organization.

Let’s get started by discussing whether an application should be embedded directly into SharePoint or if it should be external.

Stand-alone or SharePoint hosted? That is the question!

While it’s true that SharePoint uses SQL Server under the covers, SharePoint itself is NOT a relational database. It’s ultimately up to the developer to understand how SharePoint works in order to maximize the use of the APIs and interact with the various objects and data.

Why is this important? It’s important because SharePoint is a robust platform that can be used to build a variety of applications that run inside or outside of SharePoint. With support for RESTful services, developers can leverage their existing Web development skills to enhance, expand and extend what SharePoint can do. A fundamental understanding of the building blocks of SharePoint will save a lot of time and frustration and allow developers to do what they do best while allowing SharePoint to do what it does best.

Read the full article at http://www.itunity.com/article/integrating-angularjs-aad-office-365sharepoint-part-1-622.

Getting Started with ES6 – The Next Version of JavaScript

Sat, 06 Dec 2014 19:58:00 GMT

JavaScript has come a long ways in its 20 years of existence. It’s grown from a language used to define a few variables and functions to one that can be used to build robust applications on the client-side and server-side. Although it’s popularity continues to grow in large part due to its dynamic nature and ability to run anywhere, JavaScript as a language is still missing many key features that could help increase developer productivity and provide a more maintainable code base. Fortunately, ECMAScript 6 (ES6) adds many new features that will take the language to the next level.

This is the first post in a series I’ll be writing that will walk through key features in ES6 and explain how they can be used. I’ll also introduce tools and other languages along the way that can be used to work with ES6 in different browsers as well as on the server-side with frameworks like Node.js. The goal of this first post is to discuss the viability of using ES6 today and point out resources that can help you get started using it. Let’s kick things off by talking about a few of the key features in ES6.

Key Features in ES6

So what are some of the key features in ES6? Here’s a list of some of my favorites:

Arrow functions – A short-hand version of an anonymous function.
Block-level scope – ES6 now supports scoping variables to blocks (if, for, while, etc.) using the let keyword.
Classes – ES6 classes provide a way to encapsulate and extend code.
Constants – You can now define constants in ES6 code using the const keyword.
Default parameters – Ever wished that a function parameter could be assigned a default value? You can do that now in ES6.
Destructuring – A succinct and flexible way to assign values from arrays or objects into variables.
Generators – Specialized functions that create iterators using function* and the yield keyword.
Map – Dictionary type object that can be used to store key/value pairs.
Modules – Provides a modular way of organizing and loading code.
Promises – Used with async operations.
Rest parameters – Replaces the need for using arguments to access functions arguments. Allows you to get to an array representing “the rest of the parameters”.
Set – A collection object that can be used to store a list of data values.
Template Strings – Clean way to build up string values.

Looking through the features a few things may jump out at you. First off, there’s support for classes and class extension. If you’ve been working with a language such as Java, C#, C++, Python or the many others that support classes this will probably be something you welcome with open arms. By having support for classes we can eliminate some of the patterns we’ve used in the past (Revealing Module Pattern, etc.) in many cases since encapsulation of code will now be natively supported.

Several other key features listed include block level scope, different types of collection objects called Map and Set, built-in support for Promises (deferred/async objects), a concise function syntax referred to as arrow functions, default parameter value assignment, plus much more. I’ll be discussing these features in greater detail in future posts.

Should I Use ES6 Now or Wait?

One of the most frequent questions I get about ES6 in my training and consulting work is, “Should I use ES6 now or wait until it has better support?”. There isn’t a single “correct” answer because it depends upon a range of factors such as:

Where will your application will be deployed (client-side or server-side)?
What browsers have to be supported?
What’s the developer environment look like?
What tools do developers have access to use (in an enterprise environment for example)
Are you updating an existing app or starting a new one?

The good news is that tools exist that enable you to use ES6 today in a variety of situations. However, you’ll need to factor in your unique environment and application requirements before deciding if you start using ES6 now or wait until later. I’m a big fan of the quote, “Use the right tool for the right job”.

To start to answer the question of whether or not you should use ES6 now or if you should wait, you need to look at where you’ll be using it. Will it be on the server with a framework like Node.js? If that’s the case then you can focus on what the V8 JavaScript engine supports. Will the code be running directly in a browser or embedded in a mobile app container like Cordova? In that case using ES6 may be more of a challenge and has to be thought through more carefully if you plan to use native browser support.

If you’re only updating a portion of an existing ES5/ES3 application then ES6 may not be needed given that most of the code base is already ES5/ES3. You’ll have to make that call. On the flipside, if you’re starting a project from scratch (a “greenfield” project) then I think ES6 should be seriously considered since you’ll be setting up well for the future.

The good news is that native ES6 support in browsers such as Chrome, Firefox, and Opera is getting better and better every week. Although Internet Explorer is playing a bit of catch up, they’re planning ES6 support as well (see https://status.modern.ie for more details). While modern browsers support various ES6 features, ES6 as a whole isn’t quite ready for “prime time” if you need all of the key language features available at once. Here’s a snapshot in time from http://kangax.github.io/compat-table/es6 that shows the status of some of the ES6 features across browsers. The information in the image will certainly change so check the website for a more up-to-date view.

You’ll note that Internet Explorer 6-9 aren’t listed in the matrix (by default anyway) since they won’t be getting ES6 features - ever. If you still have to support one or more of those browsers your first thought is probably, “I can’t use ES6!”. Although that appears to be the case initially, it’s not true. I’ll introduce some tools that will let you convert ES6 code back to ES5 so that it works in older browsers. Of course there are always limitations that come up depending on application requirements, but at least you’ll know the alternatives out there which should allow you to make a more educated decision about moving to ES6 or sticking with ES5/ES3 for the time being.

If you’re one of the fortunate developers that can target a modern browser that already has some ES6 support in it, you’ll still find that some of the features aren’t supported. The story is improving every week but if you can’t count on specific features being there then it’s hard to justify moving to ES6 today.

As for me personally, I’m moving to ES6 now and even building some applications today that rely on ES6. Does that mean I’m ignoring all of the older browsers out there? Nope – not at all. There are techniques that can be leveraged to use ES6 today while still generating ES5 code that runs fine in older browsers. Let’s take a look at some of the tools that are available.

Transpilers – Converting Code from One Syntax to Another

Earlier I mentioned that’s it’s possible to use ES6 today while still targeting older browsers. This is made possible through special converters referred to as “transpilers” (sometimes called “transcoders”) that can convert ES6 code to ES5. By integrating a transpiler into your development workflow you can write ES6 code that automatically gets converted to ES5 code using JavaScript task managers like Grunt or Gulp. Two of the most popular transpilers are:

Traceur – Open source transpiler started by Google that maps ES6 to ES5.
Babel – Open source transpiler that maps ES6 directly to ES5. It outputs the cleanest code in my opinion.

In addition to transpilers, you can also use languages such as TypeScript to write ES6 code that gets converted to ES5 (or even ES3). TypeScript is a superset of JavaScript that lets you write “typed” ES6 code (define numbers, strings, booleans, etc.) while still allowing it to work in any browser out there by “compiling” it to ES5/ES3. I’ll be showing TypeScript code as well in this series when it applies to a specific ES6 feature.

In the next post in this series I’ll discuss how to get started using transpilers since I think they’re essential to understand and integrate into your workflow if you want to start using ES6 today.

Browser-based ES6 Playgrounds

In addition to the transpilers mentioned above, there are also sites and browser extensions available that let you play around with ES6 directly in the browser:

ES6 Repl – Chrome extension that allows you to work with ES6 code directly in the Chrome developer tools.
ES6 Fiddle – Website that allows you to type in ES6 code and have it converted to ES5.
Traceur Transcoding Demo – ES6 playground based on Traceur.
Babel REPL – ES6 playground based on Babel.
TypeScript Playground – TypeScript playground that converts code to ES5.

ES6 Resources

In the posts that follow I’ll be discussing ES6 features and showing how they can be used. In the meantime I think it’s important to know about the different resources that are out there. Here’s a list of some sites that I refer to often:

ES6 Language Specification – The spec that defines all of the planned features in ES6. An unofficial HTML version can be found here.
ES6 Features in One Page – Short synopsis of key ES6 features.
ES6 Features – Quick look at ES6 features by Luke Hoban.
ES.next Showcase – List of projects that are using or planning to use ES6.
ECMAScript 6 Support in Mozilla – Details about ES6 support in Firefox.
ES6 Browser Support Matrix – Matrix showing ES6 support across browsers and more.
Understanding ECMAScript 6 – Online book by Nicholas C. Zakas.
ES6 Samples – A repository of samples I’ve put together that will continue to be enhanced and extended over time.

Conclusion

Although ES6 still has a ways to go as far as browser support, I’m excited about the different features it offers and the future of JavaScript development. Whether or not you plan on using it right away, it’s important to understand what it offers so that you’re prepared and ready for the (near) future. While this post discussed some of the factors to consider before making the jump to ES6 and covered a few features, tools, and resources, there’s a lot more to discuss.

Stay tuned for the next post covering ES6 tools and how they can be used to write ES6 code today while still supporting a variety of browsers.

My Thoughts on AngularJS 1.3 and 2.0

Fri, 31 Oct 2014 16:05:00 GMT

I've received a ton of questions on Twitter and through email about the AngularJS 2.0 announcement. Questions such as "What's going on with AngularJS?" and "Should I start a new AngularJS 1.3 project when AngularJS 2.0 looks quite different?". Many people are excited about the modern approach the Angular team is taking with 2.0, a few seem to be predicting doom and gloom, and a few more are worried about what they should do. As a result of all the questions I decided to put together a quick post since 140 characters on Twitter isn’t really enough.

Stay on 1.3 or Move to Another Framework?

While every situation is different and maintenance certainly has to be evaluated carefully with any software project, I personally like what I've seen so far (2.0 is still very early though and may certainly change) and plan to build SPAs in the near term using Angular 1.3. Why? Because it just came out, it gets the job done very well, I don’t want to jump to another framework at this point (who's to say they won't be making the move to ES6 as well in the near future to stay relevant?), I have confidence in the AngularJS team, and Angular 1.3 makes me more productive. I'll definitely be keeping a close eye on Angular 2.0 though over the next year or so as it develops.

Jumping to ES6

Yes, AngularJS 2.0 appears to be a big jump from 1.3 - a HUGE jump some might say! But, I think it's necessary to be ready for a future that includes technologies like ECMASCript 6, Web Components, and more. Some of the features currently in 1.3 that will go away in 2.0 disappear "naturally" as a result of ES6 functionality such as modules and classes. That's a good thing in my opinion. New features announced for 2.0 provide a cleaner, more modern way of building Web applications such as moving directives to Web Components (another good thing IMO but will likely cause some app migration work). I'd recommend reading the post from the AngularJS team and taking time to watch some of the videos from ng-europe (start with this one and then watch this one). I'm excited about what they're planning even if it means extra work may possibly be required down the road to migrate from 1.3 to 2.0 (we don't know how much yet since 2.0 is in the early stages). Syntax changes that ultimately improve the way I write future applications don’t bother me although I acknowledge it can cause extra work and has to be planned for appropriately.

Things to Consider

Every company will have to consider if they stick with AngularJS 1.3 for awhile or if they jump ship and move to something else. It's not like an app has to move to 2.0 once it finally comes out. But, if part or all of the app has to be ported to a new version at some point then that's something to carefully think over. I've been in the position of maintaining a large number of apps and realize that the decision to stay on 1.3 or go in a different direction is a hard one to make. I can sympathize with companies and developers who are in that position.

I don't know if the migration process will be easy or hard - time will tell. I don't currently like any of the other options any better than Angular 1.3 though (that's a very personal preference ...many other viable and capable solutions certainly exist) which is why I'm OK with using it over the next year. When 2.0 is finally released I'll have to evaluate if I (and my company’s clients) stay on 1.3 or take the time to migrate the app. I won't pretend to know what's best for your company as every company has unique requirements and it’s something

you have to talk over with your team. There’s no easy answer there and I totally get that. It really boils down to whether or not you're OK with using AngularJS 1.3 for awhile, if you want to learn an entirely different framework (which may possibly shift due to ES6 and other technologies being released), or if you want to write something custom. I'm fine with what Angular 1.3 offers and like the fact that at least I know what to expect (or some of what to expect) when 2.0 is released down the road.

In hindsight (everyone loves to play Monday morning quarterback) I wish a more jQuery-ish approach would've been announced with a 1.x and 2.x branch. That would put to rest many of the version and migration fears that people have. Who knows - maybe the AngularJS team will end up doing something like that given that over 1600 apps inside of Google rely on Angular.

Change is Guaranteed

My good friend Shawn Wildermuth sums all of this up nicely in his latest post titled, It is Too Soon to Panic on AngularJS 2.0. The last paragraph in the post states the following (he has a lot of other good points so please read the whole post):

"I don’t know what you should do. I don’t. I won’t pretend to. Keep an open mind and keep your ears open. See where it’s going and under the current and future risks in pinning yourself to the library. You’ll have to hook your wagon to some horse (AngularJS means to Google, ReactJS to Facebook, etc.) But ultimately as I’ve been talking about for years, be prepared for change and look forward to learning what is coming around the corner."

If you work in the Web world you have to expect, be prepared for, and plan on change. Some of the other frameworks out there will likely be changing as well (maybe big changes, maybe small changes) due to the new technologies coming out. If they don’t change they’ll be considered “old” in the near future as ES6 makes its way onto the scene. The challenge is deciding on how you’ll deal with change and the approach to take moving forward. As Shawn points out, no one (including myself) has all the answers. I always go with my gut feeling whenever possible. It’s quite possible that in a year or so I may do a pivot to another technology. I’ve had to do that many times over my career. At this point I’m happy with what 1.3 has to offer though.

Some will agree with what I say and some will disagree (quite loudly in some cases). That’s part of the fun of being a Web developer.

Cancelling Route Navigation in AngularJS

Sun, 19 Oct 2014 17:08:00 GMT

This post has been updated to cover AngularJS 1.3+.

Routing provides a nice way to associate views with controllers in AngularJS using a minimal amount of code. While a user is normally able to navigate directly to a specific route, there may be times when a user triggers a route change before they’ve finalized an important action such as saving data. In this type of situation you may want to cancel the route navigation and ask the user if they’d like to finish what they were doing so that their data isn’t lost. In another situation the user may try to navigate to a view that requires some type of login or other special handling. If the user hasn’t logged in yet the app can automatically redirect them to a login screen (keep in mind that for security the server always has to double-check things since JavaScript can easily be changed).

When route navigation occurs in an AngularJS application a few key events are raised. One is named $locationChangeStart and the other is $routeChangeStart. Starting with AngularJS 1.3+ this is the order that events fire (see this commit by Tobias Bosch for more details):

$locationChangeStart - - $routeChangeStart - - $locationChangeSuccess - - $routeChangeSuccess

Both events allow route navigation to be cancelled starting with AngularJS 1.3+ by calling preventDefault() on the event object. Let’s take a look at the $locationChangeStart event first and see how it can be used to cancel route navigation when needed.

The $locationChangeStart Event

If you dig into the AngularJS core script you’ll find the following code that shows how the $locationChangeStart event is raised as the $browser object’s onUrlChange() function is invoked:

$browser.onUrlChange(function(newUrl, newState) {
    $rootScope.$evalAsync(function() {
        var oldUrl = $location.absUrl();
        var oldState = $location.$$state;

        $location.$$parse(newUrl);
        $location.$$state = newState;
        if ($rootScope.$broadcast('$locationChangeStart', newUrl, oldUrl,
            newState, oldState).defaultPrevented) {
            $location.$$parse(oldUrl);
            $location.$$state = oldState;
            setBrowserUrlWithFallback(oldUrl, false, oldState);
        } else {
            initializing = false;
            afterLocationChange(oldUrl, oldState);
        }
    });
    if (!$rootScope.$$phase) $rootScope.$digest();
});

The key part of the code is the call to $broadcast. This call broadcasts the $locationChangeStart event to all child scopes so that they can be notified before a location change is made. To handle the $locationChangeStart event you can use the $scope.$on() function (in a controller for example) or you can use $rootScope.$on() (in a factory or service for example). For this example I’ve added a call to $on() into a function that is called immediately after the controller is invoked to watch for location changes:

function init() {
    
    //initialize data here..    

    //Make sure they're warned if they made a change but didn't save it
    //Call to $on returns a "deregistration" function that can be called to
    //remove the listener (see routeChange() for an example of using it)
    onRouteChangeOff = $scope.$on('$locationChangeStart', routeChange);
}

function routeChange(event, newUrl) {
   ...
}

This code listens for the $locationChangeStart event and calls routeChange() when it occurs. The value returned from calling $on is a “deregistration” function that can be called to detach from the event. In this case the deregistration function is named onRouteChangeOff (it’s accessible throughout the controller in this example). You’ll see how the onRouteChangeOff function is used in just a moment.

Cancelling Route Navigation with $locationChangeStart

The routeChange() callback triggered by the $locationChangeStart event displays a modal dialog similar to the following to prompt the user:

Here’s the code for routeChange():

function routeChange(event, newUrl, oldUrl) {
    //Navigate to newUrl if the form isn't dirty
    if (!$scope.editForm || !$scope.editForm.$dirty) return;

    var modalOptions = {
        closeButtonText: 'Cancel',
        actionButtonText: 'Ignore Changes',
        headerText: 'Unsaved Changes',
        bodyText: 'You have unsaved changes. Leave the page?'
    };

    modalService.showModal({}, modalOptions).then(function (result) {
        if (result === 'ok') {
            onRouteChangeOff(); //Stop listening for location changes
            $location.path($location.url(newUrl).hash()); //Go to page they're interested in
        }
    });

    //prevent navigation by default since we'll handle it
    //once the user selects a dialog option
    event.preventDefault();
    return;
}

Looking at the parameters of routeChange() you can see that it accepts an event object and the new route that the user is trying to navigate to. The event object is used to prevent navigation since we need to prompt the user before leaving the current view. In this example we’re checking if the form is dirty (changes have been made) and if the user hasn’t saved the changes yet. In cases where the form is dirty the user can be notified and given a change to stay on the current view.

As the code in routeChange() executes a modal dialog is shown by calling modalService.showModal() (see my previous post for more information about the custom modalService that acts as a wrapper around Angular UI Bootstrap’s $modal service). From there the route navigation is cancelled at the end of the function (event.preventDefault()) since the user needs to choose if they want to stay on the view and finish their edits or leave the view and navigate to a different location.

If the user selects “Ignore Changes” then their changes will be discarded and the application will navigate to the route they intended to go to originally. This is done by first detaching from the $locationChangeStart event by calling onRouteChangeOff() (recall that this is the function returned from the call to $on()) so that we don’t get stuck in a never ending cycle where the dialog continues to display when they click the “Ignore Changes” button. A call is then made to $location.path($location.url(newUrl).hash()) to handle navigating to the target view. If the user cancels the operation they’ll stay on the current view.

The $routeChangeStart Event

The $locationChangeStart event isn’t the only game in town with AngularJS. Within angular-route.js you’ll find the following function that raises a $routeChangeStart event as a route is about to be changed:

function prepareRoute($locationEvent) {
    var lastRoute = $route.current;

    preparedRoute = parseRoute();
    preparedRouteIsUpdateOnly = preparedRoute && lastRoute && preparedRoute.$$route === lastRoute.$$route
        && angular.equals(preparedRoute.pathParams, lastRoute.pathParams)
        && !preparedRoute.reloadOnSearch && !forceReload;

    if (!preparedRouteIsUpdateOnly && (lastRoute || preparedRoute)) {
        if ($rootScope.$broadcast('$routeChangeStart', preparedRoute, lastRoute).defaultPrevented) {
            if ($locationEvent) {
                $locationEvent.preventDefault();
            }
        }
    }
}

Looking through the code you’ll see that a call is made to $rootScope.$broadcast to raise the $routeChangeStart event.

How does this event fit in with $locationChangeStart since they sound quite similar? When $locationChangeStart fires you get access to the new URL the user is trying to go to as well as the old URL as strings. When $routeChangeStart fires you can get access to the raw route definition defined using $routeProvider (more on this in a moment). This can be useful if you want to cancel a route based upon data provided in the route definition.

For example, let’s say that before a user navigates to certain routes they need to be redirected to a login page if one of our AngularJS factories determines that they haven’t logged in yet. Keep in mind that there’s no such thing as client-side security in this scenario and the redirect could always be hacked (quite easily) using browser developer tools. As a result your server-side code should always double-check security for secured pages/views, data, and more. But, a factory can certainly track if a user has logged in or not and then redirect them. If someone hacks the script the server would detect it assuming things are setup correctly. Let’s take a closer look at the $routeChangeStart event and how it can be used to cancel route navigation or redirect a user to another route.

Cancelling Route Navigation with $routeChangeStart

How do you determine whether or not a route has to be handled in a special way as a user tries to navigate to it? Although AngularJS doesn’t have anything built-in, you can always add your own properties onto routes defined in an app. For example, here’s an example of a route that includes a custom property named secure:

$routeProvider.when('/customeredit/:customerId', {
    controller: 'CustomerEditController',
    templateUrl: viewBase + 'customers/customerEdit.html',
    secure: true //This route requires an authenticated user
});

This code specifies that the route requires extra handling and requires the user to be logged in before navigating to it. In addition to marking a route as “secure”, you could also define additional information such as allowed roles or any other special requirements (keeping in mind that the server always has to double-check security and that you would never want to push anything super sensitive security-wise down to the client). As a route is about to change you can listen for the $routeChangeStart event and use the event parameters to get access to the route definition - including any custom properties. Here’s an example of hooking up to the event using $rootScope.$on() in Angular’s run() function:

app.run(['$rootScope', '$location', 'authService',
    function ($rootScope, $location, authService) {
            
        //Client-side security. Server-side framework MUST add it's 
        //own security as well since client-based “security” is easily hacked
        $rootScope.$on('$routeChangeStart', function (event, next, current) {

          //Look at the next parameter value to determine if a redirect is needed        
        });

}]);

When $routeChangeStart fires you get access to the event object, the next route, and the current route. It’s quite similar to $locationChangeStart although the parameter data is very different and provides a lot more information. In the case of $routeChangeStart the next parameter shown in the previous code will give you access to the following:

Notice that by going through the $$route property you can get to the raw route definition data including the custom secure property. While going through any property that starts with $$ is generally frowned upon due to the “private” nature of these properties (they could change in future versions), there isn’t a viable alternative at the present time when you need to get to the route data as the $routeChangeStart event is fired. I hope that will change in the future and that route data will be made more publicly accessible.

If you don’t like that option you could always have a factory or service (such as authService in the code above) store information about special routes and then evaluate the newUrl parameter passed by the $locationChangeStart event to determine if a given route needs to be cancelled or redirected. That would involve some string comparisons but could certainly get the job done.

As $routeChangeStart fires you can use the following code to trigger a redirect to another view if needed. Notice that the secure property shown earlier is checked and used to determine if the path needs to change:

if (next && next.$$route && next.$$route.secure) { 
    if (!authService.user.isAuthenticated) { 
        $rootScope.$evalAsync(function () { 
            $location.path('/login'); 
        }); 
    } 
}

Notice that the call to $location.path() is wrapped in the $evalAsync() method so that the location changes properly and everything stays in sync. If you don’t include that little bit of code things won’t work properly. If you want to completely cancel route navigation you can also call event.preventDefault() as shown earlier with the $locationChangeStart event code. That’s a new feature that’s now available in AngularJS 1.3+.

Conclusion

The key to canceling routes is understanding how to work with the $locationChangeStart and $routeChangeStart events and cancelling or redirecting as needed . You can see this code in action in the Customer Manager application available on Github (specifically customerEditController.js and app.js). Learn more about the application here.

Dan Wahlin

Moving Blog to https://blog.codewithdan.com

New Pluralsight Course: Docker for Web Developers

How I Got Into Docker (and why you should too)

How Docker Can Help Web Developers (and many others)

The New Pluralsight Course: Docker for Web Developers

Docker for Web Developers Video Course Outline

Win Free Pluralsight Access!

Video: Modern Web Development Interview with Channel 9

Modern Web Development with Seth Juarez and Dan Wahlin

Getting Started with ES6 - Using Classes

Getting Started with ES6/ES2015 Classes

Creating an Instance of a Class

Extending a Class

Summary

Video: Building a Single-Page App with Angular, TypeScript, Azure Active Directory and Office 365 APIs

Building a Single-Page App with Angular, TypeScript, Azure AD and Office 365 APIs

The Role of Interfaces in TypeScript

Conclusion

Extending Classes and Interfaces using TypeScript

Extending Classes and Interfaces

Inheritance in JavaScript

Conclusion

Introducing the AngularU Conference

The Web is Changing Rapidly

Top-Notch Experts and Speakers

AngularU Sessions

Have Fun While Learning and Networking

Come Join Us at AngularU in San Francisco!

Creating a TypeScript Workflow with Gulp

Getting Started Creating a Custom TypeScript Workflow

Creating the Application Folders and Files

Installing Gulp, Gulp Modules and TSD

Creating Gulp Tasks

Compiling TypeScript to JavaScript

Conclusion

Getting Started with TypeScript – Classes, Types and Interfaces

TypeScript Overview

TypeScript lets you write JavaScript the way you really want to.TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

Getting Started with TypeScript

The AngularJS Custom Directives Video Training Course Has Been Released!

Understanding Shared and Isolate Scope

AngularJS Custom Directives Course Overview

Adding Azure Active Directory and OWIN Code into an AngularJS/ASP.NET MVC Application to Handle User Authentication

Adding AAD Configuration and Assemblies into an Application

AAD Token Storage

Adding Azure Active Directory Configuration Code and Assemblies into an AngularJS/ASP.NET MVC Application

Integrating AngularJS with Azure Active Directory and Office 365/SharePoint, Part 3 – Adding AAD Configuration and Assemblies into an Application

Installing the required assemblies using NuGet

Creating Custom AngularJS Directives Part 6 - Using Controllers

Creating Custom AngularJS Directives Series

A Directive without a Controller

Adding a Controller and View into a Directive

Using controllerAs in a Directive

Conclusion

Getting Started with ES6 – Transpiling ES6 to ES5 with Traceur and Babel

Installing Node.js and Gulp

Step 1: Install Node.js

Step 2: Use npm to Install Gulp

Step 3: Install Traceur, Babel, and Additional Gulp Modules

Step 4: Creating a gulpfile

Transpiling ES6 to ES5

Configuring the ES6 Samples

Conclusion

Registering a Custom AngularJS Application with Azure Active Directory

Integrating AngularJS with Azure Active Directory and Office 365/SharePoint, Part 2

Registering an application with Azure Active Directory

Building Applications with AngularJS, Azure Active Directory, and Office 365/SharePoint

Integrating AngularJS with Azure Active Directory and Office 365/SharePoint, Part 1

Stand-alone or SharePoint hosted? That is the question!

Getting Started with ES6 – The Next Version of JavaScript

Key Features in ES6

Should I Use ES6 Now or Wait?

Transpilers – Converting Code from One Syntax to Another

Browser-based ES6 Playgrounds

ES6 Resources

Conclusion

My Thoughts on AngularJS 1.3 and 2.0

Stay on 1.3 or Move to Another Framework?

Jumping to ES6

TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.