Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Todo App Angular 2

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Andres Osorio Plata Andres Osorio Plata
August 21, 2015
Technology
180
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
140
Material Design Lite
Avatar for Andres Osorio Plata codeandrop
0
140

Other Decks in Technology

See All in Technology
2026-09-04 SRE Tech Talk #15 怠惰なTerraform / Lazy Terraform
Avatar for SUZUKI Masashi masasuzu
0
230
TinyGo 開発サイクルを高速化する：Go で作るエミュレータ入門
Avatar for ZOZO Developers zozotech
PRO
1
380
ASTを使って影響範囲を特定する
Avatar for Nealle nealle
0
140
20260906 「AWS運用入門」著者が教える、運用業務への生成AI活用入門
Avatar for Masaru Ogura masaruogura
0
260
SQL文一行も書けない人事がCortexもろもろを使って人事業務を楽にしてみる
Avatar for ponponmikan ponponmikankan
1
200
Code4Lib JAPANカンファレンス2026 開会挨拶 / Code4Lib JAPAN Conference 2026: Opening Remarks
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
280
DEFCON34-Write-up_HYCu-MYCu
Avatar for okzkey daikiokazaki
0
120
OpenTelemetry eBPF Instrumentationの舞台裏 / Behind the Scenes of OpenTelemetry eBPF Instrumentation
Avatar for ymotongpoo ymotongpoo
3
720
From Vanilla Kubernetes to a Batteries-Included Platform: Developer Experience at 1,300+ Clusters
Avatar for yosshi_ yosshi_
0
660
20260912_スクラムにジェネラリストは必要か
Avatar for ryugen04 ryugen04
0
220
「重なり」は迎える側がつくる ― 人もAIエージェントも歓迎するプロダクトエンジニアリング ―
Avatar for Go Akazawa go0517go
PRO
0
270
アプリをもっと"iOSアプリっぽく"する小さな工夫 / Small Touches That Make Your App Feel More Like an iOS App
Avatar for matsuji matsuji
1
170

Featured

See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.8k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
490
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
67
58k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
480
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
410
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
650
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
440

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