23
Building Massive Angular Apps Gordon Bockus @gordonk66 [email protected]

Building Massive AngularJS Apps

Embed Size (px)

DESCRIPTION

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

Citation preview

2. Who is this guy?Client side lead at Spanning Cloud AppsBuilding web applications for over 10 yearsDojo, jQuery, ExtJS, Angular, NodeSelf proclaimed build nerdSelfies are OK with facial hair 3. What are We talking about?Building a large enterprise class web applicationHow to enable your team to succeedToolsTechniques (angular) 4. Building Massive SPAs ishardTeamComplexityTechnologyTime 5. The GoodsTools: Assume we are starting with nothingThe Hard StuffBuildAngular specifics 6. The Hard StuffCoding standardsDocumentationSpacingNaming conventionsCode syntax (some)Code Review TechniqueFormatter (A guy can dream) 7. Standards Examples 8. Yeomanhttp://yeoman.ioScaffolding appsGeneratorsBuildPackage Manager 9. The POWER! 10. YeomanExcellent startDeveloper friendlyProduction readyNot perfect 11. angular-generatornode serverlive reloadcompass/sassngmin/minificationbower injection (wiredep)jshintTest ready (karma/jasmine) 12. CustomizationsConfigure jshintgrunticon (ie8)live reload httpssupportUpdate npmmodules 13. html2jshttps://github.com/karlgoldstein/grunt-html2jshtml2jstemplates live with codecompiles at build timepopulates Angular $templateCache 14. ngAnnotatehttps://github.com/olov/ng-annotate/karlgoldstein/grunt-html2jsReplacesdeprecated ngminAnnotatesAngular Core + 15. Angular (about time)Additional modulesui-routerui-bootstrapangular-lodashangular-moment 16. StatesFlexible routingNested viewComplex but worth itui-routerhttps://github.com/angular-ui/ui-router 17. ui-bootstraphttp://angular-ui.github.io/bootstrap/Bootstrap 3 directivesCustom buildsno JQuery required 18. Code OrganizationOrganize code by statePull out common code to a standalone locationservicesdirectivesfiltershttpinterceptorsmodules/grouping modules 19. Other ConceptsServices vs FactoriesPromisesresolve in routingDirectivesTesting 20. Final ThoughtsLearn your toolsKeep up with releasesAdjust as necessaryEnhance oftenTest! 21. THANKS!Now go build something! 22. Repo for sample application:https://github.com/gbockus/yeomanAngularAppLinks to tools used in to the update can be found inthe application.