Angular.js: Difference between revisions
Jump to navigation
Jump to search
Adamcolton (talk | contribs) |
Adamcolton (talk | contribs) |
||
| Line 72: | Line 72: | ||
} | } | ||
}) | }) | ||
=== Isolate === | |||
scoope: { | |||
val: "@" | |||
} | |||
* @: attrs.name, gets the string value of the attribute | |||
* =: gets the object value | |||
* &: parent scope, or..., method on parent scope, maybe? | |||
[[Category:Code]] | [[Category:Code]] | ||
[[Category:Notes]] | [[Category:Notes]] | ||
Revision as of 22:34, 18 March 2014
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?