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
1
170

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
Tweet

More Decks by Andres Osorio Plata

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

Other Decks in Technology

See All in Technology
変化するコーディングエージェントとの現実的な付き合い方 〜Cursor安定択説と、ツールに依存しない「資産」〜
Avatar for empitsu empitsu
4
1.3k
GCASアップデート（202510-202601）
Avatar for 高橋広和 techniczna
0
250
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
生成AI時代にこそ求められるSRE / SRE for Gen AI era
Avatar for ymotongpoo ymotongpoo
5
2.6k
クレジットカード決済基盤を支えるSRE - 厳格な監査とSRE運用の両立 (SRE Kaigi 2026)
Avatar for capytan capytan
6
2.5k
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
17k
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
Avatar for AEON aeonpeople
1
170
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
Avatar for AEON aeonpeople
6
2.1k
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
120
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
42k
Amazon Bedrock AgentCore 認証・認可入門
Avatar for iganin hironobuiga
2
500
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
530

Featured

See All Featured
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
200
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.5k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
210
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
290
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
190
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.3k

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