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
It is inefficient to store the angular libraries inside this repository.
Moreover it is a pain to have to update them every time a new version of
Angular is released.
This commit changes the project to use bower to install the angular
dependencies.
In addition, simplify the structure of the project, all the support
scripts have either been replaced with well-defined npm modules (e.g
http-server) or have been moved to the package.json `script` property.
This means that we can now do all the management of the project with
three simple commands:
* `npm start` - start the development web server to host the application
* `npm test` - start the Karma test runner
* `npm run-script protractor` - start the Protractor end-to-end test runner
A nice feature of these scripts is that they run `npm install` first, thus
ensuring that the necessary npm dependencies are in place. Also there is
a `postinstall` script which runs `bower install` to ensure the angular
library dependencies are in place and updates the index-async.html
with the `angular-loader.min.js` content via the following sed script:
```
sed '/@@NG_LOADER@@/{
s/@@NG_LOADER@@//g
r bower_components/angular-loader/angular-loader.min.js
}' app/index-async.html.template > app/index-async.html
```
We have preconfigured the project with node.js to download the latest stable version
30
+
of AngularJS and install a simple development web server. The simplest way to do this is:
31
+
32
+
```
33
+
npm start
34
+
```
35
+
36
+
Now browse to the app at `http://localhost:8080/app/index.html`.
21
37
22
-
## How to use angular-seed
23
38
24
-
Clone the angular-seed repository and start hacking...
39
+
## The AngularJS Files
40
+
41
+
The AngularJS files are not stored inside the angular-seed project, we download them from the
42
+
[bower][bower] repository. [Bower][bower] is a [node.js][node] utility for managing client-side web
43
+
application dependencies. It is installed via npm.
44
+
45
+
**Running `npm start`, in the [Getting Started](#Getting-Started) section, automatically installed
46
+
[bower][bower] locally for us. You may prefer to have [bower][bower] installed globally**:
47
+
48
+
```
49
+
sudo npm install -g bower
50
+
```
51
+
52
+
Once we have bower installed, we can use it to get the Angular framework dependencies we need:
53
+
54
+
```
55
+
bower install
56
+
```
57
+
58
+
Bower will download all the necessary dependencies into the `bower_components` folder. Again, this
59
+
is done automatically for us when we run `npm start`.
60
+
61
+
## Serving the Application Files
62
+
63
+
While angular is client-side-only technology and it's possible to create angular webapps that
64
+
don't require a backend server at all, we recommend serving the project files using a local
65
+
webserver during development to avoid issues with security restrictions (sandbox) in browsers. The
66
+
sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr,
67
+
etc to function properly when an html page is opened via `file://` scheme instead of `http://`.
25
68
26
69
27
70
### Running the app during development
28
71
29
-
You can pick one of these options:
72
+
The angular-seed project comes preconfigured with a local development webserver. It is a node.js
73
+
tool called `http-server`. You can start this webserver with `npm start` but you may choose to
74
+
install the tool globally:
75
+
76
+
```
77
+
sudo npm install -g http-server
78
+
```
79
+
80
+
Then you can start your own development web server to server static files, from a folder, by
81
+
running:
30
82
31
-
* serve this repository with your webserver
32
-
* install node.js and run `scripts/web-server.js`
83
+
```
84
+
http-server
85
+
```
33
86
34
-
Then navigate your browser to `http://localhost:<port>/app/index.html` to see the app running in
35
-
your browser.
87
+
Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just
88
+
configure your server to serve the files under the `app/` directory.
36
89
37
90
38
91
### Running the app in production
@@ -47,43 +100,84 @@ somewhere, where they can be accessed by browsers.
47
100
If your Angular app is talking to the backend server via xhr or other means, you need to figure
48
101
out what is the best way to host the static files to comply with the same origin policy if
49
102
applicable. Usually this is done by hosting the files by the backend server or through
50
-
reverse-proxying the backend server(s) and a webserver(s).
103
+
reverse-proxying the backend server(s) and webserver(s).
104
+
105
+
106
+
## Testing
51
107
108
+
There are two kinds of tests in the angular-seed application: Unit tests and End to End tests.
52
109
53
-
### Running unit tests
110
+
### Running Unit Tests
54
111
55
112
We recommend using [jasmine](http://pivotal.github.com/jasmine/) and
56
113
[Karma](http://karma-runner.github.io) for your unit tests/specs, but you are free
57
114
to use whatever works for you.
58
115
59
-
Requires [node.js](http://nodejs.org/), Karma (`sudo npm install -g karma`) and a local
60
-
or remote browser.
116
+
The angular-seed app comes preconfigured with such tests and a Karma configuration file to run them.
117
+
118
+
* the configuration is found at `test/karma.conf.js`
119
+
* the unit tests are found in `test/unit/`.
120
+
121
+
The easiest way to run the unit tests is to use the supplied npm script:
122
+
123
+
```
124
+
npm test
125
+
```
126
+
127
+
This script will ensure that the Karma dependencies are installed and then start the Karma test
128
+
runner to execute the unit tests. Karma will then sit and watch the application and test files for
129
+
changes and re-run the tests whenever any of them change.
130
+
131
+
The Karma Test Runner is a [node.js][node] tool. You may choose to install the CLI tool globally
132
+
133
+
```
134
+
sudo npm install -g karma
135
+
```
136
+
137
+
You can then start Karma directly, passing it the test configuration file:
138
+
139
+
```
140
+
karma start test/karma.conf.js
141
+
```
142
+
143
+
A browser will start and connect to the Karma server (Chrome is default browser, others can be
144
+
captured by loading the same url as the one in Chrome or by changing the `test/karma.conf.js`
145
+
file). Karma will then re-run the tests when there are changes to any of the source or test
146
+
javascript files.
61
147
62
-
* start `scripts/test.sh` (on windows: `scripts\test.bat`)
63
-
* a browser will start and connect to the Karma server (Chrome is default browser, others can be captured by loading the same url as the one in Chrome or by changing the `config/karma.conf.js` file)
64
-
* to run or re-run tests just change any of your source or test javascript files
65
148
66
149
67
150
### End to end testing
68
151
69
-
We recommend using [protractor](https://github.com/angular/protractor) for end-to-end tests. It
70
-
uses native events and has special features for Angular applications.
152
+
We recommend using [Protractor][protractor] for end-to-end tests. It uses native events and has
153
+
special features for Angular applications.
154
+
155
+
* the configuration is found at `test/protractor-conf.js`
156
+
* the end-to-end tests are found in `test/e2e/`
71
157
72
-
Requires a webserver, node.js + `./scripts/web-server.js` or your backend server that hosts the angular static files.
158
+
Protractor simulates interaction with our web app and verifies that the application responds
159
+
correctly. Therefore, our web server needs to be serving up the application, so that Protractor
160
+
can interact with it.
161
+
162
+
Once you have ensured that the development web server hosting our application is up and running
163
+
(probably `npm start`) you can run the end-to-end tests using the supplied npm script:
164
+
165
+
```
166
+
npm run-script protractor
167
+
```
168
+
169
+
This script will ensure that the dependencies (including the Selenium Web Driver component) are
170
+
up to date and then execute the end-to-end tests against the application being hosted on the
171
+
development server.
73
172
74
-
* create your end-to-end tests in `test/e2e/scenarios.js`
75
-
* serve your project directory with your http/backend server or node.js + `scripts/web-server.js`
76
-
* to run:
77
-
* run the tests from console with [Protractor](https://github.com/angular/protractor) via
78
-
`scripts/e2e-test.sh` (on windows: `scripts\e2e-test.bat`)
0 commit comments