Angular v4+

Gerard Sans (@gerardsans)

Chris Sevilleja (@chrisoncode)

Angular In Flip Flops

Requirements

Editors

  • Visual Studio Code
  • Atom
  • WebStorm
  • Sublime Text

Features

  • Latest Web Standards
  • Simple
  • Lighting fast
  • Works everywhere

Web, Mobile and Desktop

Platforms

DESKTOP

MOBILE

Ionic 2

NativeScript

Electron

MacOS 10.9

Windows 7

Linux

iOS 7

Android 4.2

[Windows 10]

iOS 7

Android 4.1

Windows 8.1

Semantic Versioning

X . Y . Z

   MAJOR       MINOR        PATCH  

Semantic Versioning

  • v4 March 2017
  • v5 Sept/Oct 2017
  • v6 March 2018
  • v7 Sept/Oct 2018

Community

Open Source Contributors

angularexpo.com

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

Big Angular Tasks

  • Transpile ES6 -> ES5 (Babel/TypeScript)
  • Load Modules (SystemJS/webpack)

Goals

  • Understand the setup
  • Create our first Angular app
  • Build with Angular!

Overview

  • Use angular/quickstart
  • 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

A Base Component

Working with Styles

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

Passing Data Out of Components

Recap

  • Learned about Angular architecture
  • Learned TypeScript
  • Setup an Angular app
  • Created an Angular components
  • Passed data around components

Angular CLI

npm install -g @angular/cli
ng new my-app
ng start

Adding Bootstrap

npm install --save bootstrap

Flip Flops: Starter

By Chris Sevilleja

Made with Slides.com

Flip Flops: Starter

  • 1,276

More from Chris Sevilleja