Code Organization in Large AngularJS and JavaScript Applications — Cliff Meyers

Brian Ford The AngularJS documentation is great for getting started and for looking up specific API calls. However, it doesn't really tell you how to organize and manage your app as it grows to tens or hundreds of thousands of lines of code. I've collected here some of my observations and best practices for how to manage your sprawling application. First we'll take a look at organization, then move on to some tips on improving performance, and conclude with a brief summary on tools, servers, and build processes. Don't Write a Huge App The best advice about huge apps is not to make them. Organization Probably the biggest question with large apps is where to put all of that code. Directories This is the typical folder layout that I recommend: As you add more files, it might make sense to create subdirectories to further organize controllers and services. Files Each file should have one "thing" in it, where a "thing" is a controller, directive, filter, or service. Modules Dependencies Directives Services

egghead.io: Learn AngularJS with Tutorial Videos & Training @eggheadio AngularJS Tutorial: Learn to Rapidly Build Real-time Web Apps with Firebase In response to the feedback from our original tutorial, we decided to take the new version of the tutorial in an entirely new direction. Mucking around in backend code doesn't belong in an AngularJS tutorial, and we've found an elegant solution to this problem. This tutorial will guide you through the process of creating a frontend-only application. Our intention with this tutorial is to provide the AngularJS community with instructions on how to design and build an ultra-modern application. The application you are building will go beyond basic use of AngularJS, and we will attempt to explore as much of the framework as possible. The tutorial is a living thing, a work in progress. Source code and PDF eBook This tutorial is provided to you free of charge on the site. We encourage you to purchase the source code and PDF of this tutorial to help fund our continued efforts in building more material and features for Thinkster. This application is built on a stack that defies convention.

Leveling Up in Angular - HTML5DevConf in Angular Alicia Liu @aliciatweet Sr Software Engineer, Lift Enjoyment of Angular AngularRULEZ I'm doingit wrong! services,modules promises,directives,... Module Organization Module By Feature Supports asynchronous loading of modules in the future From Angular Developer Guide Service vs Factory var Mario = function() { this.size = 'small'; }; Mario.prototype.eatMushroom = function() { this.size = 'large'; }; myModule.service('marioService', Mario); // calls new Mario() Provider Asynchronous Events // in some controller $scope. What happens if the data doesn't load? Promises $q var deferred = $q.defer(); svc.getMario = function() { return deferred.promise; }; ... deferred.resolve(data); ... deferred.reject(error); svc.getMario().then( doStuffWithMario, displayError ); Using Promises Chaining $q.all $q.when Interceptors Resolve myModule.controller('CharacterCtrl', function($scope, character) { $scope.character = character; }); Why Write Custom Directives? Restrict Scope

How do I "think in AngularJS" if I have a jQuery background