Angular 2GETTING STARTED

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

Agenda

Overview of Angular 2 Features Demos – Build/Explain

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)

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

FeaturesSOME OF ANGULAR 2 FEATURES

Input (Attributes)

Output (Events/Callbacks)

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

Pipes

Transforms values

Demo Time

Actually before…

Machine Setup Node v4 or higher NPM install --save-dev tsd gulp jspm

Using Visual Studio Code as my editor

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

Simple navigation app

Routing Pages Services Dependency Injection

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

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

QA

End.

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