Download as PDF, PPTX
![Quick Intro AngularJS is built around the belief that declarative programming should be used for building UIs and wiring software components, while imperative programming is excellent for expressing business logic.[1] The framework adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS deemphasizes DOM manipulation and improves testability. By HenryTao – http://henrytao.me](https://image.slidesharecdn.com/angular-best-practices-140110200203-phpapp01/75/AngularJS-best-practices-3-2048.jpg)
![Main Features & Why It’s Awesome <html ng-app="phonecatApp"> <head> ... <script src="lib/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="PhoneListCtrl"> <ul> <li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </body> </html> By HenryTao – http://henrytao.me var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function ($scope) { $scope.phones = [{ 'name': 'Nexus S', 'snippet': 'Fast ...with Nexus S.’ }, { 'name': 'Motorola ... with Wi-Fi', 'snippet': ’The ...tablet.’ }, { 'name': 'MOTOROLA XOOM™', 'snippet': 'The ... let.’ }]; }); http://docs.angularjs.org/tutorial/step_02](https://image.slidesharecdn.com/angular-best-practices-140110200203-phpapp01/75/AngularJS-best-practices-6-2048.jpg)
![Single Page Apps vs Classical Apps Manual Bootstrap Angular Code angular.module(‘myModule’, []).controller(‘myCtrl’, function($scope){ // do something }); var template = “<div ng-controller=‘myCtrl’>Your html code with angular binding {{data}}</div>”; var $template = $(template); angular.bootstrap($template, [‘myModule']); // $template is a jQuery object which already bootstrapped by AngularJS. By HenryTao – http://henrytao.me](https://image.slidesharecdn.com/angular-best-practices-140110200203-phpapp01/75/AngularJS-best-practices-8-2048.jpg)
Uploaded byHenry Tao
AngularJS best-practices
The document outlines best practices for building applications with AngularJS. It discusses the differences between single page apps built with AngularJS and traditional apps, recommending approaches like following AngularJS style guides. The document also summarizes upcoming features for AngularJS 2.0 like improved directives and server-side rendering. Resources are provided for tools like Grunt, Bower, and techniques like search engine optimization for single page apps.
AngularJS best-practices
- 1. Best Practices From NutshellTo Awesome Thing By HenryTao – http://henrytao.me
- 2. Agenda ¡ Quick Intro ¡ Main Features And Why It’s Awesome ¡ Single Page Apps vs Classical Apps ¡ Best Practices ¡ SEO? ¡ What’s Next With Angular 2.0? ¡ Resources By HenryTao – http://henrytao.me
- 3. Quick Intro AngularJS isbuilt around the belief that declarative programming should be used for building UIs and wiring software components, while imperative programming is excellent for expressing business logic.[1] The framework adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS deemphasizes DOM manipulation and improves testability. By HenryTao – http://henrytao.me
- 4. Quick Intro Cool Extends HTML 2ways data-binding SPAs Template Reuse component All static file By HenryTao – http://henrytao.me
- 5. Main Features &Why It’s Awesome ¡ Template ¡ 2 ways data-binding ¡ Routing ¡ Directives ¡ Services / Factory ¡ Dependency injection ¡ Testing By HenryTao – http://henrytao.me
- 6. Main Features &Why It’s Awesome <html ng-app="phonecatApp"> <head> ... <script src="lib/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="PhoneListCtrl"> <ul> <li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </body> </html> By HenryTao – http://henrytao.me var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function ($scope) { $scope.phones = [{ 'name': 'Nexus S', 'snippet': 'Fast ...with Nexus S.’ }, { 'name': 'Motorola ... with Wi-Fi', 'snippet': ’The ...tablet.’ }, { 'name': 'MOTOROLA XOOM™', 'snippet': 'The ... let.’ }]; }); http://docs.angularjs.org/tutorial/step_02
- 7. Single Page Appsvs Classical Apps Single Page Apps Classical Apps ng-app html string controller jQuery object template manual bootstrap done done - - - - By HenryTao – http://henrytao.me
- 8. Single Page Appsvs Classical Apps Manual Bootstrap Angular Code angular.module(‘myModule’, []).controller(‘myCtrl’, function($scope){ // do something }); var template = “<div ng-controller=‘myCtrl’>Your html code with angular binding {{data}}</div>”; var $template = $(template); angular.bootstrap($template, [‘myModule']); // $template is a jQuery object which already bootstrapped by AngularJS. By HenryTao – http://henrytao.me
- 9. Best Practices ¡ AngularJSstyle guide https://github.com/.../angularjs-style-guide ¡ Best practices from Father of AngularJS http://www.youtube.com/watch?v=...CY ¡ Full stack vs Classical App ¡ Single Page App vs Classical App (manual) ¡ MVC vs Module ¡ JS All-in-one vs RequireJS ¡ ng boilerplate (see here) ¡ boilerplate+ + sailsjs + Java API + gruntjs + bowerjs By HenryTao – http://henrytao.me
- 10. Best Practices MVC vsModule By HenryTao – http://henrytao.me
- 11. SEO? The problem ofMOST SPAs SOME SOLUTIONS Search engine _escaped_fragment_ è from: http://…#html5-pushstate è to: http://…?_escaped_fragment_=html5-pushstate Prerender.io – Opensource project Brombone.com – Commercial project By HenryTao – http://henrytao.me
- 12. What’s Next WithAngular 2.0? ¡ Airbnb – Rendr Backbone in apps in the browser and Node. ¡ jQuery on nodejs ¡ Polymer-project Web component ¡ AngularJS 2.0 Server-side prerendering Simplify directive Animation By HenryTao – http://henrytao.me
- 13. Resources ¡ Airbnb http://nerds.airbnb.com/weve-open-sourced-rendr-run-your-backbonejs-a/ ¡ AngularSEO http://www.yearofmoo.com/2012/11/angularjs-and-seo.html ¡ AngularJS Video http://egghead.io/lessons ¡ gruntjs, bowerjs, ng-boilerplate, sailjs, requirejs, less By HenryTao – http://henrytao.me