Angular.js
Creating an App
var app = angular.module('appName', []); // the [] is for dependencies
Then, in the html
ng-app="app"
Creating a controller
function ControllerName($scope, ...services) {
$scope.something = data;
$scope.method = function(stuff){
return otherStuff;
};
}
or
app.controller("name", function(){});
Service
app.factory('ServiceName', function(){
return serviceData;
})
Filter
app.filter('filterName', function(){
return function(intput){
...stuff...goes...here...
};
})
Filters are applied with |
Built in array filters
- filter:string
- orderby:attr
- first:n
Built in test filters
- uppercase
- lowercase
Directives
app.directive("name", function(){
return {
restrict: "E",
requires: "someDirective",
scope: {}, //or something else
template: "some html",
link: function(scope, element, attrs) {
modify element
}
};
}) /* will replace <name></name> with template
- /
restrict:
A: attribute, this is the default E: element C: class M: comment () not used much
or, the short form for A app.directive("name", function(){
return function(scope, element, attrs, controller){
//now have access to element and scope
//we have access to our attr via attrs.name
//if the attr is a function, scope.$apply(attrs.name)
}
})