O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
BUILDING SINGLE-PAGE WEB
APPLICATION WITH ANGULARJS
DUY LAM
KMS TECHNOLOGY
MAR 2014
AGENDA

Single-page Web App

AngularJS

Takeaway
ABOUT ME
Software Architect
at KMS Technology
duylam@kms-technology.com
http://vn.linkedin.com/in/duyl
amphuong
OBJECTIVES
 Understand the Single-page approach and its
benefits
 Understand how well AngularJS supports in
building Sin...
AGENDA

Single-page Web App

AngularJS

Takeaway
SINGLE-PAGE WEB APPLICATION
Multi-page web application
IS SPA THE FUTURE OF WEB APP ?
(one of) SPA pitfall: content-heavy sites
Highlight SPA apps
SPA BENEFITS
 Runs faster
 Gives better UX
 Is able to operate offline (thanks to HTML5)
 Uses less network bandwidth
SPA DRAWBACKS
 Site content becomes SEO-unfriendly
 Insecure application code
 Aware navigation browser buttons: Back,
...
NOTABLE FRAMEWORKS

ASP.NET Single Page Application

http://todomvc.com
AGENDA

Single-page Web App

AngularJS

Takeaway
ANGULARJS
Why AngularJS
AngularJS concepts
Dependency Injection & “recipe” in Injector
service
Directives & Filters
WHY ANGULARJS
 First release v0.9.0 on Oct, 2010
 Maintained by Google and community
 Active development: 03 new releas...
DEMO
ANGULARJS
Why AngularJS
AngularJS concepts
Dependency Injection & “recipe” in Injector
service
Directives & Filters
HELLO WORLD
MVC ARCHITECTURE

View

link

Route

(template)

Compile
Two-way
binding

Model

link

<html>
</html>

Update

Interact

C...
EXPLORE THE CODE
 Initialize AngularJS
 Controllers, Views and Routes
 Two-way binding in Model and
View
 Interaction ...
ANGULARJS
Why AngularJS
AngularJS concepts
Dependency Injection & “recipe” in Injector
service
Directives & Filters
USE (INJECT) BUILT-IN SERVICES
 Use HTTP and Cookie
built-in services
DEPENDENCY INJECTION IN
NUTSHELL
Dependency is handed
to the component

AngularJS Injector
service
ANGULARJS INJECTOR SERVICE
Injector is responsible for creating two types of
objects:
 User-defined Objects:
– We registe...
INJECT DEPENDENCY IN ANGULARJS
Elements to have dependencies:
- Controller, Directive, Filter and
Animation
- Factory, Ser...
EXPLORE THE CODE
Register a recipe
Service vs. Factory
ANGULARJS
Why AngularJS
AngularJS concepts
Dependency Injection & “recipe” in Injector
service
Directives & Filters
DIRECTIVES
are markers on a DOM element (an attribute or an
element name)
attach behaviors to that DOM element and/or
tr...
DIRECTIVES

Template

Compiled view
FILTERS
 “format the value of an expression for display
to the user”
EXPLORE THE CODE
 Implement directives
 Implement filters
AGENDA

Single-page Web App

AngularJS

Takeaway
WEB APP DEVELOPMENT
 Approaches: Multi-page vs. Single-page
 Highlight Single-page benefits:
 Runs faster
 Has better ...
KILLER ANGULARJS FEATURES
 MVC architecture
 Dependency Injection
 Customized HTML markers (tags and
attributes)
REFERENCES
 Source code of demo app:
https://github.com/kms-technology/angularjs
 Demo app url:
http://kms-technology.gi...
THANK YOU

© 2014 KMS Technology
Próximos SlideShares
Carregando em…5
×
Próximos SlideShares
angularJS Practicle Explanation
Avançar
Transfira para ler offline e ver em ecrã inteiro.

Compartilhar

Building Single-page Web Applications with AngularJS

Baixar para ler offline

In recent years, a modern approach for building client-centric applications, Single-Page Web Applications, has become well-known in our developer community. As a result, there are several new frameworks that have made their way to the professional developer’s landscape.

AngularJS is a new framework that radically changes the way developers build a web application. It is one of the most ideal alternatives that offers a powerful foundation to build your web application. This slides is dedicated to developers who want to learn the best practices in single-page approaches and how to apply them with AngularJS.

Building Single-page Web Applications with AngularJS

  1. 1. BUILDING SINGLE-PAGE WEB APPLICATION WITH ANGULARJS DUY LAM KMS TECHNOLOGY MAR 2014
  2. 2. AGENDA Single-page Web App AngularJS Takeaway
  3. 3. ABOUT ME Software Architect at KMS Technology duylam@kms-technology.com http://vn.linkedin.com/in/duyl amphuong
  4. 4. OBJECTIVES  Understand the Single-page approach and its benefits  Understand how well AngularJS supports in building Single-page App
  5. 5. AGENDA Single-page Web App AngularJS Takeaway
  6. 6. SINGLE-PAGE WEB APPLICATION Multi-page web application
  7. 7. IS SPA THE FUTURE OF WEB APP ? (one of) SPA pitfall: content-heavy sites Highlight SPA apps
  8. 8. SPA BENEFITS  Runs faster  Gives better UX  Is able to operate offline (thanks to HTML5)  Uses less network bandwidth
  9. 9. SPA DRAWBACKS  Site content becomes SEO-unfriendly  Insecure application code  Aware navigation browser buttons: Back, Forward and Reload  Run well in browsers compatible with HTML5 History API
  10. 10. NOTABLE FRAMEWORKS ASP.NET Single Page Application http://todomvc.com
  11. 11. AGENDA Single-page Web App AngularJS Takeaway
  12. 12. ANGULARJS Why AngularJS AngularJS concepts Dependency Injection & “recipe” in Injector service Directives & Filters
  13. 13. WHY ANGULARJS  First release v0.9.0 on Oct, 2010  Maintained by Google and community  Active development: 03 new releases per month  MIT license (like jQuery)  (shameless ad -:) Many killer features
  14. 14. DEMO
  15. 15. ANGULARJS Why AngularJS AngularJS concepts Dependency Injection & “recipe” in Injector service Directives & Filters
  16. 16. HELLO WORLD
  17. 17. MVC ARCHITECTURE View link Route (template) Compile Two-way binding Model link <html> </html> Update Interact Controller
  18. 18. EXPLORE THE CODE  Initialize AngularJS  Controllers, Views and Routes  Two-way binding in Model and View  Interaction between View and Controller
  19. 19. ANGULARJS Why AngularJS AngularJS concepts Dependency Injection & “recipe” in Injector service Directives & Filters
  20. 20. USE (INJECT) BUILT-IN SERVICES  Use HTTP and Cookie built-in services
  21. 21. DEPENDENCY INJECTION IN NUTSHELL Dependency is handed to the component AngularJS Injector service
  22. 22. ANGULARJS INJECTOR SERVICE Injector is responsible for creating two types of objects:  User-defined Objects: – We register a “recipe” to instruct Injector in how to create objects – Recipe types: Value, Factory, Service, Provider and Constant  Specialized Objects: Controllers, Directives, Filters and Animations
  23. 23. INJECT DEPENDENCY IN ANGULARJS Elements to have dependencies: - Controller, Directive, Filter and Animation - Factory, Service and Provider Elements can be injected (recipe): Service, Provider, Value, Factory and Constant
  24. 24. EXPLORE THE CODE Register a recipe Service vs. Factory
  25. 25. ANGULARJS Why AngularJS AngularJS concepts Dependency Injection & “recipe” in Injector service Directives & Filters
  26. 26. DIRECTIVES are markers on a DOM element (an attribute or an element name) attach behaviors to that DOM element and/or transform the DOM element (and its children)
  27. 27. DIRECTIVES Template Compiled view
  28. 28. FILTERS  “format the value of an expression for display to the user”
  29. 29. EXPLORE THE CODE  Implement directives  Implement filters
  30. 30. AGENDA Single-page Web App AngularJS Takeaway
  31. 31. WEB APP DEVELOPMENT  Approaches: Multi-page vs. Single-page  Highlight Single-page benefits:  Runs faster  Has better UX  Single-page drawbacks:  SEO-unfriendly  Insecure application code
  32. 32. KILLER ANGULARJS FEATURES  MVC architecture  Dependency Injection  Customized HTML markers (tags and attributes)
  33. 33. REFERENCES  Source code of demo app: https://github.com/kms-technology/angularjs  Demo app url: http://kms-technology.github.io/angularjs/
  34. 34. THANK YOU © 2014 KMS Technology
  • ngeloRicardoCosta

    Nov. 6, 2015
  • bagatu

    Jul. 18, 2015
  • parvathymeenakshy

    Jun. 24, 2015
  • QuangAnh3

    Feb. 23, 2015
  • Hasanfar

    Nov. 17, 2014
  • newmahmoudsamy

    Nov. 12, 2014
  • bluedusk

    Jul. 22, 2014
  • boboy999

    Jul. 21, 2014
  • sergicua

    May. 2, 2014
  • ctnels

    Apr. 24, 2014
  • LoiCao

    Mar. 4, 2014
  • xmen458

    Feb. 25, 2014

In recent years, a modern approach for building client-centric applications, Single-Page Web Applications, has become well-known in our developer community. As a result, there are several new frameworks that have made their way to the professional developer’s landscape. AngularJS is a new framework that radically changes the way developers build a web application. It is one of the most ideal alternatives that offers a powerful foundation to build your web application. This slides is dedicated to developers who want to learn the best practices in single-page approaches and how to apply them with AngularJS.

Vistos

Vistos totais

14.244

No Slideshare

0

De incorporações

0

Número de incorporações

165

Ações

Baixados

243

Compartilhados

0

Comentários

0

Curtir

12

×