Skip to content

Commit 27fa6d9

Browse files
committed
docs(readme): Updated docs to reflect new version
1 parent 8b29c20 commit 27fa6d9

File tree

1 file changed

+63
-211
lines changed

1 file changed

+63
-211
lines changed

readme.md

Lines changed: 63 additions & 211 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
# AngularJS + Express Full Stack Generator
22

3-
A generator for AngularJS, integrated with an Express `server.js` for full stack development.
3+
A MEAN stack generator for Yeoman, Angular Fullstack scaffolds applications with MongoDB, Express, AngularJS, Node, and a lot of customization.
44

55
Featuring:
66

77
* Express server integrated with grunt tasks
88
* Livereload of client and server files
9+
* Support for Jade and CoffeeScript
910
* Easy deployment workflow.
10-
* Optional mongoDB integration
11-
* Support for jade templates
11+
* MongoDB integration
12+
* Passport integration for adding user accounts
13+
14+
## Example project
15+
16+
Generated by saying yes to all questions: http://fullstack-demo.herokuapp.com/.
17+
18+
> Note: Demo is running on heroku free instance, so you will likely have to refresh for it to load.
19+
20+
Have a look at the source code: https://github.com/DaftMonk/fullstack-demo
1221

1322
## Usage
1423

@@ -27,14 +36,14 @@ Run `yo angular-fullstack`, optionally passing an app name:
2736
yo angular-fullstack [app-name]
2837
```
2938

30-
### Express
39+
## Express
3140

3241
Launch your express server in development mode.
3342
```
3443
grunt serve
3544
```
3645

37-
Launch your express server in production mode, uses the minified/optimized production app folder.
46+
Launch your express server in production mode, uses the minified/optimized production folder.
3847
```
3948
grunt serve:dist
4049
```
@@ -43,11 +52,23 @@ grunt serve:dist
4352

4453
`grunt serve` will watch client files in `app/`, and server files inside `lib/`, restarting the Express server when a change is detected.
4554

46-
### Deployment
55+
## Deployment
56+
57+
To generate a dist folder that can easily be deployed use:
58+
59+
grunt
4760

48-
While deployment should be easy enough with the `grunt dist` build, we provide an extremely simplifed deployment process for heroku.
61+
This will run unit tests, jshint, concatenate and minify scripts/css, compress images, add css vendor prefixes, and finally copy all files to a tidy dist folder.
4962

50-
`yo angular-fullstack:deploy heroku` for generating a deployment ready folder for [heroku.com](http://heroku.com/) from your project files.
63+
Alternatively to skip tests and jshint, use:
64+
65+
grunt build
66+
67+
### Heroku Deployment
68+
69+
We provide an extremely simplifed deployment process for heroku.
70+
71+
`yo angular-fullstack:deploy heroku` generates a `dist` folder that is deployment ready for [heroku.com](http://heroku.com/).
5172

5273
**Create and Deploy an app in 4 steps**
5374

@@ -57,173 +78,56 @@ While deployment should be easy enough with the `grunt dist` build, we provide a
5778

5879
3. `yo angular-fullstack:deploy heroku`
5980

60-
4. `cd heroku && git push heroku master`
81+
4. `cd dist && git push heroku master`
6182

6283
5. Optional (if using mongoDB) `heroku addons:add mongohq`
6384

6485
That's it! Your app should be live and shareable. Type `heroku open` to view it.
6586

6687
## Generators
6788

68-
Available generators:
69-
70-
* [angular-fullstack](#app) (aka [angular-fullstack:app](#app))
71-
* [angular-fullstack:controller](#controller)
72-
* [angular-fullstack:directive](#directive)
73-
* [angular-fullstack:filter](#filter)
74-
* [angular-fullstack:route](#route)
75-
* [angular-fullstack:service](#service)
76-
* [angular-fullstack:provider](#service)
77-
* [angular-fullstack:factory](#service)
78-
* [angular-fullstack:value](#service)
79-
* [angular-fullstack:constant](#service)
80-
* [angular-fullstack:decorator](#decorator)
81-
* [angular-fullstack:view](#view)
82-
* [angular-fullstack:deploy](#deploy)
83-
84-
**Note: Generators are to be run from the root directory of your app.**
85-
86-
### App
87-
Sets up a new AngularJS app, generating all the boilerplate you need to get started. The app generator also optionally installs Twitter Bootstrap and additional AngularJS modules, such as angular-resource (installed by default).
88-
89-
Example:
90-
```bash
91-
yo angular-fullstack
92-
```
93-
94-
### Deploy
95-
Initalizes a heroku app and generates a `heroku` folder which is ready to push to heroku.
96-
97-
Example:
98-
```bash
99-
yo angular-fullstack:deploy heroku
100-
```
101-
102-
After app modifications run:
103-
```bash
104-
grunt heroku
105-
```
106-
then commit and push the heroku folder.
107-
108-
### Route
109-
Generates a controller and view, and configures a route in `app/scripts/app.js` connecting them.
110-
111-
Example:
112-
```bash
113-
yo angular-fullstack:route myroute
114-
```
115-
116-
Produces `app/scripts/controllers/myroute.js`:
117-
```javascript
118-
angular.module('myMod').controller('MyrouteCtrl', function ($scope) {
119-
// ...
120-
});
121-
```
122-
123-
Produces `app/views/myroute.html`:
124-
```html
125-
<p>This is the myroute view</p>
126-
```
127-
128-
### Controller
129-
Generates a controller in `app/scripts/controllers`.
130-
131-
Example:
132-
```bash
133-
yo angular-fullstack:controller user
134-
```
135-
136-
Produces `app/scripts/controllers/user.js`:
137-
```javascript
138-
angular.module('myMod').controller('UserCtrl', function ($scope) {
139-
// ...
140-
});
141-
```
142-
### Directive
143-
Generates a directive in `app/scripts/directives`.
89+
Available Angular generators:
14490

145-
Example:
146-
```bash
147-
yo angular-fullstack:directive myDirective
148-
```
91+
* [angular-fullstack](#app) (aka [angular-fullstack:app](https://github.com/yeoman/generator-angular#app))
92+
* [angular-fullstack:controller](https://github.com/yeoman/generator-angular#controller)
93+
* [angular-fullstack:directive](https://github.com/yeoman/generator-angular#directive)
94+
* [angular-fullstack:filter](https://github.com/yeoman/generator-angular#filter)
95+
* [angular-fullstack:route](https://github.com/yeoman/generator-angular#route)
96+
* [angular-fullstack:service](https://github.com/yeoman/generator-angular#service)
97+
* [angular-fullstack:provider](https://github.com/yeoman/generator-angular#service)
98+
* [angular-fullstack:factory](https://github.com/yeoman/generator-angular#service)
99+
* [angular-fullstack:value](https://github.com/yeoman/generator-angular#service)
100+
* [angular-fullstack:constant](https://github.com/yeoman/generator-angular#service)
101+
* [angular-fullstack:decorator](https://github.com/yeoman/generator-angular#decorator)
102+
* [angular-fullstack:view](https://github.com/yeoman/generator-angular#view)
149103

150-
Produces `app/scripts/directives/myDirective.js`:
151-
```javascript
152-
angular.module('myMod').directive('myDirective', function () {
153-
return {
154-
template: '<div></div>',
155-
restrict: 'E',
156-
link: function postLink(scope, element, attrs) {
157-
element.text('this is the myDirective directive');
158-
}
159-
};
160-
});
161-
```
104+
Available Fullstack generators:
162105

163-
### Filter
164-
Generates a filter in `app/scripts/filters`.
106+
* [angular-fullstack:deploy](#deploy)
165107

166-
Example:
167-
```bash
168-
yo angular-fullstack:filter myFilter
169-
```
108+
**Note: Generators are to be run from the root directory of your app.**
170109

171-
Produces `app/scripts/filters/myFilter.js`:
172-
```javascript
173-
angular.module('myMod').filter('myFilter', function () {
174-
return function (input) {
175-
return 'myFilter filter:' + input;
176-
};
177-
});
178-
```
110+
All of the **generator-angular** client side generators are available, but aliased using `angular-fullstack`.
179111

180-
### View
181-
Generates an HTML view file in `app/views`.
112+
They are aliased to ensure the files they generate are added to the correct folders and that the `index.(html/jade)` is updated properly.
182113

183-
Example:
184-
```bash
185-
yo angular-fullstack:view user
186-
```
114+
Read more on them from the offical [generator angular documentation][1]
187115

188-
Produces `app/views/user.html`:
189-
```html
190-
<p>This is the user view</p>
191-
```
116+
## Fullstack specfic generators
192117

193-
### Service
194-
Generates an AngularJS service.
118+
### Deploy
119+
Initalizes a heroku app and generates a `dist` folder which is ready to push to heroku.
195120

196121
Example:
197122
```bash
198-
yo angular-fullstack:service myService
199-
```
200-
201-
Produces `app/scripts/services/myService.js`:
202-
```javascript
203-
angular.module('myMod').service('myService', function () {
204-
// ...
205-
});
123+
yo angular-fullstack:deploy heroku
206124
```
207125

208-
You can also do `yo angular-fullstack:factory`, `yo angular-fullstack:provider`, `yo angular-fullstack:value`, and `yo angular-fullstack:constant` for other types of services.
209-
210-
### Decorator
211-
Generates an AngularJS service decorator.
212-
213-
Example:
126+
After app modifications run:
214127
```bash
215-
yo angular-fullstack:decorator serviceName
216-
```
217-
218-
Produces `app/scripts/decorators/serviceNameDecorator.js`:
219-
```javascript
220-
angular.module('myMod').config(function ($provide) {
221-
$provide.decorator('serviceName', function ($delegate) {
222-
// ...
223-
return $delegate;
224-
});
225-
});
128+
grunt build
226129
```
130+
then commit and push the dist folder.
227131

228132
## Options
229133
In general, these options can be applied to any generator, though they only affect generators that produce scripts.
@@ -256,52 +160,18 @@ angular.module('myMod')
256160

257161
A project can mix CoffeScript and JavaScript files.
258162

259-
To output JavaScript files, even if CoffeeScript files exist (the default is to output CoffeeScript files if
260-
the generator finds any in the project), use `--coffee=false`.
163+
To output JavaScript files, even if CoffeeScript files exist (the default is to output CoffeeScript files if the generator finds any in the project), use `--coffee=false`.
261164

262165
### Minification Safe
263166

264167
**Deprecated**
265168

266-
[Related Issue #452](https://github.com/yeoman/generator-angular/issues/452): This option is being removed in future versions of the generator. Initially it was needed as ngMin was not entirely stable. As it has matured, the need to keep separate versions of the script templates has led to extra complexity and maintenance of the generator. By removing these extra burdens, new features and bug fixes should be easier to implement. If you are dependent on this option, please take a look at ngMin and seriously consider implementing it in your own code. It will help reduce the amount of typing you have to do (and look through) as well as make your code cleaner to look at.
267-
268-
By default, generators produce unannotated code. Without annotations, AngularJS's DI system will break when minified. Typically, these annotations that make minification safe are added automatically at build-time, after application files are concatenated, but before they are minified. By providing the `--minsafe` option, the code generated will out-of-the-box be ready for minification. The trade-off is between amount of boilerplate, and build process complexity.
269-
270-
#### Example
271-
```bash
272-
yo angular-fullstack:controller user --minsafe
273-
```
274-
275-
Produces `app/controller/user.js`:
276-
```javascript
277-
angular.module('myMod').controller('UserCtrl', ['$scope', function ($scope) {
278-
// ...
279-
}]);
280-
```
281-
282-
#### Background
283-
Unannotated:
284-
```javascript
285-
angular.module('myMod').controller('MyCtrl', function ($scope, $http, myService) {
286-
// ...
287-
});
288-
```
289-
290-
Annotated:
291-
```javascript
292-
angular.module('myMod').controller('MyCtrl',
293-
['$scope', '$http', 'myService', function ($scope, $http, myService) {
294-
295-
// ...
296-
}]);
297-
```
298-
299-
The annotations are important because minified code will rename variables, making it impossible for AngularJS to infer module names based solely on function parameters.
169+
[Related Issue #452](https://github.com/yeoman/generator-angular/issues/452): This option is being removed in future versions of the generator.
300170

301-
The recommended build process uses `ngmin`, a tool that automatically adds these annotations. However, if you'd rather not use `ngmin`, you have to add these annotations manually yourself.
171+
By default, generators produce unannotated code. Without annotations, AngularJS's DI system will break when minified. [ngMin](https://github.com/btford/ngmin) is used to add these annotations before minification.
302172

303173
### Add to Index
304-
By default, new scripts are added to the index.html file. However, this may not always be suitable. Some use cases:
174+
By default, new scripts are added to the index file. However, this may not always be suitable. Some use cases:
305175

306176
* Manually added to the file
307177
* Auto-added by a 3rd party plugin
@@ -330,23 +200,6 @@ The following additional modules are available as components on bower, and insta
330200

331201
All of these can be updated with `bower update` as new versions of AngularJS are released.
332202

333-
## Configuration
334-
Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately.
335-
336-
### Output
337-
You can change the `app` directory by adding a `appPath` property to `bower.json`. For instance, if you wanted to easily integrate with Express.js, you could add the following:
338-
339-
```json
340-
{
341-
"name": "yo-test",
342-
"version": "0.0.0",
343-
...
344-
"appPath": "public"
345-
}
346-
347-
```
348-
This will cause Yeoman-generated client-side files to be placed in `public`.
349-
350203
## Testing
351204

352205
Running `grunt test` will run the unit tests with karma.
@@ -359,10 +212,9 @@ When submitting an issue, please follow the [guidelines](https://github.com/yeom
359212

360213
When submitting a PR, make sure that the commit messages match the [AngularJS conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/).
361214

362-
When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.
363-
364-
When submitting a new feature, add tests that cover the feature.
365-
366215
## License
367216

368217
[BSD license](http://opensource.org/licenses/bsd-license.php)
218+
219+
220+
[1]: https://github.com/yeoman/generator-angular#generators

0 commit comments

Comments
 (0)