Angular Best Practices v2
•
23 j'aime•8,694 vues
Checkout our contributions: http://angularify.org/ Angular Best Practices presented at Techcamp Vietnam 2014 (techcamp.vn). Github source code: https://github.com/henrytao-me/angular-best-practices RESOURCES & REFERENCES AngularJS style guide https://github.com/mgechev/angularjs-style-guide Best practices from father of AngularJS http://www.youtube.com/watch?v=ZhfUv0spHCY ng-boilerplate https://github.com/ngbp/ngbp Airbnb prerender backbone http://nerds.airbnb.com/weve-open-sourced-rendr-run-your-backbonejs-a/ AngularSEO from yearofmoo http://www.yearofmoo.com/2012/11/angularjs-and-seo.html AngularJS full testing with Karma from yearofmoo http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html%23testing-controllers AngularJS Video from egghead.io http://egghead.io/lessons AngularJS Best Practices – offically https://github.com/angular/angular.js/wiki/Best-Practices AngularJS Experiment http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Angular Best Practices v2
Similaire à Angular Best Practices v2 (20)
Dernier
Dernier (20)
Angular Best Practices v2
- 1. Best Practices From Nutshell To Awesome Thing By HenryTao – http://henrytao.me – version 2.0
- 2. henrytao-me/angular-best-practices By HenryTao – http://henrytao.me Github
- 3. Agenda ¡ Who I Am? Why Do I Choose AngularJS? ¡ AngularJS – The BEST World. ¡ AngularJS – The DARK World. ¡ AngularJS Best Practices – The 3rd World. ¡ The Future Of AngularJS. ¡ Resources & References. By HenryTao – http://henrytao.me
- 4. Who I Am? Technical lover. Love to build awesome product. Passion about Entrepreneur-Ship. Believe that we can make a better world. Keep dreaming – Keep acting – Be realistic. Co-founder, Front-end developer at Coral.io – Making scene of data By HenryTao – http://henrytao.me
- 5. Why Do I Choose AngularJS? Reusable Component || html + css + js By HenryTao – http://henrytao.me
- 6. Why Do I Choose AngularJS? By HenryTao – http://henrytao.me PROBLEM! ! .component .element{! /* To-do */! }! ! $(‘.component .element’).trigger(‘click’);! COMMON SOLUTION! .component > .element{! /* To-do */! }! ! $(‘.component > .element’).trigger(‘click’);!
- 7. Why Do I Choose AngularJS? By HenryTao – http://henrytao.me meteor.com derbyjs.com polymer-project.org angularjs.org backbonejs.org
- 8. Why Do I Choose AngularJS? By HenryTao – http://henrytao.me Testing people often don’t know what they don’t know people don’t feel they have a problem until they understand the problem the beauty of CI – Continuous Integration
- 9. AngularJS – The BEST World. By HenryTao – http://henrytao.me I found you
- 10. AngularJS – The BEST World. 2 ways data binding By HenryTao – http://henrytao.me directive testing template routing service factory dependency injection SPAs
- 11. AngularJS – The BEST World. By HenryTao – http://henrytao.me BASIC 2 WAYS DATA BINDING! ! // html! Hello {{username}}!! ! // js! $scope.username = ‘John Doe’;! // html! Hello John Doe!! ! // html! <input ng-model="username”>! !
- 12. AngularJS – The BEST World. By HenryTao – http://henrytao.me BASIC DIRECTIVE! ! // html element! <a href=‘http://angularjs.org’>html element</a>! ! // custom attribute directive! <a ng-href=‘http://{{address}}’>html element</a>! ! !
- 13. AngularJS – The DARK World. By HenryTao – http://henrytao.me
- 14. AngularJS – The DARK World. Over 2.500 data-binding By HenryTao – http://henrytao.me e2e testing with angular ui-router too many template file authentication SEO reusable code DOM
- 15. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me Sooooo Excited
- 16. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me Over 2.500 data-binding Use pagination Never binding function Cache data with _.memoize Use module ux-angularjs-datagrid Use ng-if instead of ng-show
- 17. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me e2e testing with angular ui-router Angular ui-router still not work perfect with e2e testing Setup protractor with selenium support Use ghostdriver headless browser (phantomjs) on CI Consider casperjs for e2e testing
- 18. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me too many template file Use angular template cache Convert all html template into javascript
- 19. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me DOM Inject $window & $document Add jQuery before Angular
- 20. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me authentication Use $httpProvider.responseInterceptors
- 21. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me reusable code Code structure Use ng-boilerplate or ng-boilerplate-2 Use grunt / gulp for development life cycle
- 22. AngularJS Best Practices – The 3rd World. MVC vs Module By HenryTao – http://henrytao.me
- 23. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me seo pre-render with phantomjs http://localhost/#!/routing/to/somewhere http://localhost/?_escaped_fragment_=/routing/to/somewhere looking for something cool in the future Prerender.io Brombone.com
- 24. By HenryTao – http://henrytao.me è Re-structure ng-boilerplate. è Use module approach. è Communicate through API. è Frontend: AWS S3 / NodeJS … è Backend: Java. è grunt, bower, less, uglify, jshint, cssmin, htmlmin, watch, livereload, usemin, ngmin, protractor, selenium webdriver, mocha, phantomjs. Coral.io solution
- 25. What’s Next With Angular 2.0? ¡ Airbnb – Rendr Backbone in apps in the browser and Node. ¡ jQuery on nodejs with cheerio ¡ Polymer-project Web component ¡ AngularJS 2.0 Server-side prerendering Simplify directive Animation By HenryTao – http://henrytao.me
- 26. Resources & References ¡ AngularJS style guide (see here) ¡ Best practices from father of AngularJS (see here) ¡ ng-boilerplate (see here) ¡ Airbnb prerender backbone (see here) ¡ AngularSEO from yearofmoo (see here) ¡ AngularJS full testing with Karma from yearofmoo (see here) ¡ AngularJS Video from egghead.io (see here) ¡ AngularJS Best Practices – offically (see here) ¡ AngularJS Experiment (see here) By HenryTao – http://henrytao.me All images were got from http://google.com
- 27. Resources & References By HenryTao – http://henrytao.me
- 28. Resources & References By HenryTao – http://henrytao.me