Ryan Tucker
@rctucker88
// File1.js
angular
.module('app', ['ngRoute'])
.controller('SomeController', SomeController)
.factory('someFactory', someFactory);
function SomeController() { }
function someFactory() { }
All in one file
// File1.js
angular
.module('app')
.controller('SomeController', SomeController);
function SomeController() { }
// File2.js
angular
.module('app')
.factory('someFactory', someFactory);
function someFactory() { }
Split into multiple files
// module.js
angular
.module('app', ['ngRoute']);
// logger.js
angular
.module('app')
.factory('logger', logger);
// logger function is added as a global variable
function logger() { }
// storage.js
angular
.module('app')
.factory('storage', storage);
// storage function is added as a global variable
function storage() { }
Avoid This
// logger.js
(function() {
'use strict';
angular
.module('app')
.factory('logger', logger);
function logger() { }
})();
// storage.js
(function() {
'use strict';
angular
.module('app')
.factory('storage', storage);
function storage() { }
})();
This is better, no globals left behind!
Use a unique naming convention for your module names! Separators are commonly used like app.users and app.login.
angular.module('myApp', ['app.users', 'app.login', 'app.items']);
Don't use a variable for a module. Since you only have one component per file anyway this shouldn't be an issue!
/* Avoid this! */
var app = angular.module('app', [
'ngAnimate',
'ngRoute',
'app.shared',
'app.dashboard'
]);
Use a chaining getter syntax instead.
angular
.module('app')
.controller('SomeController', SomeController);
function SomeController() { }
Use named functioned over anonymous functions.
// dashboard.js
angular
.module('app')
.controller('Dashboard', Dashboard);
function Dashboard() { }
// logger.js
angular
.module('app')
.factory('logger', logger);
function logger() { }
Why? More readable code, easier to debug, and reduces nested callbacks.
Benefits in both the view and the controller.
<!-- avoid -->
<div ng-controller="Customer">
{{ name }}
</div>
<!-- recommended -->
<div ng-controller="Customer as customer">
{{ customer.name }}
</div>
Capture the 'this' variable with a consistent variable name such as vm.
/* recommended */
function Customer() {
var vm = this;
vm.name = {};
vm.sendMessage = function() { };
}
/* avoid */
function Customer() {
this.name = {};
this.sendMessage = function() { };
}
/* avoid */
function Customer($scope) {
$scope.name = {};
$scope.sendMessage = function() { };
}
/* Recommended */
function Customer() {
this.name = {};
this.sendMessage = function() { };
}
/* recommended */
function Sessions() {
var vm = this;
vm.gotoSession = gotoSession;
vm.refresh = refresh;
vm.search = search;
vm.sessions = [];
vm.title = 'Sessions';
////////////
function gotoSession() {
/* */
}
function refresh() {
/* */
}
function search() {
/* */
}
Delegate your logic to a service where possible!
Design a controller for a view, and try not to reuse it for other views.
Assign the controller in your router and keep the logic out of the template!
// route-config.js
angular
.module('app')
.config(config);
function config($routeProvider) {
$routeProvider
.when('/avengers', {
templateUrl: 'avengers.html',
controller: 'Avengers',
controllerAs: 'vm'
});
}
<!-- avengers.html -->
<div>
</div>
Big shout-out to John Papa <@John_Papa> who organizes a large Angular style guide which this presentation is based on.
Find the style guide at https://github.com/johnpapa/angularjs-styleguide.
Feel free to ask me questions on Twitter: @RCTucker88