Angular.js

From Adam Colton
Revision as of 22:00, 18 March 2014 by 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...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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)
 }

})