Skip to content

Commit 0c6ece8

Browse files
author
Gavin Davies
committed
Adds documentation
* New gulp task `gulp ngdocs` to generate documentation into build/docs * Add ngdoc-compliant documentation to source code * Add documentation to README.md * Add Markdown version docs in /docs directory
1 parent 152d772 commit 0c6ece8

File tree

7 files changed

+1602
-12
lines changed

7 files changed

+1602
-12
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.DS_Store
22
coverage/
3-
node_modules/
3+
node_modules/
4+
build/

.jscsrc

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
{
2-
"preset" : "google",
3-
"maximumLineLength" : 120,
4-
"disallowMultipleVarDecl" : false
2+
"preset": "google",
3+
"maximumLineLength": 120,
4+
"disallowMultipleVarDecl": false,
5+
"jsDoc": {
6+
"checkAnnotations": {
7+
"preset": "jsdoc3",
8+
"extra": {
9+
"ngdoc": "some",
10+
"methodOf": "some"
11+
}
12+
}
13+
}
514
}

Gulpfile.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,17 @@ var paths = {
2020
'src': 'src/**/*.js'
2121
};
2222

23+
gulp.task('ngdocs', [], function () {
24+
var gulpDocs = require('gulp-ngdocs');
25+
return gulp.src(paths.src)
26+
.pipe(gulpDocs.process({
27+
html5Mode: false,
28+
startPage: '/api',
29+
title: 'angular-model'
30+
}))
31+
.pipe(gulp.dest('./build/docs'));
32+
});
33+
2334
gulp.task('test', function(done) {
2435
new Server({
2536
configFile: __dirname + '/config/karma.conf.js',

README.md

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,292 @@
1111
**Angular Model** is a module that provides a simple way to bind client-side domain logic to JSON-based API resources.
1212

1313
By sticking to hypermedia design principles, Angular Model allows you to implement client applications that are cleanly decoupled from your server architecture.
14+
15+
## Basic Usage
16+
17+
In your AngularJS application, include the JavaScript:
18+
19+
```html
20+
// your specific paths may vary
21+
<script src="node_modules/radify/angular-model.js"></script>
22+
```
23+
24+
In your app configuration, state a dependency on [Angular Model](https://github.com/radify/angular-model):
25+
26+
```javascript
27+
angular.module('myApp', [
28+
'ur.model'
29+
]);
30+
```
31+
32+
## API documentation
33+
34+
The source code is documented using the ngdoc standard using [gulp-ngdocs](https://www.npmjs.com/package/gulp-ngdocs/). A markdown version is browseable at [/docs](/docs/api.md).
35+
36+
To generate documentation in HTML, run:
37+
38+
```bash
39+
gulp ngdocs
40+
```
41+
42+
This will output docs into the `build/docs` directory. Then, using a server like `ws`, start a local web server:
43+
44+
```bash
45+
cd build/docs
46+
npm install -g ws
47+
ws
48+
```
49+
50+
Then, you should be able to browse to http://localhost:8000 to view the API documentation for angular-model.
51+
52+
## Configuration
53+
54+
Here is a quick reference guide to all the configuration settings you can pass to the model() constructor, which is [documented in full in the API documentation](/docs/api.md). Each one is then described in detail later in this document, and in full in the source code in the `src` directory.
55+
56+
Setting | Type | Description
57+
------- | ---- | -----------
58+
url | string | API url that this model maps to
59+
defaults | object literal | Default values of attributes of instances of this model. Similar to properties in OOP.
60+
$instance | object literal | Instance methods available on each instance of this model.
61+
$class | object literal | Class methods available on this model. Similar to static methods in OOP.
62+
$collection | object literal | Collection
63+
64+
### Defaults
65+
66+
```javascript
67+
yourApp.config(function(modelProvider) {
68+
modelProvider.model('posts', {
69+
/**
70+
* @ngdoc object
71+
* @name yourApp.posts.defaults
72+
* @description
73+
* Configure the default attributes for instances of posts.
74+
*
75+
* This is similar to an OOP class, which has attributes with defaults, e.g. "public string foo = 'bar';"
76+
*/
77+
defaults: {
78+
name: '', // The name of the post
79+
published: false, // Whether the post has been released to the general public
80+
body: '', // Body text of this post
81+
logo: null, // The logo to show for this post
82+
author: 'John Doe'// Who wrote the post?
83+
}
84+
});
85+
});
86+
```
87+
88+
Here is an example of how the defaults get used:
89+
90+
```javascript
91+
var post = model('posts').create({});
92+
console.log(post.author);
93+
=> John Doe
94+
```
95+
96+
## Creating instances of your model
97+
98+
You can use angular-model ad-hoc to construct object instances:
99+
100+
```javascript
101+
// From defaults
102+
var post = model('posts').create({});
103+
104+
// Specifying fields
105+
var post = model('posts').create({
106+
name: 'some post',
107+
body: "body of some body, it's just some body, you know?",
108+
author: 'Steve Davis'
109+
});
110+
111+
console.log(post.author);
112+
=> Steve Davis
113+
```
114+
115+
## Instance Methods
116+
117+
angular-model instances have instance methods, similar to objects in the OOP world.
118+
119+
### Default instance methods
120+
121+
The following methods are available to every angular-model instance.
122+
123+
Function | Description
124+
------- | -----------
125+
$save | Persist an instance to the API
126+
$delete | Tell the API to delete an instance
127+
$reload | Refresh an instance of a model from the API
128+
$revert | Reset the model to the state it was originally in when you first got it from the API
129+
$exists | Reset the model to the state it was originally in when you first got it from the API
130+
$dirty | Returns boolean - true if a model instance has been modified, else false. Opposite of $pristine.
131+
$pristine | Returns boolean - true if a model instance has unmodified, else false. Opposite of $pristine.
132+
$related | Hydrates the $links property of the instance. $links are used so that an instance can tell the client which objects are related to it. For example, a `post` may have an `author` object related to it.
133+
$modified | Returns a map of the properties that have been changed
134+
$hasRelated | Does an instance have a relation of name `name`?
135+
136+
> You can see full details of these methods in the [API documentation](/docs/api.md).
137+
138+
### Custom instance methods
139+
140+
angular-model allows you to define instance methods on instances. This is similar to adding methods by extending a base class in the OOP world.
141+
142+
```javascript
143+
yourApp.config(function(modelProvider) {
144+
modelProvider.model('posts', {
145+
// ...
146+
147+
/**
148+
* @ngdoc object
149+
* @name yourApp.posts.$instance
150+
* @description
151+
* Instance methods that are callable on any individual instance of a post
152+
*/
153+
$instance: {
154+
/**
155+
* @ngdoc function
156+
* @name yourApp.posts.$logo
157+
* @description
158+
* If this post instance has a logo, return it, otherwise return a default string
159+
*
160+
* @return string Either the logo for this post, or a default logo
161+
*/
162+
$logo: function() {
163+
var hasLogo = !!this.logo;
164+
return hasLogo ? this.logo : '/logos/default.png';
165+
}
166+
}
167+
});
168+
});
169+
```
170+
171+
Example:
172+
173+
```javascript
174+
var post = model('Posts').create({
175+
logo: 'foo.png'
176+
});
177+
console.log(post.$logo());
178+
=> foo.png
179+
```
180+
181+
## Class methods
182+
183+
### Default class methods
184+
185+
The following methods are available statically to angular-model:
186+
187+
Function | Description
188+
-------- | -----------
189+
all | Make a request to the API, based on the `url` configuration setting
190+
first | Given a query, get the first model instance from the API
191+
create | Create a new instance of the model. Defaults come from the `defaults` configuration setting.
192+
193+
> You can see full details of these methods in the [API documentation](/docs/api.md).
194+
195+
### Custom class methods
196+
197+
angular-model allows you to define class methods on instances. This is similar to static methods in the OOP world.
198+
199+
```javascript
200+
yourApp.config(function(modelProvider) {
201+
modelProvider.model('posts', {
202+
// ...
203+
204+
/**
205+
* @ngdoc object
206+
* @name yourApp.posts.$class
207+
* @description
208+
* Class methods that are callable on the posts class, or any instance thereof. These
209+
* behave similarly to static methods in OOP languages.
210+
*/
211+
$class: {
212+
/**
213+
* @ngdoc function
214+
* @name yourApp.posts.roles
215+
* @description
216+
* Get an array of valid post types.
217+
*
218+
* @return array The valid types that a post can have. Array of strings
219+
*/
220+
types: function() {
221+
return ['announcement', 'article']
222+
}
223+
}
224+
});
225+
});
226+
```
227+
228+
Example:
229+
230+
```javascript
231+
console.log(model('Posts').types());
232+
=> ['announcement', 'article']
233+
```
234+
235+
## Collection methods
236+
237+
You can use collection methods as well, so you can deal with a bunch of instances together. This allows you to have powerful and expressive methods on collections.
238+
239+
### Default collection methods
240+
241+
The following methods are available statically to angular-model:
242+
243+
Function | Description
244+
-------- | -----------
245+
add | Saves the `object` with `data`
246+
remove | Find `index` and delete it from the API, then remove it from the collection
247+
248+
> You can see full details of these methods in the [API documentation](/docs/api.md).
249+
250+
### Custom collection methods
251+
252+
```javascript
253+
yourApp.config(function(modelProvider) {
254+
modelProvider.model('posts', {
255+
// ...
256+
257+
/**
258+
* @ngdoc object
259+
* @name yourApp.posts.$collection
260+
* @description
261+
* Methods that apply to a collection of posts together
262+
*/
263+
$collection: {
264+
/**
265+
* @ngdoc function
266+
* @name yourApp.posts.$hasArchived
267+
* @description
268+
* Operates on a collection of posts and determines whether any of them are archived
269+
*
270+
* @requires _ Lodash library is used to search the collection
271+
*
272+
* @return string Either the logo for this post, or a default logo
273+
*/
274+
$hasArchived: function() {
275+
return !angular.isUndefined(_.find(this, { archived: true }));
276+
}
277+
}
278+
});
279+
});
280+
```
281+
282+
Running unit tests
283+
--
284+
285+
Install the test runner with npm:
286+
287+
```bash
288+
npm install
289+
```
290+
291+
You can then run the tests with Grunt:
292+
293+
```bash
294+
grunt
295+
```
296+
297+
Tests can be found in the `spec` directory of this project.
298+
299+
Related
300+
--
301+
302+
You may wish to use [Angular Scaffold](https://github.com/radify/angular-scaffold/), which is is a collection of convenience wrappers around angular-model collections. Really helpful for building your AngularJS application with angular-model.

0 commit comments

Comments
 (0)