Wildhacks

Hack Angular Wildly!

Todd Warren, May 17, 2017

Wildhacks

Agenda

• A brief history of programming the web

• Single Page Applications

• What is Angular

• A quick Application

• Lab: Building an Angular App

• If you want to learn more..

1

Wildhacks

In the beginning

2

Browser Server

FilesHTML

Web Server

Scripts

HTML

CSS

Scripts(JavaScript)

HTTP Get, Put

Pages

Wildhacks

Then There was AJAX

3

BrowserServer

FilesHTML

Web Server

Scripts

HTML

CSSScripts(JavaScript)

HTTP Get, Put

Pages

Server

Database

Web Server

Web Service

XMLHTTP

XML Data

Wildhacks

Then Single Page Apps

4

BrowserServer

FilesHTML

Web Server

Scripts

HTML

CSS

Scripts(JavaScript)

HTTP Get, Put

Page

XHRHTTP

Data (JSON)

Server

Database

Web Server

Web Service

Page Fragments

Data

Wildhacks

SPA Application Frameworks

5

View

Model

Co

ntr

olle

r

HTTP Get, Put

Page

XHRHTTP

Data (JSON)

“The Cloud”

Wildhacks

Angular• Open Source

• Produced by Google

• Angular≠AngularJS

• Libraries+Toolset+Typescript

• The most confusing naming and versioning in recent history

• Angular == Angular 2 <= Angular 4

• Stable since the beginning of 2017

6

Wildhacks

Core Concepts

• Extend HTML with App specific Tags and

attributes built with Components

• Build Services the work with components to

manage state and provide data

• Group Components with Modules

• Manage Transitions and State with a Router

7

Wildhacks

Let’s quickly build an applicationsee https://github.com/toddwseattle/nuhacksdemo

8

Wildhacks

What Happened?

• Used command line tool (CLLI) to generate application

• Used NPM to install dependencies

• Created components that bind HTML, Typescript code, and CSS for new HTML tags

• Used templating to 2-way bind to data

• Use the CLI to build and serve app

9

Wildhacks

On to the tutorial

• Clone https://github.com/toddwseattle/wildangular

• See step by step in the github repo

10

Wildhacks

Additional Resources• Angular Website

– http://angular.io

• Tour of Heros tutorial– https://angular.io/docs/ts/latest/tutorial/

• Good Video introduction– https://www.youtube.com/watch?v=htPYk6QxacQ&t=2279s

• Big Github Resource List on Reddit (subreddit is very good)– https://www.reddit.com/r/Angular2/comments/5xrwwi/helpful_ang

ular_2_github_repos_curated_through/

11