Angular Desktop Apps

Requirements

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

Flip Flops: Electron

By Chris Sevilleja

Made with Slides.com

Flip Flops: Electron

  • 1,101

More from Chris Sevilleja