Compare Page Revisions
« Older Revision - Back to Page History - Newer Revision »
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
<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>
var MyApp = angular.module('MyAppName', ['ngResource']);
data-ng-app
<html data-ng-app='MyAppName'>
$compile
$element
$first
$filter
$http
$index
$last
$location
$middle
$$phase
$q
$resource
$rootScope
$routes
$routeProvider
ngRoute
$scope
$apply
$broadcast
$digest
$emit
$inject
$on
$onFailure
$onReady
$prepareForReady
$watch
$whenReady
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 : '/' }); }]);
var SomeCtrl = function($scope, $http, $location) { $scope.value = 'some value'; };
<div data-ng-controller="SomeCtrl">...</div>
//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); } } }]);
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' } } }]);
//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 });
data-my-directive
link
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 = '...'; } }; });
ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.