https://luminoussheep.net/mediawiki/index.php?action=history&feed=atom&title=AngularJS 2026-04-16T20:37:57Z Revision history for this page on the wiki MediaWiki 1.43.8 https://luminoussheep.net/mediawiki/index.php?title=AngularJS&diff=87&oldid=prev 2021-09-14T21:41:08Z

<p>Created page with &quot;= App = &lt;pre&gt; &lt;html ng-app=&quot;notesApp&quot;&gt; angular.module(&#039;notesApp&#039;, []) &lt;/pre&gt; = Services Object = &lt;pre&gt; function ItemObjectService() { var items = [ {id: 1, label : &#039;Ite...&quot;</p> <p><b>New page</b></p><div>= App =<br /> &lt;pre&gt;<br /> &lt;html ng-app=&quot;notesApp&quot;&gt;<br /> <br /> angular.module(&#039;notesApp&#039;, [])<br /> &lt;/pre&gt;<br /> <br /> = Services Object =<br /> &lt;pre&gt;<br /> function ItemObjectService() {<br /> var items = [<br /> {id: 1, label : &#039;Item 1&#039;},...];<br /> this.list = function() {<br /> return items;<br /> };<br /> this.add = function(item) {<br /> items.push(item);<br /> };<br /> }<br /> <br /> .service(&#039;ItemObjectService&#039;, [ItemObjectService]<br /> // service - for classes OO style<br /> );<br /> &lt;/pre&gt;<br /> = Services functional =<br /> &lt;pre&gt;<br /> .factory(&#039;ItemService&#039;, function() {<br /> // factory - functional/return functoins/objects<br /> // no self/this as this is functional not object?<br /> var items = [<br /> {id: 1, label : &#039;Item 1&#039;},...];<br /> return {<br /> list: function() {<br /> // Why not self.items or this.items?<br /> return items;<br /> },<br /> add: function(item) {<br /> items.push(item);<br /> }<br /> }<br /> })<br /> &lt;/pre&gt;<br /> <br /> = Promises =<br /> can chain:<br /> <br /> $http.get(&quot;/foo&quot;).then(function(response) { }, function(errro) { } ).then(S, E).then(S, E)...<br /> <br /> error handling propagates can put common error handling at the end.<br /> <br /> ==$q service==<br /> * var deferredObj = $q.defer() - create own promises<br /> * $q.deferredObj.resolve(&#039;&#039;successData&#039;&#039;) - resolve deferredObj with &#039;&#039;successData&#039;&#039;<br /> * $q.deferredObj.reject(&#039;&#039;failureData&#039;&#039;) - resolve deferredObj with &#039;&#039;failureData&#039;&#039;<br /> * $q.reject(&#039;&#039;rejectData&#039;&#039;) - from within a promise (success or failure) - continue to next error handler with &#039;&#039;rejectData&#039;&#039;<br /> <br /> = $http =<br /> can supply just url or put the url and method on the config and use $http(config)<br /> * $http.get(url, config)<br /> * $http.post(url, data, config)<br /> * $http.put(url, data, config)<br /> * $http(config)<br /> <br /> config:<br /> &lt;pre&gt;<br /> {<br /> method<br /> url<br /> params [{key: &#039;value&#039;, key2: &#039;value2&#039;}] // value objects converted to json<br /> data {}<br /> headers {&#039;Content-Type&#039;: &#039;text/csv&#039;}<br /> xsrfHeaderName - cross site request forgery <br /> xsffCookieName - name of cookie in xsrf handshake<br /> cache : true/false or cache object - if true angular caches responses<br /> transformRequest: function(data, headers){} <br /> transformResponse: <br /> timeout: // time or promise object that on reject timesout the call<br /> withCredentials: true/false<br /> }<br /> &lt;/pre&gt;</div>

Martin