Download - Angular Best Practices v2
![Page 1: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/1.jpg)
Best Practices From Nutshell To Awesome Thing
By HenryTao – http://henrytao.me – version 2.0
![Page 2: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/2.jpg)
henrytao-me/angular-best-practices
By HenryTao – http://henrytao.me
Github
![Page 3: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/3.jpg)
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
![Page 4: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/4.jpg)
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
![Page 5: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/5.jpg)
Why Do I Choose AngularJS?
Reusable Component
||
html + css + js
By HenryTao – http://henrytao.me
![Page 6: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/6.jpg)
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’);!
![Page 7: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/7.jpg)
Why Do I Choose AngularJS?
By HenryTao – http://henrytao.me
meteor.com
derbyjs.com
polymer-project.org
angularjs.org backbonejs.org
![Page 8: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/8.jpg)
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
![Page 9: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/9.jpg)
AngularJS – The BEST World.
By HenryTao – http://henrytao.me
I found you
![Page 10: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/10.jpg)
AngularJS – The BEST World.
2 ways data binding
By HenryTao – http://henrytao.me
directive
testing
template routing
service
factory
dependency injection
SPAs
![Page 11: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/11.jpg)
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”>!!
![Page 12: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/12.jpg)
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>!!!
![Page 13: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/13.jpg)
AngularJS – The DARK World.
By HenryTao – http://henrytao.me
![Page 14: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/14.jpg)
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
![Page 15: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/15.jpg)
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
Sooooo Excited
![Page 16: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/16.jpg)
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
![Page 17: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/17.jpg)
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
![Page 18: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/18.jpg)
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
![Page 19: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/19.jpg)
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
DOM
Inject $window & $document
Add jQuery before Angular
![Page 20: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/20.jpg)
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
authentication
Use $httpProvider.responseInterceptors
![Page 21: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/21.jpg)
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
![Page 22: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/22.jpg)
AngularJS Best Practices – The 3rd World.
MVC vs Module
By HenryTao – http://henrytao.me
![Page 23: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/23.jpg)
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
![Page 24: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/24.jpg)
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
![Page 25: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/25.jpg)
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
![Page 26: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/26.jpg)
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
![Page 27: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/27.jpg)
Resources & References
By HenryTao – http://henrytao.me
![Page 28: Angular Best Practices v2](https://reader034.vdocuments.mx/reader034/viewer/2022051819/54c82e8d4a795921468b45d7/html5/thumbnails/28.jpg)
Resources & References
By HenryTao – http://henrytao.me