Angular.js: Difference between revisions

From Adam Colton
Jump to navigation Jump to search
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..."
 
Line 46: Line 46:
== Directives ==
== Directives ==


app.directive("name", function(){
  app.directive("name", function(){
  return {
    return {
    restrict: "E",
      restrict: "E",
    requires: "someDirective",
      requires: "someDirective",
    scope: {}, //or something else
      scope: {}, //or something else
    template: "some html",
      template: "some html",
    link: function(scope, element, attrs) {
      link: function(scope, element, attrs) {
      modify element
        modify element
    }
      }
  };
    };
})
  })
/*
 
will replace <name></name> with template
*/
restrict:
restrict:
  A: attribute, this is the default
* A: attribute, this is the default
  E: element
* E: element
  C: class
* C: class
  M: comment (<!-- directive:name -->) not used much
* 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){
    return function(scope, element, attrs, controller){
    //now have access to element and scope
      //now have access to element and scope
    //we have access to our attr via attrs.name
      //we have access to our attr via attrs.name
    //if the attr is a function, scope.$apply(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)
   }
 })