Skip to content

Commit 0b407bb

Browse files
author
Vlad Sternbach
committed
initial commit based on systemjs
1 parent 4849b59 commit 0b407bb

25 files changed

+5429
-1
lines changed

.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
logs/*
2+
!.gitkeep
3+
node_modules/
4+
bower_components/
5+
tmp
6+
.DS_Store
7+
.idea

.jshintrc

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"globalstrict": true,
3+
"globals": {
4+
"angular": false,
5+
"describe": false,
6+
"it": false,
7+
"expect": false,
8+
"beforeEach": false,
9+
"afterEach": false,
10+
"module": false,
11+
"inject": false
12+
}
13+
}

README.md

+297-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,297 @@
1-
# comsys
1+
# angular-seed — the seed for AngularJS apps
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.
6+
7+
The seed contains a sample AngularJS application and is preconfigured to install the Angular
8+
framework and a bunch of development and testing tools for instant web development gratification.
9+
10+
The seed app doesn't do much, just shows how to wire two controllers and views together.
11+
12+
13+
## Getting Started
14+
15+
To get you started you can simply clone the angular-seed repository and install the dependencies:
16+
17+
### Prerequisites
18+
19+
You need git to clone the angular-seed repository. You can get git from
20+
[http://git-scm.com/](http://git-scm.com/).
21+
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/).
24+
25+
### Clone angular-seed
26+
27+
Clone the angular-seed repository using [git][git]:
28+
29+
```
30+
git clone https://github.com/angular/angular-seed.git
31+
cd angular-seed
32+
```
33+
34+
If you just want to start a new project without the angular-seed commit history then you can do:
35+
36+
```bash
37+
git clone --depth=1 https://github.com/angular/angular-seed.git <your-project-name>
38+
```
39+
40+
The `depth=1` tells git to only pull down one commit worth of historical data.
41+
42+
### Install Dependencies
43+
44+
We have two kinds of dependencies in this project: tools and angular framework code. The tools help
45+
us manage and test the application.
46+
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].
49+
50+
We have preconfigured `npm` to automatically run `bower` so we can simply do:
51+
52+
```
53+
npm install
54+
```
55+
56+
Behind the scenes this will also call `bower install`. You should find that you have two new
57+
folders in your project.
58+
59+
* `node_modules` - contains the npm packages for the tools we need
60+
* `app/bower_components` - contains the angular framework files
61+
62+
*Note that the `bower_components` folder would normally be installed in the root folder but
63+
angular-seed changes this location through the `.bowerrc` file. Putting it in the app folder makes
64+
it easier to serve the files by a webserver.*
65+
66+
### Run the Application
67+
68+
We have preconfigured the project with a simple development web server. The simplest way to start
69+
this server is:
70+
71+
```
72+
npm start
73+
```
74+
75+
Now browse to the app at `http://localhost:8000/app/index.html`.
76+
77+
78+
79+
## Directory Layout
80+
81+
```
82+
app/ --> all of the source files for the application
83+
app.css --> default stylesheet
84+
components/ --> all app specific modules
85+
version/ --> version related components
86+
version.js --> version module declaration and basic "version" value service
87+
version_test.js --> "version" value service tests
88+
version-directive.js --> custom directive that returns the current app version
89+
version-directive_test.js --> version directive tests
90+
interpolate-filter.js --> custom interpolation filter
91+
interpolate-filter_test.js --> interpolate filter tests
92+
view1/ --> the view1 view template and logic
93+
view1.html --> the partial template
94+
view1.js --> the controller logic
95+
view1_test.js --> tests of the controller
96+
view2/ --> the view2 view template and logic
97+
view2.html --> the partial template
98+
view2.js --> the controller logic
99+
view2_test.js --> tests of the controller
100+
app.js --> main application module
101+
index.html --> app layout file (the main html template file of the app)
102+
index-async.html --> just like index.html, but loads js files asynchronously
103+
karma.conf.js --> config file for running unit tests with Karma
104+
e2e-tests/ --> end-to-end tests
105+
protractor-conf.js --> Protractor config file
106+
scenarios.js --> end-to-end scenarios to be run by Protractor
107+
```
108+
109+
## Testing
110+
111+
There are two kinds of tests in the angular-seed application: Unit tests and End to End tests.
112+
113+
### Running Unit Tests
114+
115+
The angular-seed app comes preconfigured with unit tests. These are written in
116+
[Jasmine][jasmine], which we run with the [Karma Test Runner][karma]. We provide a Karma
117+
configuration file to run them.
118+
119+
* the configuration is found at `karma.conf.js`
120+
* the unit tests are found next to the code they are testing and are named as `..._test.js`.
121+
122+
The easiest way to run the unit tests is to use the supplied npm script:
123+
124+
```
125+
npm test
126+
```
127+
128+
This script will start the Karma test runner to execute the unit tests. Moreover, Karma will sit and
129+
watch the source and test files for changes and then re-run the tests whenever any of them change.
130+
This is the recommended strategy; if your unit tests are being run every time you save a file then
131+
you receive instant feedback on any changes that break the expected code functionality.
132+
133+
You can also ask Karma to do a single run of the tests and then exit. This is useful if you want to
134+
check that a particular version of the code is operating as expected. The project contains a
135+
predefined script to do this:
136+
137+
```
138+
npm run test-single-run
139+
```
140+
141+
142+
### End to end testing
143+
144+
The angular-seed app comes with end-to-end tests, again written in [Jasmine][jasmine]. These tests
145+
are run with the [Protractor][protractor] End-to-End test runner. It uses native events and has
146+
special features for Angular applications.
147+
148+
* the configuration is found at `e2e-tests/protractor-conf.js`
149+
* the end-to-end tests are found in `e2e-tests/scenarios.js`
150+
151+
Protractor simulates interaction with our web app and verifies that the application responds
152+
correctly. Therefore, our web server needs to be serving up the application, so that Protractor
153+
can interact with it.
154+
155+
```
156+
npm start
157+
```
158+
159+
In addition, since Protractor is built upon WebDriver we need to install this. The angular-seed
160+
project comes with a predefined script to do this:
161+
162+
```
163+
npm run update-webdriver
164+
```
165+
166+
This will download and install the latest version of the stand-alone WebDriver tool.
167+
168+
Once you have ensured that the development web server hosting our application is up and running
169+
and WebDriver is updated, you can run the end-to-end tests using the supplied npm script:
170+
171+
```
172+
npm run protractor
173+
```
174+
175+
This script will execute the end-to-end tests against the application being hosted on the
176+
development server.
177+
178+
179+
## Updating Angular
180+
181+
Previously we recommended that you merge in changes to angular-seed into your own fork of the project.
182+
Now that the angular framework library code and tools are acquired through package managers (npm and
183+
bower) you can use these tools instead to update the dependencies.
184+
185+
You can update the tool dependencies by running:
186+
187+
```
188+
npm update
189+
```
190+
191+
This will find the latest versions that match the version ranges specified in the `package.json` file.
192+
193+
You can update the Angular dependencies by running:
194+
195+
```
196+
bower update
197+
```
198+
199+
This will find the latest versions that match the version ranges specified in the `bower.json` file.
200+
201+
202+
## Loading Angular Asynchronously
203+
204+
The angular-seed project supports loading the framework and application scripts asynchronously. The
205+
special `index-async.html` is designed to support this style of loading. For it to work you must
206+
inject a piece of Angular JavaScript into the HTML page. The project has a predefined script to help
207+
do this.
208+
209+
```
210+
npm run update-index-async
211+
```
212+
213+
This will copy the contents of the `angular-loader.js` library file into the `index-async.html` page.
214+
You can run this every time you update the version of Angular that you are using.
215+
216+
217+
## Serving the Application Files
218+
219+
While angular is client-side-only technology and it's possible to create angular webapps that
220+
don't require a backend server at all, we recommend serving the project files using a local
221+
webserver during development to avoid issues with security restrictions (sandbox) in browsers. The
222+
sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr,
223+
etc to function properly when an html page is opened via `file://` scheme instead of `http://`.
224+
225+
226+
### Running the App during Development
227+
228+
The angular-seed project comes preconfigured with a local development webserver. It is a node.js
229+
tool called [http-server][http-server]. You can start this webserver with `npm start` but you may choose to
230+
install the tool globally:
231+
232+
```
233+
sudo npm install -g http-server
234+
```
235+
236+
Then you can start your own development web server to serve static files from a folder by
237+
running:
238+
239+
```
240+
http-server -a localhost -p 8000
241+
```
242+
243+
Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just
244+
configure your server to serve the files under the `app/` directory.
245+
246+
247+
### Running the App in Production
248+
249+
This really depends on how complex your app is and the overall infrastructure of your system, but
250+
the general rule is that all you need in production are all the files under the `app/` directory.
251+
Everything else should be omitted.
252+
253+
Angular apps are really just a bunch of static html, css and js files that just need to be hosted
254+
somewhere they can be accessed by browsers.
255+
256+
If your Angular app is talking to the backend server via xhr or other means, you need to figure
257+
out what is the best way to host the static files to comply with the same origin policy if
258+
applicable. Usually this is done by hosting the files by the backend server or through
259+
reverse-proxying the backend server(s) and webserver(s).
260+
261+
262+
## Continuous Integration
263+
264+
### Travis CI
265+
266+
[Travis CI][travis] is a continuous integration service, which can monitor GitHub for new commits
267+
to your repository and execute scripts such as building the app or running tests. The angular-seed
268+
project contains a Travis configuration file, `.travis.yml`, which will cause Travis to run your
269+
tests when you push to GitHub.
270+
271+
You will need to enable the integration between Travis and GitHub. See the Travis website for more
272+
instruction on how to do this.
273+
274+
### CloudBees
275+
276+
CloudBees have provided a CI/deployment setup:
277+
278+
<a href="https://grandcentral.cloudbees.com/?CB_clickstart=https://raw.github.com/CloudBees-community/angular-js-clickstart/master/clickstart.json">
279+
<img src="https://d3ko533tu1ozfq.cloudfront.net/clickstart/deployInstantly.png"/></a>
280+
281+
If you run this, you will get a cloned version of this repo to start working on in a private git repo,
282+
along with a CI service (in Jenkins) hosted that will run unit and end to end tests in both Firefox and Chrome.
283+
284+
285+
## Contact
286+
287+
For more information on AngularJS please check out http://angularjs.org/
288+
289+
[git]: http://git-scm.com/
290+
[bower]: http://bower.io
291+
[npm]: https://www.npmjs.org/
292+
[node]: http://nodejs.org
293+
[protractor]: https://github.com/angular/protractor
294+
[jasmine]: http://jasmine.github.io
295+
[karma]: http://karma-runner.github.io
296+
[travis]: https://travis-ci.org/
297+
[http-server]: https://github.com/nodeapps/http-server

0 commit comments

Comments
 (0)