Angular Desktop Apps
Requirements
- nodejs.org
- node v6+
- npm v3+
Editors
- Visual Studio Code
- Atom
- WebStorm
- Sublime Text
Why Angular?
- Take advantage of ES2015 / ES6
- Component Based
- Framework for all types of apps
- Web/ Mobile / Desktop
- Speed improvements
Why TypeScript
- Transpiler (ES6 -> ES5)
- Type checking
- Great tooling
- Easy to read code
- Editor support
- Familiarity / Superset of JS
ES6 Features
- Default parameters
- Template Literals
- Multi-line strings
- Enhanced object literals
- Arrow functions
- Classes
- Modules
Biggest Angular Obstacle
Environment Setup
Goals
- Understand the setup
- Create our first Angular app
- Build with Angular!
Overview
- Use angular/quickstarter
- Dissect the setup
- Build with Angular!
Clone the Starter
git clone git@github.com:angular/quickstart-
|- src/app/
-
|----- app.component.ts
-
|----- app.module.ts
-
|- main.ts
-
|- index.html
-
|- src/systemjs.config.js
-
|- src/tsconfig.json
-
|- package.json
Angular Dependencies
- Core JS Shim
- Zone.js
- RxJS
- SystemJS (or webpack)
Angular Packages
- @angular/core
- @angular/common
- @angular/compiler
- @angular/platform-browser
- @angular/platform-browser-dynamic
Angular Extras
- @angular/http
- @angular/forms
- @angular/router
TypeScript Fun
Components
Component Structure
- @angular/http
- @angular/forms
- @angular/router
Working with Templates
AngularJS Directives
- ngBlur
- ngClick
- ngHref
- ngSrc
- ngCloak
- ngHide
- ngFocus
Angular Directives
[ ] = property bindings
( ) = event bindings
* = structural directives
Creating a New Component
Define new component
Register with app.module.ts
Import and use!
Passing Data to Components
Smart Component
Dummy
Dummy
Recap
- Learned about Angular architecture
- Setup an Angular app
- Created an Angular component
- Created child components
- Passed data around components
Angular CLI
npm install -g @angular/cli
ng new my-app
ng start