You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
4
4
5
5
Featuring:
6
6
7
7
* Express server integrated with grunt tasks
8
8
* Livereload of client and server files
9
+
* Support for Jade and CoffeeScript
9
10
* 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
12
21
13
22
## Usage
14
23
@@ -27,14 +36,14 @@ Run `yo angular-fullstack`, optionally passing an app name:
27
36
yo angular-fullstack [app-name]
28
37
```
29
38
30
-
###Express
39
+
## Express
31
40
32
41
Launch your express server in development mode.
33
42
```
34
43
grunt serve
35
44
```
36
45
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.
38
47
```
39
48
grunt serve:dist
40
49
```
@@ -43,11 +52,23 @@ grunt serve:dist
43
52
44
53
`grunt serve` will watch client files in `app/`, and server files inside `lib/`, restarting the Express server when a change is detected.
45
54
46
-
### Deployment
55
+
## Deployment
56
+
57
+
To generate a dist folder that can easily be deployed use:
58
+
59
+
grunt
47
60
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.
49
62
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/).
51
72
52
73
**Create and Deploy an app in 4 steps**
53
74
@@ -57,173 +78,56 @@ While deployment should be easy enough with the `grunt dist` build, we provide a
57
78
58
79
3.`yo angular-fullstack:deploy heroku`
59
80
60
-
4.`cd heroku && git push heroku master`
81
+
4.`cd dist && git push heroku master`
61
82
62
83
5. Optional (if using mongoDB) `heroku addons:add mongohq`
63
84
64
85
That's it! Your app should be live and shareable. Type `heroku open` to view it.
**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`.
angular.module('myMod').directive('myDirective', function () {
153
-
return {
154
-
template:'<div></div>',
155
-
restrict:'E',
156
-
link:functionpostLink(scope, element, attrs) {
157
-
element.text('this is the myDirective directive');
158
-
}
159
-
};
160
-
});
161
-
```
104
+
Available Fullstack generators:
162
105
163
-
### Filter
164
-
Generates a filter in `app/scripts/filters`.
106
+
*[angular-fullstack:deploy](#deploy)
165
107
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.**
170
109
171
-
Produces `app/scripts/filters/myFilter.js`:
172
-
```javascript
173
-
angular.module('myMod').filter('myFilter', function () {
174
-
returnfunction (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`.
179
111
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.
182
113
183
-
Example:
184
-
```bash
185
-
yo angular-fullstack:view user
186
-
```
114
+
Read more on them from the offical [generator angular documentation][1]
187
115
188
-
Produces `app/views/user.html`:
189
-
```html
190
-
<p>This is the user view</p>
191
-
```
116
+
## Fullstack specfic generators
192
117
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.
195
120
196
121
Example:
197
122
```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
206
124
```
207
125
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.
$provide.decorator('serviceName', function ($delegate) {
222
-
// ...
223
-
return $delegate;
224
-
});
225
-
});
128
+
grunt build
226
129
```
130
+
then commit and push the dist folder.
227
131
228
132
## Options
229
133
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')
256
160
257
161
A project can mix CoffeScript and JavaScript files.
258
162
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`.
261
164
262
165
### Minification Safe
263
166
264
167
**Deprecated**
265
168
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.
300
170
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.
302
172
303
173
### 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:
305
175
306
176
* Manually added to the file
307
177
* Auto-added by a 3rd party plugin
@@ -330,23 +200,6 @@ The following additional modules are available as components on bower, and insta
330
200
331
201
All of these can be updated with `bower update` as new versions of AngularJS are released.
332
202
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
-
350
203
## Testing
351
204
352
205
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
359
212
360
213
When submitting a PR, make sure that the commit messages match the [AngularJS conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/).
361
214
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.
0 commit comments