AngularJS

From sheep
Revision as of 21:41, 14 September 2021 by Martin (talk | contribs) (Created page with "= App = <pre> <html ng-app="notesApp"> angular.module('notesApp', []) </pre> = Services Object = <pre> function ItemObjectService() { var items = [ {id: 1, label : 'Ite...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

App

 <html ng-app="notesApp">
 
 angular.module('notesApp', [])

Services Object

function ItemObjectService() {
	var items = [
	{id: 1, label : 'Item 1'},...];
	this.list = function() {
		return items;
	};
	this.add = function(item) {
		items.push(item);
	};
}

.service('ItemObjectService', [ItemObjectService]
 // service - for classes OO style
);

Services functional

.factory('ItemService', function() {
	// factory - functional/return functoins/objects
        // no self/this as this is functional not object?
	var items = [
	{id: 1, label : 'Item 1'},...];
	return {
		list: function() {
			// Why not self.items or this.items?
			return items;
		},
		add: function(item) {
			items.push(item);
		}
	}
})

Promises

can chain:

$http.get("/foo").then(function(response) { }, function(errro) { } ).then(S, E).then(S, E)...

error handling propagates can put common error handling at the end.

$q service

  • var deferredObj = $q.defer() - create own promises
  • $q.deferredObj.resolve(successData) - resolve deferredObj with successData
  • $q.deferredObj.reject(failureData) - resolve deferredObj with failureData
  • $q.reject(rejectData) - from within a promise (success or failure) - continue to next error handler with rejectData

$http

can supply just url or put the url and method on the config and use $http(config)

  • $http.get(url, config)
  • $http.post(url, data, config)
  • $http.put(url, data, config)
  • $http(config)

config:

{
method
url
params [{key: 'value', key2: 'value2'}] // value objects converted to json
data {}
headers {'Content-Type': 'text/csv'}
xsrfHeaderName - cross site request forgery 
xsffCookieName - name of cookie in xsrf handshake
cache : true/false or cache object - if true angular caches responses
transformRequest: function(data, headers){} 
transformResponse: 
timeout: // time or promise object that on reject timesout the call
withCredentials: true/false
}