Angular Notes

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

Table of Contents [Hide/Show]

   Precautions
   Getting Started
   Angular Variables
   Modules
   Bindings
   Dependency Injection
   Routes
   Controllers and Scope
      Coding a Controller
      Registering a Controller
   Services
   Models
   Directives
   Filters

Precautions¶

Using Angular can hurt SEO rankings - unless special code is written to avoid this pitfall
Avoid using Angular if the client is running IE7 or older. Using IE8 may require special handling for custom tags.

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¶

$compile — service
$element
$first — used with loops?
$filter — provides access to filter defined in your Angular app
$http
$index — loop index
$last — used with loops?
$location
$middle — used with loops?
$$phase
$q — service
$resource
$rootScope
$routes
$routeProvider — used for configuring routes. Requires the ngRoute module.
$scope

$apply — $scope method
$broadcast — $scope method
$digest
$emit — $scope method
$inject — Controller method
$on — $scope method
$onFailure — $scope method
$onReady — $scope method
$prepareForReady — $scope method
$watch — $scope method
$whenReady — $scope method

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