Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

Page History: Angular Notes

Compare Page Revisions



« Older Revision - Back to Page History - Current Revision


Page Revision: Mon, Sep 09, 2013, 11:34 AM


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


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

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.