2017_08_Web_Angular_Article.md

AngularJS vs Angular

Angular

AngularJS is the name of the first JS framework developed by Google to create Single Page Application (SPA). It has existed for some years and has recently been replaced by Angular (without the “JS” suffix), the new name of the framework since version 2.

The loss of its suffix is not insignificant, it announces complete rework of the framework as well as a change on languages that can be used to build and develop SPA. From now, Angular highlights the usage of Typescript; a superset of Javascript ES6 developped by Microsoft that compile ES5 & ES6 compatible Javascript code.

In addition to Typescript usage, Angular has chosen to add UI based components to replace controllers, directives and the (in-)famous $scope.

// Angular 1.x Controller
var myApp = angular.module("myModule", []);
myApp.controller("productController", function($scope) {
     var prods = { name: "Prod1", quantity: 1 };
     $scope.products = prods;
});

// Angular Components using TypeScript
import { Component } from '@angular/core';

@Component({
    selector: 'prods-data',
    template: '<h3>{{prods.name}}</h3>'
})

export class ProductComponent {
    prods = {name: 'Prod1', quantity: 1 };
}

Controllers are not the only thing that have changed, services have changed too. They now have only one way of defining them: classes.

We can also note that Dependency Injection is more reachable with the @Injectable decorator.

// Angular
import { Injectable } from '@angular/core';

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService {
  getHeroes(): Hero[] {
    return HEROES;
  }
}

The new RoutingModule class is dedicated to define the routes inside the application.

// Angular
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

In order to generate the route links in the templates, the ng-href attribute has been replaced by [routerLink].

// Angular
template: `
   <h1>{{title}}</h1>
   <nav>
     <a routerLink="/dashboard">Dashboard</a>
     <a routerLink="/heroes">Heroes</a>
   </nav>
   <router-outlet></router-outlet>
 `

Regarding events, Angular introduces a new syntax in camelCase, also used for the few built-in directives.

// AngularJS
<button type=”submit” ng-class=”btn” ng-click=”submit”>Submit</button>

// Angular
<button type=”submit” ngClass=”btn” (click)=”submit()”>Submit</button>

New tools available

Angular uses and promotes new tools that prove to be practical and efficient:

• Typescript : the typed overlay of javascript ES6.
• Sass : an extension of CSS3, adding new rules in our way to integrate a web design. Use of variables, mixins, inheritance selection and various very useful options.
• SystemJS : which allows to load the ES6, AMD, CommonJS and global scripts modules in the browser.
• Webpack : which also allows to load modules but which provides the possibility of packing our application (concatenation of files, file uglify, etc ...).
• RxJS : a library allowing to create asynchronous and event programs using observable sequences.

Getting started and performance

Angular comes with so many changes compared to AngularJS that learning it is almost learning a new framework.

All of its changes make it possible to have a more orderly and more efficient code. Indeed, for similar projects, we can see major performance improvements in Angular. AngularJS had the unfortunate tendency to show signs of weaknesses and slowdowns as the application became more and more complex.

Thanks to Angular, it is almost over, although some of it's base concepts (two way data binding...) are still heavily discussed and questioned.

But performance come with a price, Angular is harder and slower to learn than its predecessor. This is due to its new architecture - use of the Typescript Language and the addition of new tools (Sass, Webpack and RxJS).

However, Angular now has a console called AngularCLI to generate components / modules / services as well as other things, making it easier to handle.

AngularJS or Angular

By comparing AngularJS to Angular, we are entitled to ask two questions.

1) Should I migrate all my AngularJS projects to Angular?

In the case of a simple project, it does not have much interest. In contrast, if it's complex and needs a performances boost, it may be interesting to perform the migration. If you have time to do it, because it will not be an easy and straightforward task.

2) Should I use AngularJS or Angular to start a new project?

For a complex projet, the answser is definitely "Angular".

For a simple project, you should actually ask yourself "Do I need Angular(JS) at all ?". Angular(JS) is known to be a very comprehensive framework but also quite heavy compared to other frameworks.

A quick note about support. AngularJS is still maintained and supported but this will eventually end. Google is known to sometimes end support of their tools or technologies quite suddenly so you never know when it will come.