Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Todo App Angular 2

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Andres Osorio Plata Andres Osorio Plata
August 21, 2015
Technology
170
1

Todo App Angular 2

We will talk about:
Angular 1
Angular 2
Angular 1 and ES6
Code of a Todo App in Angular 2

Avatar for Andres Osorio Plata

Andres Osorio Plata

August 21, 2015

More Decks by Andres Osorio Plata

See All by Andres Osorio Plata
Reactive Programming in Javascript
Avatar for Andres Osorio Plata codeandrop
0
130
Material Design Lite
Avatar for Andres Osorio Plata codeandrop
0
130

Other Decks in Technology

See All in Technology
CARTA HOLDINGS エンジニア向け 採用ピッチ資料 / CARTA-GUIDE-for-Engineers
Avatar for CARTA Engineering carta_engineering
0
47k
コーディングエージェントはTypeScriptの 型エラーをどう自己修正しているのか
Avatar for Melonps melonps
3
430
はじめてのAI-DLC
Avatar for 吉田真吾 yoshidashingo
2
460
データ基盤構築・運用の現場から 〜 Snowflake Intelligence 導入で変わった、データ活用の未来 〜
Avatar for wonohe wonohe
0
160
その英語学習、AWSで代替できませんか？
Avatar for Tatsuya suzutatsu
1
220
TypeScriptで実現する既存APIを活用したリモートMCPサーバー構築 / TSKaigi 2026
Avatar for Shodai Suzuki soarteclab
1
260
Orchestration Development Workshopを半期実施して
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
360
A Harness for Behaviour: how to get AI to generate code that does what we intend, or "TDD in the age of AI"
Avatar for Matteo Vaccari xpmatteo
0
320
Kaggle未経験社員をメダリストに育てる「AIドラゴン桜」
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
350
論文紹介：Pixal3D (SIGGRAPH 2026)
Avatar for TakatoYoshikawa tenten0727
0
700
Slack MCPでインシデント対応とFAQ生成を加速する：社内ワークショップの実践
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
360
社内RAGの導入で気を付けたポイント
Avatar for やくも yakumo
2
150

Featured

See All Featured
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
460
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
250
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
360
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
10
37k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
190
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
150
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
140
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k

Transcript

  1. Todo App Angular 2 Andres Osorio @codeandrop

  2. Agenda • Angular 1 • Angular 2 • Angular 1

    and ES6 • Demo time!

  3. Angular 1 • The code base for Angular dates back

    to 2009 • Angular2 is 5x faster than Angular 1* • Angular 1.x has many concepts • Concepts have a learning curve

  4. Angular 1 Concepts • Controller • Factory • Service •

    Provider • Directive • Transclusion • Module

  5. Angular 2 • Work in progress • ES5, ES6, Dart

    or Typescript • Everything is a component • Components: Break UI into reusable pieces • Tree of components • Possible migration from Angular 1.5.x

  6. Angular 2 - Component Syntax

  7. Angular 2 - Component Syntax Annotation Controller

  8. Angular 2 - Controller

  9. Angular 2 - Template Syntax • Local Variables - #localvar

    • Event Handlers - (click) • Property Bindings - [innerText]

  10. Angular 2 - Template Syntax

  11. Angular 1 and ES6 http://www.michaelbromley.co.uk/blog/350/exploring-es6-classes-in-angularjs-1-x https://github.com/Swiip/generator-gulp-angular

  12. Demo time!

  13. THE END