Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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 Applicati...
Wildhacks
In the beginning
2
Browser Server
Files
HTML
Web Server
Scripts
HTML
CSS
Scripts
(JavaScript)
HTTP Get, Put
Pages
Wildhacks
Then There was AJAX
3
Browser
Server
Files
HTML
Web Server
Scripts
HTML
CSS
Scripts
(JavaScript)
HTTP Get, Put
P...
Wildhacks
Then Single Page Apps
4
Browser
Server
Files
HTML
Web Server
Scripts
HTML
CSS
Scripts
(JavaScript)
HTTP Get, Put...
Wildhacks
SPA Application Frameworks
5
View
Model
Controller
HTTP Get, Put
Page
XHRHTTP
Data (JSON)
“The Cloud”
Wildhacks
Angular
• Open Source
• Produced by Google
• Angular≠AngularJS
• Libraries+Toolset+Typescript
• The most confusi...
Wildhacks
Core Concepts
• Extend HTML with App specific Tags and
attributes built with Components
• Build Services the wor...
Wildhacks
Let’s quickly build an application
see https://github.com/toddwseattle/nuhacksdemo
8
Wildhacks
What Happened?
• Used command line tool (CLLI) to generate
application
• Used NPM to install dependencies
• Crea...
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...
Ha terminado este documento.
Descárguela y léala sin conexión.
Próximo SlideShare
What to Upload to SlideShare
Siguiente
Próximo SlideShare
What to Upload to SlideShare
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

Compartir

Hack angular wildly

Descargar para leer sin conexión

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

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo
  • Sé el primero en recomendar esto

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

Vistas

Total de vistas

193

En Slideshare

0

De embebidos

0

Número de embebidos

16

Acciones

Descargas

1

Compartidos

0

Comentarios

0

Me gusta

0

×