Angular 2.0

It is time to learn it!

What is ng2?
How do I use it?

What is Angular

  • Open source project managed by Google
  • Allows for MVCish 2way data binding using Javascript
  • Very popular framework

Why do we need ng2

  • Aligns itself with the next-generation of javascript known as ECMA2015
  • Provides for easy integration of Typescript, Dart and other psuedo-langauges
  • Improves performance
  • Allows for a more modular structure

What is ECMA2015?

  •  European Computer Manufacturers Association Javascript version 6
  • Basically the standard for Javascript at this point.
  • Browsers are starting to get to full implementation

What is Typescript

  • Open source language for developing Typed Javascript
  • Created and maintained by Microsoft in partnership with Google.
  • A transpiler is used to create regular Javascript.
class Person {
    private name: string;
    private age: number;
    private salary: number;

    constructor(name: string, age: number, salary: number) {
        this.name = name;
        this.age = age;
        this.salary = salary;
    }
    
    toString(): string {
        return `${this.name} (${this.age}) (${this.salary})`; // As of version 1.4
    }
}

ECMA Modules

  • Added in the v6 spec
  • Allows you to import sections of JS code
  • Typically managed using a library called a module loader
  • IIFE no longer required

Module Loaders

  • ECMA2015 Did not include Module Loaders
  • Provided for in JavaScript Loader Standard
  • Allows for two types of module systems
    • CommonJS (Node, CommonJS)
      • Synchronous
      • Compact
      • Typically used with node
    • AMD (RequireJS)
      • Asynchronous
      • Slightly more verbose
      • Typically used in the browser

CommonJS Sample

// In circle.js
const PI = Math.PI;

exports.area = (r) => PI * r * r;

exports.circumference = (r) => 2 * PI * r;

// In some file
const circle = require('./circle.js');
console.log( `The area of a circle of radius 4 is ${circle.area(4)}`);

AMD Sample

//Calling define with a dependency array and a factory function
define(['dep1', 'dep2'], function (dep1, dep2) {

    //Define the module value by returning a value.
    return function () {};
});
requirejs(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

But what if we want both?

  • SystemJS is what we call a universal module loader
  • Library that is recomended by ng2

ECMA2015 Example

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

Now Lets Explore ng2!

First of all great docs!

So what has changed?

Modules replace well... modules

  • No more modules, controllers, or directives
  • Only Components and Services
  • Annotations are used on Components

Example

import {Component} from '@angular/core';
import { ApplicationConstants } from '../../constants/ApplicationConstants';
import { Hero } from './hero'
import { HeroDetailComponent } from './detail/hero-detail.component';
import { HeroService } from './hero.service';
import { OnInit } from '@angular/core';
import {MdIconRegistry} from "@angular2-material/icon/icon-registry";
import {MD_CARD_DIRECTIVES} from "@angular2-material/card/card";
import {MD_BUTTON_DIRECTIVES} from "@angular2-material/button/button";
import {MD_ICON_DIRECTIVES} from "@angular2-material/icon/icon";
import {MD_LIST_DIRECTIVES} from "@angular2-material/list/list";
import {MD_INPUT_DIRECTIVES} from "@angular2-material/input/input";
import {MdToolbar} from "@angular2-material/toolbar/toolbar";
@Component({
    selector: 'hero',
    templateUrl:'hero.component.html',
    styleUrls: [ApplicationConstants.BASE_TEMPLATE_PATH + 'components/hero/hero.component.css'],
    directives: [HeroDetailComponent, MD_CARD_DIRECTIVES, MD_BUTTON_DIRECTIVES, MD_LIST_DIRECTIVES, MD_ICON_DIRECTIVES, MdToolbar, MD_INPUT_DIRECTIVES],
    providers: [HeroService],
    viewProviders: [MdIconRegistry]
})
export class HeroComponent implements OnInit{
    heroes: Hero[];
    title = 'Tour of Heroes';
    selectedHero: Hero; 
    onSelect(hero: Hero) { this.selectedHero = hero; };
    constructor(private heroService: HeroService){}
    getHeros(){
        this.heroService.getHeroes().then(heroes => this.heroes = heroes);
    };
    ngOnInit() {
        this.getHeros();
    }
}

Java Devs be like

But templating has changed!

Attributes, variables, and no scope, oh my!

  • If you want to pass data to component use: [name]
  • If you want to get the component from its tag use: #var
  • If you want to mixin functionality use things like: *ngFor
  • If you want to send an event to the parent use: (var)

Examples

  • ng-class="name" is now [ngClass]="name"
    • or [class.name]="true"
  • ng-repeat="item in items" is now *ngFor="let item of items"
  • ng-click="function()" is now (click)="function"

Then there is [(ngModel)]

No more $digest

  • Now it uses a concept of Zones
  • No more $timeout or $scope.$apply()

Zones

Great for profiling!

https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

Pipes in ng2

  • There are now more filters in ng2, instead there are pipes.
  • Most of the existing filters from ng1 are included except for filter
  • Changed thanks to performance concerns.

Demo Time!

https://github.com/jrgleason/ng2-demo-app

Angular 2.0 RC Overview

By Jackie Gleason

Made with Slides.com

Angular 2.0 RC Overview

This is an overview of the Angular2 framework using Typescript. It includes a sample written using the Express framework.

  • 753

More from Jackie Gleason