Angular2 getting started by Stephen Lautier
-
Upload
andrei-toma -
Category
Software
-
view
106 -
download
0
Transcript of Angular2 getting started by Stephen Lautier
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();