Downloaded 38 times
Uploaded byDuy Lâm
Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014
The document discusses building single-page web applications with AngularJS. It provides an overview of single-page applications and highlights some key features of AngularJS, including its MVC architecture, directives for extending HTML, and filters for formatting expressions. The presentation includes a demo of an AngularJS application and explores some example code to illustrate directives and filters.
More Related Content
Similar to Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014
- 1. © 2014 KMSTechnology
- 2. BUILDING SINGLE-PAGE WEB APPLICATIONSWITH ANGULARJS DUY LAM MAR 2014
- 3. AGENDA Single-page Web App AngularJSHighlights Takeaway
- 4. ABOUT ME Software Architect atKMS Technology duylam@kms-technology.com http://vn.linkedin.com/in/duyl amphuong
- 5. OBJECTIVES Understand theSingle-page approach Understand the strength of AngularJS
- 6. AGENDA Single-page Web App AngularJSHighlights Takeaway
- 7. Multi-page web application SINGLE-PAGEWEB APPLICATION
- 8. Highlight SPA apps ISSPA THE FUTURE OF WEB APP ? (one of) SPA pitfall: content-heavy sites
- 9. NOTABLE FRAMEWORKS http://todomvc.com ASP.NET SinglePage Application
- 10. AGENDA Single-page Web App AngularJSHighlights Takeaway
- 11.
- 12. WHY ANGULARJS Maintainedby Google and community MIT license (like jQuery) First release v0.9.0 on Oct, 2010 (shameless ad -:) Many killer features
- 13.
- 14.
- 15.
- 16. EXPLORE THE CODE View+ ModelController Two-way binding
- 17.
- 18. DIRECTIVES are markers ona DOM element (an attribute or an element name) attach behaviors to that DOM element and/or transform the DOM element (and its children)
- 19.
- 20. FILTERS “format the valueof an expression for display to the user”
- 21. EXPLORE THE CODE– A DIRECTIVE
- 22. EXPLORE THE CODE– A FILTER More examples for directives
- 23. AGENDA Single-page Web App AngularJSHighlights Takeaway
- 24. WEB APP DEVELOPMENT Approaches: Multi-page vs. Single-page Single-page: another approach for building web app
- 25. ANGULARJS HIGHLIGHTS Anactive framework Follows MVC architecture Builds customized HTML markers (tags and attributes) Sorry, I don’t like angularjs
- 26. REFERENCES Demo appsource code: https://github.com/duylam/angularjs-techcamp2014 Demo app url: http://duylam.github.io/angularjs- techcamp2014
- 27. THANK YOU © 2014KMS Technology
Editor's Notes
- #8 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.
- #9 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.
- #17 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
- #18 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
- #20 directive /dɪˈrɛktɪv; daɪ-/
- #26 Single-page is good ?