Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Massive Angular 
Apps 
Gordon Bockus 
@gordonk66 
gbockus@spanning.com
Who is this guy? 
Client side lead at Spanning Cloud Apps 
Building web applications for over 10 years 
Dojo, jQuery, ExtJ...
What are We talking about? 
Building a large enterprise class web application 
How to enable your team to succeed 
Tools 
...
Building Massive SPAs is 
hard 
Team 
Complexity 
Technology 
Time
The Goods 
Tools: Assume we are starting with nothing 
The Hard Stuff 
Build 
Angular specifics
The Hard Stuff 
Coding standards 
Documentation 
Spacing 
Naming conventions 
Code syntax (some) 
Code Review Technique 
F...
Standards Examples
Yeoman 
http://yeoman.io 
Scaffolding apps 
Generators 
Build 
Package Manager
The POWER!
Yeoman 
Excellent start 
Developer friendly 
Production ready 
Not perfect
angular-generator 
node server 
live reload 
compass/sass 
ngmin/minification 
bower injection (wiredep) 
jshint 
Test rea...
Customizations 
Configure jshint 
grunticon (ie8) 
live reload https 
support 
Update npm 
modules
html2js 
https://github.com/karlgoldstein/grunt-html2js 
html2js 
templates live with code 
compiles at build time 
popula...
ngAnnotate 
https://github.com/olov/ng-annotate/karlgoldstein/grunt-html2js 
Replaces 
deprecated ngmin 
Annotates 
Angula...
Angular (about time) 
Additional modules 
ui-router 
ui-bootstrap 
angular-lodash 
angular-moment
States 
Flexible routing 
Nested view 
Complex but worth it 
ui-router 
https://github.com/angular-ui/ui-router
ui-bootstrap 
http://angular-ui.github.io/bootstrap/ 
Bootstrap 3 directives 
Custom builds 
no JQuery required
Code Organization 
Organize code by state 
Pull out common code to a standalone location 
services 
directives 
filters 
h...
Other Concepts 
Services vs Factories 
Promises 
resolve in routing 
Directives 
Testing
Final Thoughts 
Learn your tools 
Keep up with releases 
Adjust as necessary 
Enhance often 
Test!
THANKS 
! 
Now go build something!
Repo for sample application: 
https://github.com/gbockus/yeomanAngularApp 
Links to tools used in to the update can be fou...
Building Massive AngularJS Apps
Upcoming SlideShare
Loading in …5
×

Building Massive AngularJS Apps

1,799 views

Published on

Angular project setup and best practices for building large scale JavaScript apps.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building Massive AngularJS Apps

  1. 1. Building Massive Angular Apps Gordon Bockus @gordonk66 gbockus@spanning.com
  2. 2. Who is this guy? Client side lead at Spanning Cloud Apps Building web applications for over 10 years Dojo, jQuery, ExtJS, Angular, Node Self proclaimed build nerd Selfies are OK with facial hair
  3. 3. What are We talking about? Building a large enterprise class web application How to enable your team to succeed Tools Techniques (angular)
  4. 4. Building Massive SPAs is hard Team Complexity Technology Time
  5. 5. The Goods Tools: Assume we are starting with nothing The Hard Stuff Build Angular specifics
  6. 6. The Hard Stuff Coding standards Documentation Spacing Naming conventions Code syntax (some) Code Review Technique Formatter (A guy can dream)
  7. 7. Standards Examples
  8. 8. Yeoman http://yeoman.io Scaffolding apps Generators Build Package Manager
  9. 9. The POWER!
  10. 10. Yeoman Excellent start Developer friendly Production ready Not perfect
  11. 11. angular-generator node server live reload compass/sass ngmin/minification bower injection (wiredep) jshint Test ready (karma/jasmine)
  12. 12. Customizations Configure jshint grunticon (ie8) live reload https support Update npm modules
  13. 13. html2js https://github.com/karlgoldstein/grunt-html2js html2js templates live with code compiles at build time populates Angular $templateCache
  14. 14. ngAnnotate https://github.com/olov/ng-annotate/karlgoldstein/grunt-html2js Replaces deprecated ngmin Annotates Angular Core +
  15. 15. Angular (about time) Additional modules ui-router ui-bootstrap angular-lodash angular-moment
  16. 16. States Flexible routing Nested view Complex but worth it ui-router https://github.com/angular-ui/ui-router
  17. 17. ui-bootstrap http://angular-ui.github.io/bootstrap/ Bootstrap 3 directives Custom builds no JQuery required
  18. 18. Code Organization Organize code by state Pull out common code to a standalone location services directives filters http interceptors modules/grouping modules
  19. 19. Other Concepts Services vs Factories Promises resolve in routing Directives Testing
  20. 20. Final Thoughts Learn your tools Keep up with releases Adjust as necessary Enhance often Test!
  21. 21. THANKS ! Now go build something!
  22. 22. Repo for sample application: https://github.com/gbockus/yeomanAngularApp Links to tools used in to the update can be found in the application.

×