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
}
};
})
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)
}
})
Isolate
scoope: {
val: "@"
}
- @: attrs.name, gets the string value of the attribute
- =: gets the object value
- &: parent scope, or..., method on parent scope, maybe?