BE CONSISTENT!
1. Structure Patterns
1) By Type:
app/
controllers/
services/
views/
factories/
directives/
2)By Feature
app/
dashboard/
layout/
people/
services/
Speakers/
Tracks/
Sessions
3) Somewhere in the middle
LIFT
2. Data Patterns
Separation of Concerns
Don't put data access in the Controller
3. Decorate the $exceptionHandler Service
4. Modularity
Each module can be app, service or widgets
Modules are containers
Defining a Module:
set a module
var app = angular.module('myApp',[]);
get a module
var app = angular.module('myApp');
inject dependencies into a Module (like a wrapper ):
angular.module('app',[
'app.avengers',
'app.dashboard',
'app.widgets',
'app.layout'
]);
Categories of Dependencies:
angular.module('app',[
//Angular Modules
'ngRoute',
//Custome Modules
'common',
// 3rd Party Modules
'ui.bootstrap',
'breeze.angular'
]);
avengers ngAnimate
ModularApp dashboard core ngRoute
widgets common
layout ui-bootstrap
5. Controller pattern
Controller is like a constructor
angular
.module('app.avengers')
.controller('Avenger',Avenger);
// "Classic" $scope syntax
function Avenger($scope){
$scope.name = 'Captain America';
$scope.prop = 'shield';
}
// "Controller As" syntax
function Avenger(){
var vm = this;
vm.name = 'Captain America';
vm.prop = 'shield';
}
6. Clean Code
IIFE(Immediately Invoked Function Expression)
7. Dependency Injection
Safely Minify Dependencies
angular
.module('app.dashboard')
.controller('Dashboard',Dashboard);
function Dashboard(common, dataservice){
// when minified, the common and dataservice may become a and b, which won't be found
}
Safe way 1: Inline Dependency Array
angular
.module('app.dashboard')
.controller('Dashboard',['common','dataservice',Dashboard]);
function Dashboard(common, dataservice){
}
Safe way 2: $inject
angular
.module('app.dashboard')
.controller('Dashboard',Dashboard);
Dashboard.$inject = ['$q','dataservice','logger'];
function Dashboard($q, dataservice, logger){
}
8. Tasks and Annotations
Grunt: Configuration over code; File based
Gulp: Code over configuration; Stream based
9. Breeze, Local Storage, Validation, Karma, Gulp and More
