Angular 2.0 introduction by Stephen Lautier at Betsson Front End Guild

1. Angular 2
GETTING STARTED

2. About me
 Stephen Lautier
 ~9 years experience – mainly web + game development
 Full Stack Developer – C#, TypeScript and Web <3
 Microsoft Stack – ASP.NET, WPF
 SPA Frameworks – Durandal, Angular and Aurelia
 Unity3D
 Currently working in Central Teams “Team Atomic” – Sportsbook as a
Senior Frontend / Team Lead

3. Agenda
 Overview of Angular 2
 Features
 Demos – Build/Explain

4. Before we start…
 Touching other Technologies
 NodeJS/NPM (tooling)
 Gulp – Task Runner
 JSPM – Package Manage frontend (ala Bower)
 SystemJS – Module Loader (ES6 Modules)
 TypeScript 1.7.x (latest)

5. Overview
 Project Status: beta (2.0.0-beta.1)
 Rewritten from the ground up
 Fast
 Mobile
 TypeScript in mind
 Also JS (ES2015/ES6) and Dart
 Modern Web ES6 modules, Annotations (es7)
 Doesn’t work only in browers
 Electron – Windows, Mac and Linux
 NativeScript – IOS and Android
 Server-side rendering

6. Features
SOME OF ANGULAR 2 FEATURES

7. Input (Attributes)

8. Output (Events/Callbacks)

9. Attribute Directives
 3 Types
 Components
 Directives in angular1
 UI Component (with template) e.g. Tabs
 Structural Directives
 Change DOM by adding/removing elements e.g. NgFor, NgIf
 Attribute Directives
 “attached behaviors” (without UI)
 Changes the appearance or behavior of element e.g. NgStyle

10. Pipes
 Transforms values

11. Demo Time

12. Actually before…
 Machine Setup
 Node v4 or higher
 NPM install --save-dev tsd gulp jspm
 Using Visual Studio Code as my editor

13. Creating a hello world
 Setup Project which is more “development ready”
 Gulp, JSPM, SystemJS, TypeScript
 Bootsrapping Angular 2
 Simple Binding and Two-way bindings
 Using an inbuild directive

14. Simple navigation app
 Routing
 Pages
 Services
 Dependency Injection

15. Criticism
 Getting started with a bit more fluff is not so easy
 Binding Syntax
 Too many different symbols!
 Inconsistent
 {{title}} - interpolation
 [hidden]=“title” – binding property one-way
 [(ngModel)]=“title” – two-way
 *ngFor – turns the li and content into a template

16. Resources
 Demos - https://github.com/stephenlautier/experimental
 Cheat Sheet - https://angular.io/docs/ts/latest/guide/cheatsheet.html
 Batarangle - https://github.com/rangle/batarangle/
 Angular-cli - https://github.com/angular/angular-cli
 TypeScript Compiler Options -
https://github.com/Microsoft/TypeScript/wiki/Compiler-Options

17. QA

18. End.
import { dispose } from “angular2/core”
dispose();