Skip to content

Commit 5d4326b

Browse files
committed
1 parent 7c10c76 commit 5d4326b

30 files changed

+2871
-0
lines changed

angular/.gitignore

Lines changed: 7 additions & 0 deletions
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

angular/.jshintrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"globalstrict": true,
3+
"globals": {
4+
"angular": false
5+
}
6+
}

angular/.travis.yml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
language: node_js
2+
node_js:
3+
- 0.10
4+
5+
before_script:
6+
- export DISPLAY=:99.0
7+
- sh -e /etc/init.d/xvfb start
8+
- npm start > /dev/null &
9+
- npm run update-webdriver
10+
- sleep 1 # give server time to start
11+
12+
script:
13+
- node_modules/.bin/karma start test/karma.conf.js --no-auto-watch --single-run --reporters=dots --browsers=Firefox
14+
- node_modules/.bin/protractor test/protractor-conf.js --browser=firefox

angular/LICENSE

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License
2+
3+
Copyright (c) 2010-2014 Google, Inc. http://angularjs.org
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.
22+

angular/README.md

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

angular/app/css/.gitkeep

Whitespace-only changes.

angular/app/css/app.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* app css stylesheet */
2+
3+
.menu {
4+
list-style: none;
5+
border-bottom: 0.1em solid black;
6+
margin-bottom: 2em;
7+
padding: 0 0 0.5em;
8+
}
9+
10+
.menu:before {
11+
content: "[";
12+
}
13+
14+
.menu:after {
15+
content: "]";
16+
}
17+
18+
.menu > li {
19+
display: inline;
20+
}
21+
22+
.menu > li:before {
23+
content: "|";
24+
padding-right: 0.3em;
25+
}
26+
27+
.menu > li:nth-child(1):before {
28+
content: "";
29+
padding: 0;
30+
}

angular/app/img/.gitkeep

Whitespace-only changes.

0 commit comments

Comments
 (0)