1
- # angular-seed — the seed for AngularJS apps
1
+ # ` angular-seed ` — the seed for AngularJS apps
2
2
3
- This project is an application skeleton for a typical [ AngularJS] ( http://angularjs.org/ ) web app.
4
- You can use it to quickly bootstrap your angular webapp projects and dev environment for these
5
- projects.
3
+ This project is an application skeleton for a typical [ AngularJS] [ angularjs ] web app. You can use it
4
+ to quickly bootstrap your angular webapp projects and dev environment for these projects.
6
5
7
6
The seed contains a sample AngularJS application and is preconfigured to install the Angular
8
7
framework and a bunch of development and testing tools for instant web development gratification.
@@ -12,40 +11,39 @@ The seed app doesn't do much, just shows how to wire two controllers and views t
12
11
13
12
## Getting Started
14
13
15
- To get you started you can simply clone the angular-seed repository and install the dependencies:
14
+ To get you started you can simply clone the ` angular-seed ` repository and install the dependencies:
16
15
17
16
### Prerequisites
18
17
19
- You need git to clone the angular-seed repository. You can get git from
20
- [ http://git-scm.com/ ] ( http://git-scm.com/ ) .
18
+ You need git to clone the ` angular-seed ` repository. You can get git from [ here] [ git ] .
21
19
22
- We also use a number of node .js tools to initialize and test angular-seed. You must have node .js and
23
- its package manager (npm) installed. You can get them from [ http://nodejs.org/ ] ( http://nodejs.org/ ) .
20
+ We also use a number of Node .js tools to initialize and test ` angular-seed ` . You must have Node .js
21
+ and its package manager (npm) installed. You can get them from [ here ] [ node ] .
24
22
25
- ### Clone angular-seed
23
+ ### Clone ` angular-seed `
26
24
27
- Clone the angular-seed repository using [ git] [ git ] :
25
+ Clone the ` angular-seed ` repository using git:
28
26
29
27
```
30
28
git clone https://github.com/angular/angular-seed.git
31
29
cd angular-seed
32
30
```
33
31
34
- If you just want to start a new project without the angular-seed commit history then you can do:
32
+ If you just want to start a new project without the ` angular-seed ` commit history then you can do:
35
33
36
- ``` bash
34
+ ```
37
35
git clone --depth=1 https://github.com/angular/angular-seed.git <your-project-name>
38
36
```
39
37
40
38
The ` depth=1 ` tells git to only pull down one commit worth of historical data.
41
39
42
40
### Install Dependencies
43
41
44
- We have two kinds of dependencies in this project: tools and angular framework code. The tools help
42
+ We have two kinds of dependencies in this project: tools and Angular framework code. The tools help
45
43
us manage and test the application.
46
44
47
- * We get the tools we depend upon via ` npm ` , the [ node package manager] [ npm ] .
48
- * We get the angular code via ` bower ` , a [ client-side code package manager] [ bower ] .
45
+ * We get the tools we depend upon via ` npm ` , the [ Node package manager] [ npm ] .
46
+ * We get the Angular code via ` bower ` , a [ client-side code package manager] [ bower ] .
49
47
* In order to run the end-to-end tests, you will also need to have the
50
48
[ Java Development Kit (JDK)] [ jdk ] installed on your machine. Check out the section on
51
49
[ end-to-end testing] ( #e2e-testing ) for more info.
@@ -56,27 +54,26 @@ We have preconfigured `npm` to automatically run `bower` so we can simply do:
56
54
npm install
57
55
```
58
56
59
- Behind the scenes this will also call ` bower install ` . You should find that you have two new
60
- folders in your project.
57
+ Behind the scenes this will also call ` bower install ` . After that, you should find out that you have
58
+ two new folders in your project.
61
59
62
60
* ` node_modules ` - contains the npm packages for the tools we need
63
- * ` app/bower_components ` - contains the angular framework files
61
+ * ` app/bower_components ` - contains the Angular framework files
64
62
65
63
* Note that the ` bower_components ` folder would normally be installed in the root folder but
66
- angular-seed changes this location through the ` .bowerrc ` file. Putting it in the app folder makes
67
- it easier to serve the files by a webserver .*
64
+ ` angular-seed ` changes this location through the ` .bowerrc ` file. Putting it in the ` app ` folder
65
+ makes it easier to serve the files by a web server .*
68
66
69
67
### Run the Application
70
68
71
- We have preconfigured the project with a simple development web server. The simplest way to start
69
+ We have preconfigured the project with a simple development web server. The simplest way to start
72
70
this server is:
73
71
74
72
```
75
73
npm start
76
74
```
77
75
78
- Now browse to the app at ` http://localhost:8000/index.html ` .
79
-
76
+ Now browse to the app at [ ` localhost:8000/index.html ` ] [ local-app-url ] .
80
77
81
78
82
79
## Directory Layout
@@ -109,32 +106,34 @@ e2e-tests/ --> end-to-end tests
109
106
scenarios.js --> end-to-end scenarios to be run by Protractor
110
107
```
111
108
109
+
112
110
## Testing
113
111
114
- There are two kinds of tests in the angular-seed application: Unit tests and end-to-end tests.
112
+ There are two kinds of tests in the ` angular-seed ` application: Unit tests and end-to-end tests.
115
113
116
114
### Running Unit Tests
117
115
118
- The angular-seed app comes preconfigured with unit tests. These are written in
119
- [ Jasmine] [ jasmine ] , which we run with the [ Karma Test Runner] [ karma ] . We provide a Karma
120
- configuration file to run them.
116
+ The ` angular-seed ` app comes preconfigured with unit tests. These are written in [ Jasmine] [ jasmine ] ,
117
+ which we run with the [ Karma] [ karma ] test runner. We provide a Karma configuration file to run them.
121
118
122
- * the configuration is found at ` karma.conf.js `
123
- * the unit tests are found next to the code they are testing and are named as ` ..._test.js ` .
119
+ * The configuration is found at ` karma.conf.js ` .
120
+ * The unit tests are found next to the code they are testing and have an ` _test.js ` suffix (e.g.
121
+ ` view1_test.js ` ).
124
122
125
123
The easiest way to run the unit tests is to use the supplied npm script:
126
124
127
125
```
128
126
npm test
129
127
```
130
128
131
- This script will start the Karma test runner to execute the unit tests. Moreover, Karma will sit and
132
- watch the source and test files for changes and then re-run the tests whenever any of them change.
129
+ This script will start the Karma test runner to execute the unit tests. Moreover, Karma will start
130
+ watching the source and test files for changes and then re-run the tests whenever any of them
131
+ changes.
133
132
This is the recommended strategy; if your unit tests are being run every time you save a file then
134
133
you receive instant feedback on any changes that break the expected code functionality.
135
134
136
- You can also ask Karma to do a single run of the tests and then exit. This is useful if you want to
137
- check that a particular version of the code is operating as expected. The project contains a
135
+ You can also ask Karma to do a single run of the tests and then exit. This is useful if you want to
136
+ check that a particular version of the code is operating as expected. The project contains a
138
137
predefined script to do this:
139
138
140
139
```
@@ -145,32 +144,34 @@ npm run test-single-run
145
144
<a name =" e2e-testing " ></a >
146
145
### Running End-to-End Tests
147
146
148
- The angular-seed app comes with end-to-end tests, again written in [ Jasmine] [ jasmine ] . These tests
149
- are run with the [ Protractor] [ protractor ] End-to-End test runner. It uses native events and has
147
+ The ` angular-seed ` app comes with end-to-end tests, again written in [ Jasmine] [ jasmine ] . These tests
148
+ are run with the [ Protractor] [ protractor ] End-to-End test runner. It uses native events and has
150
149
special features for Angular applications.
151
150
152
- * the configuration is found at ` e2e-tests/protractor-conf.js `
153
- * the end-to-end tests are found in ` e2e-tests/scenarios.js `
151
+ * The configuration is found at ` e2e-tests/protractor-conf.js ` .
152
+ * The end-to-end tests are found in ` e2e-tests/scenarios.js ` .
154
153
155
154
Protractor simulates interaction with our web app and verifies that the application responds
156
- correctly. Therefore, our web server needs to be serving up the application, so that Protractor
157
- can interact with it.
155
+ correctly. Therefore, our web server needs to be serving up the application, so that Protractor can
156
+ interact with it.
157
+
158
+ ** Before starting Protractor, open a separate terminal window and run:**
158
159
159
160
```
160
161
npm start
161
162
```
162
163
163
- In addition, since Protractor is built upon WebDriver we need to install this. The angular-seed
164
- project comes with a predefined script to do this:
164
+ In addition, since Protractor is built upon WebDriver, we need to ensure that it is installed and
165
+ up-to-date. The ` angular-seed ` project is configured to do this automatically before running the
166
+ end-to-end tests, so you don't need to worry about it. If you want to manually update the WebDriver,
167
+ you can run:
165
168
166
169
```
167
170
npm run update-webdriver
168
171
```
169
172
170
- This will download and install the latest version of the stand-alone WebDriver tool.
171
-
172
- Once you have ensured that the development web server hosting our application is up and running
173
- and WebDriver is updated, you can run the end-to-end tests using the supplied npm script:
173
+ Once you have ensured that the development web server hosting our application is up and running, you
174
+ can run the end-to-end tests using the supplied npm script:
174
175
175
176
```
176
177
npm run protractor
@@ -180,8 +181,8 @@ This script will execute the end-to-end tests against the application being host
180
181
development server.
181
182
182
183
** Note:**
183
- Under the hood, Protractor uses the [ Selenium Standalone Server] [ selenium ] , which in turn requires
184
- the [ Java Development Kit (JDK)] [ jdk ] to be installed on your local machine. Check this by running
184
+ Under the hood, Protractor uses the [ Selenium Standalone Server] [ selenium ] , which in turn requires
185
+ the [ Java Development Kit (JDK)] [ jdk ] to be installed on your local machine. Check this by running
185
186
` java -version ` from the command line.
186
187
187
188
If JDK is not already installed, you can download it [ here] [ jdk-download ] .
@@ -204,91 +205,91 @@ respectively.
204
205
205
206
## Loading Angular Asynchronously
206
207
207
- The angular-seed project supports loading the framework and application scripts asynchronously. The
208
- special ` index-async.html ` is designed to support this style of loading. For it to work you must
209
- inject a piece of Angular JavaScript into the HTML page. The project has a predefined script to help
210
- do this.
208
+ The ` angular-seed ` project supports loading the framework and application scripts asynchronously.
209
+ The special ` index-async.html ` is designed to support this style of loading. For it to work you must
210
+ inject a piece of Angular JavaScript into the HTML page. The project has a predefined script to help
211
+ do this:
211
212
212
213
```
213
214
npm run update-index-async
214
215
```
215
216
216
- This will copy the contents of the ` angular-loader.js ` library file into the ` index-async.html ` page.
217
- You can run this every time you update the version of Angular that you are using.
217
+ This will copy the contents of the ` angular-loader.js ` library file into the ` index-async.html `
218
+ page. You can run this every time you update the version of Angular that you are using.
218
219
219
220
220
221
## Serving the Application Files
221
222
222
- While angular is client-side-only technology and it's possible to create angular webapps that
223
- don't require a backend server at all, we recommend serving the project files using a local
224
- webserver during development to avoid issues with security restrictions (sandbox) in browsers. The
225
- sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr,
226
- etc to function properly when an html page is opened via ` file:// ` scheme instead of ` http:// ` .
227
-
223
+ While Angular is client-side-only technology and it is possible to create Angular web apps that
224
+ do not require a backend server at all, we recommend serving the project files using a local
225
+ web server during development to avoid issues with security restrictions (sandbox) in browsers. The
226
+ sandbox implementation varies between browsers, but quite often prevents things like cookies, XHR,
227
+ etc to function properly when an HTML page is opened via the ` file:// ` scheme instead of ` http:// ` .
228
228
229
229
### Running the App during Development
230
230
231
- The angular-seed project comes preconfigured with a local development webserver. It is a node .js
232
- tool called [ http-server] [ http-server ] . You can start this webserver with ` npm start ` but you may choose to
233
- install the tool globally:
231
+ The ` angular-seed ` project comes preconfigured with a local development web server. It is a Node .js
232
+ tool called [ http-server] [ http-server ] . You can start this web server with ` npm start ` , but you may
233
+ choose to install the tool globally:
234
234
235
235
```
236
236
sudo npm install -g http-server
237
237
```
238
238
239
- Then you can start your own development web server to serve static files from a folder by
240
- running:
239
+ Then you can start your own development web server to serve static files from a folder by running:
241
240
242
241
```
243
242
http-server -a localhost -p 8000
244
243
```
245
244
246
- Alternatively, you can choose to configure your own webserver , such as apache or nginx . Just
245
+ Alternatively, you can choose to configure your own web server , such as Apache or Nginx . Just
247
246
configure your server to serve the files under the ` app/ ` directory.
248
247
249
-
250
248
### Running the App in Production
251
249
252
250
This really depends on how complex your app is and the overall infrastructure of your system, but
253
- the general rule is that all you need in production are all the files under the ` app/ ` directory.
251
+ the general rule is that all you need in production are the files under the ` app/ ` directory.
254
252
Everything else should be omitted.
255
253
256
- Angular apps are really just a bunch of static html, css and js files that just need to be hosted
254
+ Angular apps are really just a bunch of static HTML, CSS and JavaScript files that need to be hosted
257
255
somewhere they can be accessed by browsers.
258
256
259
- If your Angular app is talking to the backend server via xhr or other means, you need to figure
260
- out what is the best way to host the static files to comply with the same origin policy if
261
- applicable. Usually this is done by hosting the files by the backend server or through
262
- reverse-proxying the backend server(s) and webserver (s).
257
+ If your Angular app is talking to the backend server via XHR or other means, you need to figure out
258
+ what is the best way to host the static files to comply with the same origin policy if applicable.
259
+ Usually this is done by hosting the files by the backend server or through reverse-proxying the
260
+ backend server(s) and web server (s).
263
261
264
262
265
263
## Continuous Integration
266
264
267
265
### Travis CI
268
266
269
- [ Travis CI] [ travis ] is a continuous integration service, which can monitor GitHub for new commits
270
- to your repository and execute scripts such as building the app or running tests. The angular-seed
267
+ [ Travis CI] [ travis ] is a continuous integration service, which can monitor GitHub for new commits to
268
+ your repository and execute scripts such as building the app or running tests. The ` angular-seed `
271
269
project contains a Travis configuration file, ` .travis.yml ` , which will cause Travis to run your
272
270
tests when you push to GitHub.
273
271
274
- You will need to enable the integration between Travis and GitHub. See the Travis website for more
275
- instruction on how to do this.
276
-
272
+ You will need to enable the integration between Travis and GitHub. See the
273
+ [ Travis website] [ travis-docs ] for instructions on how to do this.
277
274
278
275
279
276
## Contact
280
277
281
- For more information on AngularJS please check out http://angularjs.org/
278
+ For more information on AngularJS please check out [ angularjs.org] [ angularjs ] .
279
+
282
280
283
- [ bower ] : http://bower.io
284
- [ git ] : http://git-scm.com/
285
- [ http-server ] : https://github.com/nodeapps/http-server
286
- [ jasmine ] : https://jasmine.github.io
287
- [ jdk ] : https://en.wikipedia.org/wiki/Java_Development_Kit
288
- [ jdk-download ] : http://www.oracle.com/technetwork/java/javase/downloads/index.html
289
- [ karma ] : https://karma-runner.github.io
290
- [ node ] : https://nodejs.org
281
+ [ angularjs ] : https://angularjs.org/
282
+ [ bower ] : http://bower.io/
283
+ [ git ] : https://git-scm.com/
284
+ [ http-server ] : https://github.com/indexzero/http-server
285
+ [ jasmine ] : https://jasmine.github.io/
286
+ [ jdk ] : https://wikipedia.org/wiki/Java_Development_Kit
287
+ [ jdk-download ] : http://www.oracle.com/technetwork/java/javase/downloads
288
+ [ karma ] : https://karma-runner.github.io/
289
+ [ local-app-url ] : http://localhost:8000/index.html
290
+ [ node ] : https://nodejs.org/
291
291
[ npm ] : https://www.npmjs.org/
292
- [ protractor ] : https ://github.com/angular/protractor
292
+ [ protractor ] : http ://www.protractortest.org/
293
293
[ selenium ] : http://docs.seleniumhq.org/
294
294
[ travis ] : https://travis-ci.org/
295
+ [ travis-docs ] : https://docs.travis-ci.com/user/getting-started
0 commit comments