Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Hack angular wildly

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Hack angular wildly

  1. 1. Wildhacks Hack Angular Wildly! Todd Warren, May 17, 2017
  2. 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. 3. Wildhacks In the beginning 2 Browser Server Files HTML Web Server Scripts HTML CSS Scripts (JavaScript) HTTP Get, Put Pages
  4. 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. 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. 6. Wildhacks SPA Application Frameworks 5 View Model Controller HTTP Get, Put Page XHRHTTP Data (JSON) “The Cloud”
  7. 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. 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. 9. Wildhacks Let’s quickly build an application see https://github.com/toddwseattle/nuhacksdemo 8
  10. 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. 11. Wildhacks On to the tutorial • Clone https://github.com/toddwseattle/wildangular • See step by step in the github repo 10
  12. 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

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

Views

Total views

194

On Slideshare

0

From embeds

0

Number of embeds

16

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×