An introductory tutorial for the web framework Angular with companion demo github repository; and a step by step github tutorial repository. Presented at Northwestern WildHacks May 17, 2017

1. Wildhacks
Hack Angular Wildly!
Todd Warren, May 17, 2017

2. 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

3. Wildhacks
In the beginning
2
Browser Server
Files
HTML
Web Server
Scripts
HTML
CSS
Scripts
(JavaScript)
HTTP Get, Put
Pages

4. Wildhacks
Then There was AJAX
3
Browser
Server
Files
HTML
Web Server
Scripts
HTML
CSS
Scripts
(JavaScript)
HTTP Get, Put
Pages
Server
Database
Web Server
Web Service
XMLHTTP
XML Data

5. Wildhacks
Then Single Page Apps
4
Browser
Server
Files
HTML
Web Server
Scripts
HTML
CSS
Scripts
(JavaScript)
HTTP Get, Put
Page
XHRHTTP
Data (JSON)
Server
Database
Web Server
Web Service
Page
Fragments
Data

6. Wildhacks
SPA Application Frameworks
5
View
Model
Controller
HTTP Get, Put
Page
XHRHTTP
Data (JSON)
“The Cloud”

7. 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

8. 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

9. Wildhacks
Let’s quickly build an application
see https://github.com/toddwseattle/nuhacksdemo
8

10. 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

11. Wildhacks
On to the tutorial
• Clone
https://github.com/toddwseattle/wildangular
• See step by step in the github repo
10

12. 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