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

Todo App Angular 2

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
UIライブラリに依存しすぎないReact Native設計を目指して
Avatar for Takahiro Kato grandbig
0
160
基盤を育てる 外部SaaS連携の運用
Avatar for Hiroto Gamo gamonges_dresscode
1
120
生成AI時代のドキュメントに対する期待の整理と実践から得た学び / Rethinking Documentation for LLM: Lessons from Practice
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
110
需要創出(Chatwork)×供給(BPaaS) フライホイールとMoat 実行能力の最適配置とAI戦略
Avatar for kubell kubell_hr
0
1.1k
Choose your own adventure in agentic design patterns
Avatar for Guillaume Laforge glaforge
0
160
Pure Intonation on Browser: Building a Sequencer with Ruby
Avatar for nagachika nagachika
0
260
目的ファーストのハーネス設計 ~ハーネスの変更容易性を高めるための優先順位~
Avatar for Gota gotalab555
9
3.1k
Modernizing Your HCL Connections Experience: Visual Report to chain, Profile Enhancements, and AI Integration
Avatar for Wannes Rams wannesrams
0
110
小説執筆のハーネスエンジニアリング
Avatar for osushi_cr yoshitetsu
0
830
これからの「データマネジメント」の話をしよう
Avatar for SansanTech sansantech
PRO
0
170
"おまじない"を卒業する　ボイラープレート再入門
Avatar for shun shunsuke_1b
1
120
COBOL婆さんの伝説
Avatar for フクイ poropinai1966
0
110

Featured

See All Featured
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
170
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
120
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
310
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
740
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
110
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.7k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
680

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