Month: March 2017

What’s new in Angular 4?

alcfeoh

Angular 4 was released last week, following the new schedule set by the Angular team that decided to release one new major version every 6 months.

Wait, where is Angular 3?

There won’t be any Angular 3. That’s because the Angular Router package was already at version 3.x, while all other Angular packages were at version 2.x. The Angular team decided to jump to version 4.0 for all those packages so that they are back in sync from a versioning perspective.

Is Angular 4 another full rewrite of the framework?

No, quite the opposite actually. Angular 4 is really an Angular 2++. The versioning strategy changed but the code is not different at all. If you know how to work with Angular 2, then you already know Angular 4.

So what’s new then?

In a nutshell,  Angular is smaller and faster. many improvements have been made under the hood to make sure that your code compiles down to something that is more efficient and less verbose.

In most cases, code generated with the AOT option is 60% smaller than before, which is a huge improvement.

The animations were moved from @angular/core to their own package so that if you don’ t use animations, your app code can get even smaller.

From a code perspective, the only real difference you can experience is the addition of  “else” conditions to ng-if as well as some other syntax improvements summarized in this snippet:

<div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count" [user]="user">
  </user-profile>
  <div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>

Everything else remains unchanged so no painful migration ahead!

Another major update is that Angular 4 works with TypeScript 2.1 and 2.2, which is also an intresting update to get more out of TypeScript as well.

For a full list of what’ s new in Angular 4, don’t hesitate to take a look at the release post on the official blog.

Authentication with Angular

alcfeoh

One of the questions I hear the most often when I teach Angular is: How do I implement authentication? There are a lot of options out there so I’ll stick with the tools Angular provides out of the box, which allow to implement authentication without any external dependency.

First, I’m assuming that you’re familiar with the Component Router. In a nutshell, the router decides which component to display based on the current URL, thus emulating multi-page behavior in Angular (which is a single-page application framework).

It’s easy to guess that the router will be involved in all-things authentication. By default, configuring a route in the router looks like this:

Now if I want to protect the above route, I can use a guard to do that. The route declaration then becomes:

In the above code, AuthGuard is a class that implements the CanActivate interface, which consists of a single canActivate method that returns an Observable. Below is what a basic guard looks like – it has to be an Angular service – note that this one doesn’t do much as it would basically let all requests go through since it always returns true:

In order for that guard to be useful, it would have to use a LoginService that would tell whether the current user is logged in or not. That’s where the implementation becomes specific to your application as that service will depend on how your back-end wants to authenticate the user. The guard code then becomes:

Note that you can also use the guard to redirect the user to a LoginComponent whenever the user has to log in. Here is the full code of such a guard:

You now know the basics of how to implement authentication with Angular. The specifics of what the LoginService would do depends on your back-end, though it is very likely that you will have to make a request to your authentication server and get some kind of token or session object as a result.

How to migrate from Angular 1 to Angular 2?

alcfeoh

With Angular 4 around the corner, now is a great time to migrate to Angular 2. There is no rush though as Angular 4 is just the next iteration of what is now called Angular, the new name for v2, 4, 5,6 and so forth. As a result, per the latest branding guidelines, this article should really be titled How to migrate from Angular JS to Angular?

1) Migrate to the latest version of Angular JS

As of right now, the latest version of Angular JS is 1.6. You should really consider upgrading because Angular JS 1.5+ has introduced features that are similar to what Angular now uses (components being the most important one). The main goal for 1.5 and 1.6 was to make the migration to Angular easier, so that’s the first step to take. The migration guide for all 1.x versions can be found here.

2) Get your 1.x code ready for Angular

First, remove $scope from your code and use the “controller as” syntax instead. Since Angular uses TypeScript classes, getting rid of $scope and using a syntax that is much closer to actual class properties makes perfect sense. Here is an example of a controller + HTML template that use the “controller As” syntax:

Then it would be a good idea to replace your controllers / directives with components, introduced in Angular 1.5. A component is a directive with a HTML template. Here is what a simple Angular 1.x component looks like – A directive with a HTML template:

The final step is to start learning and using TypeScript in your code. Since TypeScript transpiles down to ES5 code, you can already use TypeScript for development purposes and then deploy the resulting Javascript to production.

3) Upgrade incrementally to Angular

Angular has an upgrade adapter that allows you to mix and match Angulaar JS and Angular in the same app:

The next step is to use the upgrade adapter to migrate your code piece by piece. I would suggest to first upgrade your services, then directives / components. The reason for this is that services are not very different in Angular compared to what they were in Angular JS.

Finally, use the Angular component router and bootstrap your app with Angular.

4) Enjoy and relax!

Seems like an easy process? Not quite, right? That’s why I would only consider upgrading apps if a full rewrite is not an option. In most cases, it’s actually easier to build a new Angular project with CLI and create components / services inspired from your old Angular JS code.

It’s a great opportunity to only keep what you need and to learn Angular in the process as well.