Angular.js: Difference between revisions
Jump to navigation
Jump to search
Adamcolton (talk | contribs) Created page with " == Creating an App == var app = angular.module('appName', []); // the [] is for dependencies Then, in the html ng-app="app" == Creating a controller == function Cont..." |
Adamcolton (talk | contribs) |
||
| Line 46: | Line 46: | ||
== Directives == | == Directives == | ||
app.directive("name", function(){ | app.directive("name", function(){ | ||
return { | |||
restrict: "E", | |||
requires: "someDirective", | |||
scope: {}, //or something else | |||
template: "some html", | |||
link: function(scope, element, attrs) { | |||
modify element | |||
} | |||
}; | |||
}) | }) | ||
restrict: | restrict: | ||
* A: attribute, this is the default | |||
* E: element | |||
* C: class | |||
* M: comment (<!-- directive:name -->) not used much | |||
or, the short form for A | or, the short form for A | ||
app.directive("name", function(){ | 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) | |||
} | |||
}) | }) | ||
[[Category:Code]] | [[Category:Code]] | ||
[[Category:Notes]] | [[Category:Notes]] | ||
Revision as of 22:01, 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)
}
})