Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The following is extended the suggestions from @Eduard Gamonal to make variables/methods of angular service or factory, so it is considered a trick to remember syntax of angular service or factory.</p> <p>Trick to memorize syntax of "service" or "factory" in Angular</p> <p>Service is tied with "<strong>service</strong>" key word; "<strong>this</strong>" key word to make function instance members public; and "<strong>=</strong>" to make assignments to "function instance members". </p> <p>Factory is tied with "<strong>factory</strong>" key word; "<strong>return</strong>" keyword to make/return a public object; and "<strong>:</strong>" to all key/value pairs assignments.</p> <p>Details.</p> <p><em><strong>Service</em></strong> deals with "variables" (or "instance members"), and to make them "public", I use the "<strong>this</strong>" keyword, and because a service deals with "<em>variables</em>" (or "instance members") to-be-public we use "<strong>=</strong>" after a "variable" name. </p> <p>"getLogs" can be treated like a "public variable" or "instance member", and written (in "assignment" meaning) like <strong>this</strong>.getLogs <strong>=</strong> function() {...}. </p> <p>And the whole service is defined with the "<strong>service</strong>" key word:</p> <pre><code>&lt;script type="text/javascript"&gt; var myApp = angular.module("ListLogsModule", []); myApp.service('ListLogsService', function () { this.getLogs = function () { var logs = [ {"LogId":5405,"RecordedDate" : "2012-11-19T14:22:02.247", "Event" : "Log On"}, {"LogId":5416,"RecordedDate" : "2012-11-19T14:55:02.247", "Event" : "Log Out"} ]; return logs; } }); myApp.controller('ListLogsCtrl', function ($scope, ListLogsService) { $scope.logs = ListLogsService.getLogs(); }); &lt;/script&gt; </code></pre> <p><em><strong>Factory</em></strong> deals with a returned "object" and to make them "public", I use the "<strong>return</strong>" keyword, and because a factory deals with "<em>object</em>" to-look-like-JSON-object I use "<strong>:</strong>" after each "property" name inside { } of the "return" statement.</p> <p>"getLogs" can be treated like a property (or key) of the returned JSON object, and is written (in "key/value" pair) like getLogs <strong>:</strong> function() {...}. </p> <p>And the whole factory is defined with the "<strong>factory</strong>" key word:</p> <pre><code>&lt;script type="text/javascript"&gt; var myApp = angular.module("ListLogsModule", []); myApp.factory('ListLogsFactory', function () { return { getLogs: function () { return[ {"LogId":5405,"RecordedDate" : "2012-11-19T14:22:02.247", "Event" : "Log On"}, {"LogId":5416,"RecordedDate" : "2012-11-19T14:55:02.247", "Event" : "Log Out"} ]; } } }); myApp.controller('ListLogsCtrl', function ($scope, ListLogsFactory) { $scope.logs = ListLogsFactory.getLogs(); }); &lt;/script&gt; </code></pre> <p>In summary: To memorize syntax of "service" or "factory" in Angular</p> <p>Service is tied with "<strong>service</strong>" key word; "<strong>this</strong>" key word to make function instance members public; and "<strong>=</strong>" to make assignments to "function instance members". </p> <p>Factory is tied with "<strong>factory</strong>" key word; "<strong>return</strong>" keyword to make/return a public object; and "<strong>:</strong>" to all key/value pairs assignments.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload