Angular Notes

This page is a Draft. Its content is not complete and might contain errors.


Precautions


Getting Started

1. Reference the Angular JS file as your first <script> reference

<script type="text/javascript" src="/Scripts/angular.js"></script>
<script type="text/javascript" src="/Scripts/angular-resource.js"></script>
<script type="text/javascript" src="/Scripts/OtherScripts.js"></script>

2. Add JavaScript code to define your Angular app

var MyApp = angular.module('MyAppName', ['ngResource']);

3. Add the data-ng-app attribute to "register" your app within the HTML code

<html data-ng-app='MyAppName'>

Angular Variables



Modules

TODO

Bindings

TODO

Dependency Injection

TODO

Routes

When the user access a URL (e.g., clicking a link), routes define which controller is used to respond to the request.

App.config(['$routeProvider', function($routes) {

  $route.when('/',{
    templateUrl : '/templates/home.html',
    controller : HomeCtrl
  });

  $route.when('/register',{
    templateUrl : '/templates/register.html',
    controller : RegisterCtrl
  });

  $routes.otherwise({
    redirectTo : '/'
  });

}]);

Controllers and Scope

Coding a Controller

var SomeCtrl = function($scope, $http, $location) {
  $scope.value = 'some value';
};

Registering a Controller

The following snippet shows how to register a controller in HTML code. Controller registration can also be done via routes.

<div data-ng-controller="SomeCtrl">...</div>

Services

//define the service
App.factory('myService', ['myOtherService', '$location', function(myOtherService, $location) {
  return function(input) {
    //do something with the input using the myOtherService or the $location objects.
    return input;
  };
}]);

//use the service within the controller
var HomeCtrl = function($scope, myService) {
  var input = '123';
  input = myService(input);
};
HomeCtrl.$inject = ['$scope','myService'];

//use the service a directive
App.directive('myDirective', ['myService',function(myService) {
  return {
    link: function($scope, element, attrs) {
      var input = '123';
      input = myService(input);
    }
  }
}]);

Models

Defining a model...

App.factory('ModelName', ['$resource', function($resource) {
  $resource.url('/path/to/model/controller/:id',{
    id : '@id', //this binds the ID of the model to the URL param
  },{
    query : { method : 'GET', isArray : true }, //this can also be called index or all
    save : { method : 'PUT' }, //this is the update method
    create : { method : 'POST' },
    destroy : { method : 'DELETE' }
  }
}]);

Using a model...
//list all the records on the page
var results = ModelName.query({ search : 'all' }, onSuccessFn, onFailureFn);

//get a specific record
//onSuccessFn and onFailureFn are optional callback functions where you can further customize the response
var record = ModelName.get({ id : 123 }, onSuccessFn, onFailureFn); 

//create a new ModelName record
var record = new ModelName();

//update that record
record.someAttr = 'someValue';
record.$save();

//or if you prefer to submit your data in a different way
ModelName.save({
    id : record.id
  },{
  somePostObject : {
    attr1 : 'value',
    attr2 : 'value2'
  }
});

//destroy the record (and include a token)
record.destroy({ token : record.token });

Directives

Directives are used not to change program logic, but to support UI construction. When angular finds an HTML tag that contains data-my-directive as an attribute (with or without a value) then it will download the template and execute the link function.

Defining a directive within JavaScript...

angular.directive('myDirective',function($compile) {
  return {
    //templateUrl is optional. The contents of this template can be downloaded and constructed into the element

    templateUrl : '/path/to/some/template.html', 

    //whether or not to replace the inner data within the element
    replace : true, 

    //this is where your magic happens
    link : function($scope, $element, attributes) { 
      $scope.title = '...';
    }
  };
});

Filters

Filters can be embedded directly into binding operations to tweak the data in some way.

Defining a filter...
App.filter('myUppercase', function(data) {
  for(var i=0; i < data.length; i++) {
    data[i].title = data[i].title.toUpperCase();
  }
  return data;
});

Using a filter in HTML...
<div data-ng-repeat="for record in records | filter:myUppercase">...</div>

Using a filter in JavaScript code...
//be sure to inject the $filter object
var values = ['one','two','three'];
values = $filter('myUppercase')(values);