-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathgenerator.html
245 lines (242 loc) · 15.4 KB
/
generator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
---
layout: default
title: Generator
---
<section class="row">
<div class="col-md-2">
<nav class="nav-docs" role="complementary">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#overview">Overview</a>
</li>
<li>
<a href="#getting-started">Getting Started</a>
</li>
<li>
<a href="#application">Application</a>
</li>
<li>
<a href="#crud-module">CRUD Module </a>
</li>
<li>
<a href="#angular-module">AngularJS Module</a>
</li>
<li>
<a href="#angular-route">AngularJS Route</a>
</li>
<li>
<a href="#angular-controller">AngularJS Controller</a>
</li>
<li>
<a href="#angular-view">AngularJS View</a>
</li>
<li>
<a href="#angular-service">AngularJS Service</a>
</li>
<li>
<a href="#angular-directive">AngularJS Directive</a>
</li>
<li>
<a href="#angular-filter">AngularJS Filter</a>
</li>
<li>
<a href="#angular-config">AngularJS Config</a>
</li>
<li>
<a href="#angular-test">AngularJS Test</a>
</li>
<li>
<a href="#express-model">Express Model</a>
</li>
<li>
<a href="#express-controller">Express Controller</a>
</li>
<li>
<a href="#express-routes">Express Routes</a>
</li>
<li>
<a href="#express-test">Express Test</a>
</li>
</ul>
</nav>
</div>
<section class="col-md-10 col-md-offset-2">
<i class="small text-muted">
Last updated: 03 Aug 2014.
</i>
<div class="inner-link-anchor" id="overview"></div>
<section class="page-header">
<div class="alert alert-danger" role="alert"><strong>The Yeoman Generator is currently not maintained.</strong>
It is based on an older version of MEAN.JS (0.4.2). This content is retained here for historical purposes and for anyone still using the generator on their projects.</div>
<h1 class="pull-left">Overview</h1>
<div class="pull-right hidden-xs hidden-sm">
<ul class="list-inline modules-social-links">
<li>
<a href="http://github.com/meanjs/generator-meanjs" class="btn btn-sm btn-success"> View On Github </a>
</li>
</ul>
</div>
<div class="clearfix"></div>
</section>
<section>
<p>One of the most frequently asked features from MEAN users is a way to scaffold their applications. As we looked for a way to help the community build and deploy production level MEAN applications, we decided to go with a <a href="http://yeoman.io/index.html">Yeoman</a> generator. Yeoman generators provide a powerful, easy to maintain, and open solution for scaffolding applications.</p>
<p>So, we set out to work on the features we thought every developer needs, and we are proud to present the official MEAN.JS Yeoman generator. It includes a set of simple tools you can use to make your MEAN application development easier and way more fun.</p>
</section>
<div class="inner-link-anchor" id="getting-started"></div>
<section class="page-header">
<h1>Getting Started</h1>
</section>
<section>
<p>Before you begin, make sure you have the <a href="https://github.com/yeoman/yo">yo scaffolding tool</a> installed (you may have already installed it as it is part of the Yeoman tool set). To globally install <i>yo</i>, you will need to use <i>npm</i>:</p><br>
<pre>$ npm install -g yo</pre><br>
<p class="alert alert-info">
<b><b>Note:</b></b> Your user might not have the permissions to install package globally, so use a super user or <b>sudo</b>.
</p>
<p>Once you have <i>yo</i> installed, you will need to install the MEAN.JS generator as well:</p><br>
<pre>$ npm install -g generator-meanjs</pre><br>
<p>You are now ready to get started with the MEAN.JS generator. The generator will help you create a MEAN.JS application, a CRUD module, Angular Module, and other AngularJS/Express entities. We’ll begin with the application generator.</p>
</section>
<div class="inner-link-anchor" id="application"></div>
<section class="page-header">
<h1>Application Generator</h1>
</section>
<section>
<p>The application generator will help you create a fresh copy of a MEAN.JS application in your working folder. To create your MEAN application, navigate to a new project folder, and then use <i>yo</i> to generate your application:</p><br>
<pre>$ yo meanjs</pre><br>
<p>The generator will ask you a few questions about your new application and will generate it for you. When the installation process is over, you will be able to use grunt to run your new MEAN application:</p><br>
<pre>$ grunt</pre><br>
<p>Now, the application generator does a great job scaffolding a whole application, but daily work requires us to repeat a lot of structured code. For this purpose we provided you with some sub-generators to help you speed up your development.</p>
</section>
<div class="inner-link-anchor" id="crud-module"></div>
<section class="page-header">
<h1>CRUD Module Sub-Generator</h1>
</section>
<section>
<p>The CRUD module sub-generator will help you create a new CRUD module, similar to the article sample provided with the project. To create a new CRUD module you will need to use <i>yo</i> again:</p><br>
<pre>$ yo meanjs:crud-module <module-name></pre><br>
<p>This will create both AngularJS and Express files supporting full CRUD functionality, and add the Karma and Mocha tests.</p>
<p class="alert alert-info"><b>Note:</b> don't forget to use your module name as an argument when calling the CRUD module sub-generator.</p>
</section>
<div class="inner-link-anchor" id="angular-module"></div>
<section class="page-header">
<h1>AngularJS Module Sub-Generator</h1>
</section>
<section>
<p>Another redundant task is creating a new AngularJS module structure. For this purpose you can use the Angular module sub-generator. It will create the proper folder structure for you and the module initialization file. Creating a new AngularJS module is simple:</p><br>
<pre>$ yo meanjs:angular-module <module-name></pre><br>
<p>The sub-generator will ask for more information about your folder structure, and will create the empty new AngularJS module. Now, to fill that new module with your business logic, we provided you with several AngularJS entities sub-generators.</p>
</section>
<div class="inner-link-anchor" id="angular-route"></div>
<section class="page-header">
<h1>AngularJS Route Sub-Generator</h1>
</section>
<section>
<p>To construct your module you will often need to create a new route. The AngularJS route sub-generator will help you create a view, controller and a proper route in your module <b>routes.js</b> file. If it can't find the module routes file the sub-generator will create one for you. Creating a new AngularJS route will involve executing this command:</p> <br>
<pre>$ yo meanjs:angular-route <route-name></pre><br>
<p>The sub-generator will ask for more information about your controller, view and routing URL, and will generate the appropriate files for you.</p>
</section>
<div class="inner-link-anchor" id="angular-controller"></div>
<section class="page-header">
<h1>AngularJS Controller Sub-Generator</h1>
</section>
<section>
<p>The AngularJS Controller sub-generator will create a new AngularJS controller in the specified module's <b>controllers</b> folder. To create a new AngularJS controller run <i>yo</i> again by using this command:</p><br>
<pre>$ yo meanjs:angular-controller <controller-name></pre><br>
<p>The sub-generator will ask you for the module name under which you would like to create your new controller, and will create a new AngularJS controller file in that module <b>controllers</b> folder and a controller test in the module <b>tests</b> folder.</p>
<p class="alert alert-info"><b>Don't forget!</b> This time you pass the controller name as an argument. </p>
</section>
<div class="inner-link-anchor" id="angular-view"></div>
<section class="page-header">
<h1>AngularJS View Sub-Generator</h1>
</section>
<section>
<p>Once you have your controller file ready, you may want to add a view that makes use of this controller. The AngularJS view sub-generator will create a new AngularJS view in the specified module's <b>views</b> folder, and will allow you to add a route definition for it. To create a new AngularJS view you will need to execute this command:</p><br>
<pre>$ yo meanjs:angular-view <view-name></pre><br>
<p>The sub-generator will ask you for the module name under which you would like to create your new view, and some additional routing information. It will then create a new view file in that module's <b>views</b> folder and add a routing state to the module <b>routes.js</b> file. If it can't find the module routes file it will create one for you.</p>
</section>
<div class="inner-link-anchor" id="angular-service"></div>
<section class="page-header">
<h1>AngularJS Service Sub-Generator</h1>
</section>
<section>
<p>The AngularJS service sub-generator will create a new AngularJS service in the specified module's <b>services</b> folder. To create a new AngularJS service you will need to execute this command:</p><br>
<pre>$ yo meanjs:angular-service <service-name></pre><br>
<p>The sub-generator will ask you for the module name under which you would like to create your new service, and will create a new AngularJS service file in that module's <b>services</b> folder.</p>
</section>
<div class="inner-link-anchor" id="angular-directive"></div>
<section class="page-header">
<h1>AngularJS Directive Sub-Generator</h1>
</section>
<section>
<p>The AngularJS directive sub-generator will create a new AngularJS directive in the specified module's <b>directives</b> folder. Creating a new AngularJS directive should already look familiar:</p><br>
<pre>$ yo meanjs:angular-directive <directive-name></pre><br>
<p>The sub-generator will ask you for the module name under which you would like to create your new directive, and will create a new AngularJS directive file in that module's <b>directives</b> folder.</p>
</section>
<div class="inner-link-anchor" id="angular-filter"></div>
<section class="page-header">
<h1>AngularJS Filter Sub-Generator</h1>
</section>
<section>
<p>The AngularJS filter sub-generator will create a new AngularJS filter in a specified module's <b>filters</b> folder. To create a new AngularJS filter you need to call yo again:</p><br>
<pre>$ yo meanjs:angular-filter <filter-name></pre><br>
<p>The sub-generator will ask you for the module name under which you would like to create your new filter, and will create a new AngularJS filter file in that module <b>filters</b> folder.</p>
</section>
<div class="inner-link-anchor" id="angular-config"></div>
<section class="page-header">
<h1>AngularJS Config Sub-Generator</h1>
</section>
<section>
<p>The AngularJS config sub-generator will create a new AngularJS config section in a specified module's <b>config</b> folder. To create a new AngularJS config file just call yo:</p><br>
<pre>$ yo meanjs:angular-config <config-name></pre><br>
<p>The sub-generator will ask you for the module name under which you would like to create your new config, and will create a new AngularJS config file in that module's <b>config</b> folder.</p>
</section>
<div class="inner-link-anchor" id="angular-test"></div>
<section class="page-header">
<h1>AngularJS Test Sub-Generator</h1>
</section>
<section>
<p>Your MEAN application comes pre-bundled with the Karma test runner and Jasmine testing framework. To test your AngularJS controllers you'll need to create a test file, which Karma will later use to run the tests. For this purpose we provided you with the AngularJS test sub-generator. Creating a new AngularJS test is effortless, just execute this command:</p><br>
<pre>$ yo meanjs:angular-tests <controller-name></pre><br>
<p>This will create a test file for your controller, and if the sub-generator doesn't find the specified controller file, it will create one for you.</p>
<p class="alert alert-info"><b>Don't forget!</b> You're suppose to pass the controller name as an argument. </p>
</section>
<div class="inner-link-anchor" id="express-model"></div>
<section class="page-header">
<h1>Express Model Sub-Generator</h1>
</section>
<section>
<p>Often you will find the need to just create a single Express model. The Express model sub-generator will help you with creating an Express model in the <b>app/models</b> folder. To create a new model just use <i>yo</i>:</p><br>
<pre>$ yo meanjs:express-model <model-name></pre><br>
<p>This will create a new empty model in the <b>app/models</b> folder and a new model test in the <b>app/tests</b> folder.</p>
<p class="alert alert-info"><b>Note:</b> It is recommended you avoid naming your model in plural form and use a singular form instead. i.e article and not articles</p>
</section>
<div class="inner-link-anchor" id="express-controller"></div>
<section class="page-header">
<h1>Express Controller Sub-Generator</h1>
</section>
<section>
<p>Another recurring task is creating an empty Express controller. The Express controller sub-generator will help you with creating an Express controller in the <b>app/controllers</b> folder. To create a new controller just use <i>yo</i>:</p><br>
<pre>$ yo meanjs:express-controller <controller-name></pre><br>
<p>This will create a new empty controller in the <b>app/controllers</b> folder.</p>
</section>
<div class="inner-link-anchor" id="express-routes"></div>
<section class="page-header">
<h1>Express Routes Sub-Generator</h1>
</section>
<section>
<p>To make HTTP requests to your controller methods you will need to use a routing file in the <b>app/routes</b> folder. The Express routes sub-generator will help you to add a new empty routes file. To create a new routes file execute this <i>yo</i> command:</p><br>
<pre>$ yo meanjs:express-route <route-name></pre><br>
<p>This will create a new empty route file in the <b>app/routes</b> folder.</p>
</section>
<div class="inner-link-anchor" id="express-test"></div>
<section class="page-header">
<h1>Express Test Sub-Generator</h1>
</section>
<section>
<p>Your MEAN application comes pre-bundled with the Mocha testing framework. To test your Express models you'll need to create a new test file, which Mocha will use while running tests. For this purpose we provided you with the Express test sub-generator. Creating a new Express test is easy, just execute this command:</p><br>
<pre>$ yo meanjs:express-test <model-name></pre><br>
<p>This will create a test file for your Express model, and if the sub-generator doesn't find the specified model, it will create one for you.</p>
<p class="alert alert-info"><b>Don't forget!</b> You're suppose to pass the model name as an argument. </p>
</section>
</section>
</section>