Best Practices
From Nutshell To Awesome Thing
By HenryTao – http://henrytao.me – version 2.0
henrytao-me/angular-best-practices
By HenryTao – http://henrytao.me
Github
Agenda
¡  Who I Am? Why Do I Choose AngularJS?
¡  AngularJS – The BEST World.
¡  AngularJS – The DARK World.
¡  Angula...
Who I Am?
Technical lover.
Love to build awesome product.
Passion about Entrepreneur-Ship.
Believe that we can make a bett...
Why Do I Choose AngularJS?
Reusable Component
||
html + css + js
By HenryTao – http://henrytao.me
Why Do I Choose AngularJS?
By HenryTao – http://henrytao.me
PROBLEM!
!
.component .element{!
/* To-do */!
}!
!
$(‘.compone...
Why Do I Choose AngularJS?
By HenryTao – http://henrytao.me
meteor.com
derbyjs.com
polymer-project.org
angularjs.org
backb...
Why Do I Choose AngularJS?
By HenryTao – http://henrytao.me
Testing
people often don’t know what they don’t know
people do...
AngularJS – The BEST World.
By HenryTao – http://henrytao.me
I found you
AngularJS – The BEST World.
2 ways data binding
By HenryTao – http://henrytao.me
directive
testing
template
routing
servic...
AngularJS – The BEST World.
By HenryTao – http://henrytao.me
BASIC 2 WAYS DATA BINDING!
!
// html!
Hello {{username}}!!
!
...
AngularJS – The BEST World.
By HenryTao – http://henrytao.me
BASIC DIRECTIVE!
!
// html element!
<a href=‘http://angularjs...
AngularJS – The DARK World.
By HenryTao – http://henrytao.me
AngularJS – The DARK World.
Over 2.500 data-binding
By HenryTao – http://henrytao.me
e2e testing with angular ui-router
to...
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
Sooooo Excited
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
Over 2.500 data-binding
Use pagination
Never bi...
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
e2e testing with angular ui-router
Angular ui-r...
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
too many template file
Use angular template cac...
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
DOM
Inject $window & $document
Add jQuery befor...
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
authentication
Use $httpProvider.responseInterc...
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
reusable code
Code structure
Use ng-boilerplate...
AngularJS Best Practices – The 3rd World.
MVC vs Module
By HenryTao – http://henrytao.me
AngularJS Best Practices – The 3rd World.
By HenryTao – http://henrytao.me
seo
pre-render with phantomjs
	
  
http://local...
By HenryTao – http://henrytao.me
è Re-structure ng-boilerplate.
è Use module approach.
è Communicate through API.
è Fr...
What’s Next With Angular 2.0?
¡  Airbnb – Rendr
Backbone in apps in the browser and Node.
¡  jQuery on nodejs with cheer...
Resources & References
¡  AngularJS style guide (see here)
¡  Best practices from father of AngularJS (see here)
¡  ng-...
Resources & References
By HenryTao – http://henrytao.me
Resources & References
By HenryTao – http://henrytao.me
Upcoming SlideShare
Loading in …5
×

Angular Best Practices v2

8,319 views

Published on

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

Published in: Technology
3 Comments
23 Likes
Statistics
Notes
No Downloads
Views
Total views
8,319
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
370
Comments
3
Likes
23
Embeds 0
No embeds

No notes for slide

Angular Best Practices v2

  1. 1. Best Practices From Nutshell To Awesome Thing By HenryTao – http://henrytao.me – version 2.0
  2. 2. henrytao-me/angular-best-practices By HenryTao – http://henrytao.me Github
  3. 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. 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. 5. Why Do I Choose AngularJS? Reusable Component || html + css + js By HenryTao – http://henrytao.me
  6. 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. 7. Why Do I Choose AngularJS? By HenryTao – http://henrytao.me meteor.com derbyjs.com polymer-project.org angularjs.org backbonejs.org
  8. 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. 9. AngularJS – The BEST World. By HenryTao – http://henrytao.me I found you
  10. 10. AngularJS – The BEST World. 2 ways data binding By HenryTao – http://henrytao.me directive testing template routing service factory dependency injection SPAs
  11. 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. 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. 13. AngularJS – The DARK World. By HenryTao – http://henrytao.me
  14. 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. 15. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me Sooooo Excited
  16. 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. 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. 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. 19. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me DOM Inject $window & $document Add jQuery before Angular
  20. 20. AngularJS Best Practices – The 3rd World. By HenryTao – http://henrytao.me authentication Use $httpProvider.responseInterceptors
  21. 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. 22. AngularJS Best Practices – The 3rd World. MVC vs Module By HenryTao – http://henrytao.me
  23. 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. 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. 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. 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. 27. Resources & References By HenryTao – http://henrytao.me
  28. 28. Resources & References By HenryTao – http://henrytao.me

×