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
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
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
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
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