Your SlideShare is downloading. ×
Building Single-page Web Applications with AngularJS
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building Single-page Web Applications with AngularJS


Published on

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 …

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.

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Appeared sometime in 2005Show the point: the page does not reload after loaded first timeIn an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page, although modern web technologies (such as those included in HTML5) can provide the perception and navigability of separate logical pages in the application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes.
  • SPA is good for web application or game such as management (todo list, tasks, projects), utilities (rss readers, email), education, etc.Content-heavy sites: blog, newspaper, magazine, etc.
  • Site content becomes SEO-unfriendly  HTML is generated by javascript and crawler has no way to read itInsecure application code  business code is exposed to clientAware navigation browser buttons: Back, Forward and Reload  handle when user clicks on these buttonsHTML5 History API: although SPA frameworks can runs ok in non-History API browsers but this limits some features e.g. can’t handle bookmarked links
  • route /raʊt/In angularjs, View here refers as a templateRoute is to link a View and a Controller togetherModel and View (template) are compiled to make final HTML document for end-user (with attached events if any)Two-way binding: any changes on Model is detected automatically and re-compiles
  • Initialize AngularHow static HTML looks likeHow to bootstrap app with AngularHow to define and load dependent angular modulesControllers, Views and RoutesHow to setup routesController is factory method$scope is data-model or execution contextTwo-way binding in Model and ViewChanges in model are compiled to viewOnly detect changes in “angular” runtime (update scope in settimeout doesn’t work)Interaction between View and Controller$scope is central access to interact
  • HTTP service here isn’t jQueryajax, it’s ajaximplementation in AngularJS
  • Introduce definition of dependency injectionExplain sample code: one approach to inject dependency. Here it removes the responsibility of locating the dependency from the component.SomeClass is not concerned with locating the greeter dependency, it is simply handed the greeter at runtimeIt puts the responsibility of getting hold of the dependency on the code that constructs SomeClass, in AngularJS, there is a service called Injector to take this responsibility
  • Injector will create and cache User-defined ObjectsThe most verbose, but also the most comprehensive one is a Provider recipe. The remaining four recipe types — Value, Factory, Service and Constant — are just syntactic sugar on top of a provider recipe
  • How to inject dependencies to elements
  • Not all recipes have demo code, only: value, factory, serviceService vs. Factory: service is created with new operator
  • directive /dɪˈrɛktɪv; daɪ-/
  • Single-page is good ?
  • Transcript

    • 2. AGENDA Single-page Web App AngularJS Takeaway
    • 3. ABOUT ME Software Architect at KMS Technology amphuong
    • 4. OBJECTIVES  Understand the Single-page approach and its benefits  Understand how well AngularJS supports in building Single-page App
    • 5. AGENDA Single-page Web App AngularJS Takeaway
    • 6. SINGLE-PAGE WEB APPLICATION Multi-page web application
    • 7. IS SPA THE FUTURE OF WEB APP ? (one of) SPA pitfall: content-heavy sites Highlight SPA apps
    • 8. SPA BENEFITS  Runs faster  Gives better UX  Is able to operate offline (thanks to HTML5)  Uses less network bandwidth
    • 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. NOTABLE FRAMEWORKS ASP.NET Single Page Application
    • 11. AGENDA Single-page Web App AngularJS Takeaway
    • 12. ANGULARJS Why AngularJS AngularJS concepts Dependency Injection & “recipe” in Injector service Directives & Filters
    • 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. DEMO
    • 15. ANGULARJS Why AngularJS AngularJS concepts Dependency Injection & “recipe” in Injector service Directives & Filters
    • 16. HELLO WORLD
    • 17. MVC ARCHITECTURE View link Route (template) Compile Two-way binding Model link <html> </html> Update Interact Controller
    • 18. EXPLORE THE CODE  Initialize AngularJS  Controllers, Views and Routes  Two-way binding in Model and View  Interaction between View and Controller
    • 19. ANGULARJS Why AngularJS AngularJS concepts Dependency Injection & “recipe” in Injector service Directives & Filters
    • 20. USE (INJECT) BUILT-IN SERVICES  Use HTTP and Cookie built-in services
    • 21. DEPENDENCY INJECTION IN NUTSHELL Dependency is handed to the component AngularJS Injector service
    • 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. 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. EXPLORE THE CODE Register a recipe Service vs. Factory
    • 25. ANGULARJS Why AngularJS AngularJS concepts Dependency Injection & “recipe” in Injector service Directives & Filters
    • 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. DIRECTIVES Template Compiled view
    • 28. FILTERS  “format the value of an expression for display to the user”
    • 29. EXPLORE THE CODE  Implement directives  Implement filters
    • 30. AGENDA Single-page Web App AngularJS Takeaway
    • 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. KILLER ANGULARJS FEATURES  MVC architecture  Dependency Injection  Customized HTML markers (tags and attributes)
    • 33. REFERENCES  Source code of demo app:  Demo app url:
    • 34. THANK YOU © 2014 KMS Technology