More Related Content Similar to Modular Angular JS (20) Modular Angular JS33. NEVER
SEPARATE FILES IN FOLDER BY THEIR TYPE
| js/
| | controllers.js
| | directives.js
| | services.js
| | app.js
| index.html
34. ALWAYS
SEPARATE FILES IN THEIR COMPONENT NAME FOLDER
| src/
| | todo/
| | | todo.html
| | | todo.module.js
| | | todo.config.js
| | | todo.controller.js
| | | todo.controller.spec.js
| | tasks/
| | | tasks.module.js
| | | tasks.service.js
| | | tasks.service.spec.js
| | | tasks.directive.js
| | | tasks.directive.spec.js
| | app.module.js
| | index.html
36. NEVER
SEPARATE MODULES BY THEIR TYPE
controllers.js
angular.module('app.controllers')
.controller('TodoController', ['$scope', function($scope) {
$scope.tasks = [];
$scope.addTask = function() { // ... };
$scope.remaining = function() { // ... };
$scope.archive = function() { // ... };
}])
.controller('OtherController', ['$scope', function($scope) {
// ...
}]);
37. ALWAYS
SEPARATE MODULES BY THEIR COMPONENT NAME
todo/todo.controller.js
angular.module('todo')
.controller('TodoController', ['$scope', function($scope) {
$scope.tasks = [];
$scope.addTask = function() { // ... };
$scope.remaining = function() { // ... };
$scope.archive = function() { // ... };
}]);
app.module.js
angular.module('app', [
'todo'
]);
39. NEVER
LET CONTROLLERS DO A LOT OF OTHERTHINGS
(LIKE PERSIST)
controllers.js
angular.module('app.controllers')
.controller('TodoController', ['$scope', function($scope) {
$scope.tasks = [];
$scope.addTask = function() { // ... };
$scope.remaining = function() { // ... };
$scope.archive = function() { // ... };
}])
...
50. HOW TO USE A COMPONENT?
Download or Install the component
bower install save angularmaterial
Load the component files
<link href="angularmaterial.min.css" rel="stylesheet">
<script src="angularmaterial.min.js">
Set as a module dependency
angular.module('app', [
'ngMaterial'
]);
52. WHAT DO I HAVE TO DO TO BUILD MY OWN COMPONENT?