History

Angular 1

v0.9.0 – 21 Oct 2010

v1.0.0 – 14 Jun 2012

Angular 2

2.0.0-alpha.13 – 14 Mar 2015

2.0.0 – 15 Sep 2016

Popularity

React – 61k ★

Angular 1 – 55k ★

Vue.js – 45k ★

Angular 2 – 21k ★

Ember – 18k ★

Riot – 11k ★

Dependencies

Angular 1

"dependencies": {}

Angular 2

"dependencies": {
  "core-js": "^2.4.1",
  "reflect-metadata": "^0.1.3",
  "rxjs": "^5.0.1",
  "zone.js": "^0.7.2" }

core-js

Modular standard library for JavaScript. Includes polyfills for ECMAScript 5, ECMAScript 6: promises, symbols, collections, iterators, typed arrays, ECMAScript 7+ proposals, setImmediate, etc. Some additional features such as dictionaries or extended partial application. You can require only needed features or use it without global namespace pollution.

reflect-metadata

• Decorators add the ability to augment a class and its members as the class is defined, through a declarative syntax.
• Traceur attaches annotations to a static property on the class.
• Languages like C# (.NET), and Java support attributes or annotations that add metadata to types, along with a reflective API for reading metadata.

RxJS

reactivex.io

zone.js

A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript VMs.

Typescript

Typescript

C# in browser.

This page is not yet available in JavaScript. We recommend reading it in TypeScript.

Libraries in ts.

Compilation stack.

Routes - Angular 1 - js

angular.module('phoneApp').config(['$routeProvider',
  function config($routeProvider) {
    $routeProvider.when('/phones', {
      url: '/phones'
      template: '',
      controller: 'PhonesController',
      data: { title: 'Phones' }
    }).
    otherwise('/404');
  }]
);

Routes - Angular 1 - coffee

Routes =
  app:
    url: '/phones'
    template: ''
    controller: 'PhonesController'
    data: { title: 'Phones' }

class AppConfig
  @$inject: ['$routeProvider']
  constructor: ($routeProvider) ->
    $routeProvider.when('/phones', Routes.app)

angular.module('phoneApp', []).config(AppConfig)

Routes - Angular 2 - ts

const appRoutes: Routes = [
  {
    path: 'phones',
    component: PhoneList },
    data: { title: 'Phones' }
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes)]
});

Routes - Angular 2 - coffee

Routes = [
  {
    path: 'phones'
    component: PhoneList
    data: { title: 'Phones' }
  }
]

class AppModule
  @annotations: [
    new Module({imports: [ RouterModule.forRoot(Routes) ]})
  ]

Controller - Angular 1 - js

var phoneApp = angular.module('phoneApp', []);

phoneApp.controller('PhonesController', ['$scope', function ($scope) {
  $scope.phones = [{
    'name': 'Nexus S',
    'snippet': 'Fast just got faster with Nexus S.'
  }];
}]);

Controller - Angular 1 - coffee

class PhonesController
  @$inject: ['$scope']
  constructor: (@scope) ->
    @scope.phones = [{
      name: 'Nexus S',
      snippet: 'Fast just got faster with Nexus S.'
    }]

phoneApp = angular.module 'phoneApp', []
phoneApp.controller 'PhonesController', PhonesController

Component - Angular 2 - ts

import { Component } from '@angular/core';
@Component({
  selector: 'phone-list',
  template: `
{{title}}
`
})
export class PhoneList {
  title = 'Phones'
  phones = [{
      name: 'Nexus S',
      snippet: 'Fast just got faster with Nexus S.'
  }]
}

Component - Angular 2 - coffee

class PhoneList
  @annotations: [
    new ng.core.Component
      selector: 'phone-list'
      template: '
{{title}}
'
  ]

  constructor: ->
    @title = 'Phones'
    @phones = [{
      name: 'Nexus S'
      snippet: 'Fast just got faster with Nexus S.'
    }]

Service - Angular 1 - js

var phoneApp = angular.module('phoneApp', []);
phoneApp.factory('PhoneService', ['$http', function ($http) {
  return {
    'getById': function (id) {
      $http.get('/phones' + id);
    }
  }
}])

Service - Angular 1 - coffee

class PhoneService
  @$inject: ['$http']

  constructor: (@http) -> {}

  getById: (id) -> @http.get("/phones/")

phoneApp = angular.module 'phoneApp', []
phoneApp.factory 'PhoneService', PhoneService

Service - Angular 2 - ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class PhoneService {
  constructor(private http: Http) { }

  getById(id: number): {
    return this.http.get("/phones/" + id)
  }
}

Service - Angular 2 - coffee

class PhoneService
  @parameters: [ ng.http.Http ]

  constructor: (@http) -> {}

  getById: (id) -> @http.get("/phones/")

Filter - Angular 1 - js

var phoneApp = angular.module('phoneApp', []);
phoneApp.filter('reverse', function() {
  return function(input, uppercase) {
    input = input || '';
    var out = '';
    for (var i = 0; i < input.length; i++) {
      out = input.charAt(i) + out;
    }

    // conditional based on optional argument
    if (uppercase) {
      out = out.toUpperCase();
    }
    return out;
  }
});

Filter - Angular 1 - coffee

class ReverseFilter
  constructor: () -> return @applyFilter
  applyFilter: (input = '', uppercase = false) ->
    out = ''
    for i in [0..(input.length-1)]
      out = input.charAt(i) + out
    out = out.toUpperCase() if uppercase
    out

phoneApp = angular.module 'phoneApp', []
phoneApp.filter 'reverse', ReverseFilter

Pipe - Angular 2 - ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'reverse'})
export class ReversePipe implements PipeTransform {
  transform(value = '', uppercase = false):  {
    let out = '';
    for (var i = 0; i < input.length; i++) {
      out = input.charAt(i) + out;
    }

    // conditional based on optional argument
    if (uppercase) {
      out = out.toUpperCase();
    }
    return out;
  }
}

Pipe - Angular 2 - coffee

class ReversePipe
  @annotations: [ new ng.core.Pipe({ name: 'reverse' }) ]
  transform: (input = '', uppercase = false) ->
    out = ''
    for i in [0..(input.length-1)]
      out = input.charAt(i) + out
    out = out.toUpperCase() if uppercase
    out

Future

Angular 1 – 14 Jun 2012

Angular 2 – 15 Sep 2016

Angular ? – March 2017