Skip to content

Commit baf2d4e

Browse files
author
rtn-martavis
committed
Initial Angular setup
0 parents  commit baf2d4e

18 files changed

+677
-0
lines changed

.bowerrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": "app/bower_components"
3+
}

.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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"strict": "global",
3+
"globals": {
4+
// Angular
5+
"angular": false,
6+
7+
// Angular mocks
8+
"module": false,
9+
"inject": false,
10+
11+
// Jasmine
12+
"jasmine": false,
13+
"describe": false,
14+
"beforeEach": false,
15+
"afterEach": false,
16+
"it": false,
17+
"expect": false,
18+
19+
// Protractor
20+
"browser": false,
21+
"element": false,
22+
"by": false
23+
}
24+
}

.travis.yml

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
sudo: required
2+
dist: trusty
3+
4+
language: node_js
5+
node_js:
6+
- '4.5'
7+
8+
install:
9+
- export DISPLAY=:99.0
10+
- sh -e /etc/init.d/xvfb start
11+
- wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
12+
- sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
13+
- sudo apt-get update -q
14+
- sudo apt-get install -q google-chrome-stable
15+
16+
before_script:
17+
- npm install
18+
19+
script:
20+
- npm run test-single-run
21+
- (npm start > /dev/null &) && (npm run protractor)

LICENSE

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License
2+
3+
Copyright (c) 2010-2016 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+

README.md

+295
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
# `angular-seed` — the seed for AngularJS apps
2+
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.
5+
6+
The seed contains a sample AngularJS application and is preconfigured to install the Angular
7+
framework and a bunch of development and testing tools for instant web development gratification.
8+
9+
The seed app doesn't do much, just shows how to wire two controllers and views together.
10+
11+
12+
## Getting Started
13+
14+
To get you started you can simply clone the `angular-seed` repository and install the dependencies:
15+
16+
### Prerequisites
17+
18+
You need git to clone the `angular-seed` repository. You can get git from [here][git].
19+
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].
22+
23+
### Clone `angular-seed`
24+
25+
Clone the `angular-seed` repository using git:
26+
27+
```
28+
git clone https://github.com/angular/angular-seed.git
29+
cd angular-seed
30+
```
31+
32+
If you just want to start a new project without the `angular-seed` commit history then you can do:
33+
34+
```
35+
git clone --depth=1 https://github.com/angular/angular-seed.git <your-project-name>
36+
```
37+
38+
The `depth=1` tells git to only pull down one commit worth of historical data.
39+
40+
### Install Dependencies
41+
42+
We have two kinds of dependencies in this project: tools and Angular framework code. The tools help
43+
us manage and test the application.
44+
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].
47+
* In order to run the end-to-end tests, you will also need to have the
48+
[Java Development Kit (JDK)][jdk] installed on your machine. Check out the section on
49+
[end-to-end testing](#e2e-testing) for more info.
50+
51+
We have preconfigured `npm` to automatically run `bower` so we can simply do:
52+
53+
```
54+
npm install
55+
```
56+
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.
59+
60+
* `node_modules` - contains the npm packages for the tools we need
61+
* `app/bower_components` - contains the Angular framework files
62+
63+
*Note that the `bower_components` folder would normally be installed in the root folder but
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.*
66+
67+
### Run the Application
68+
69+
We have preconfigured the project with a simple development web server. The simplest way to start
70+
this server is:
71+
72+
```
73+
npm start
74+
```
75+
76+
Now browse to the app at [`localhost:8000/index.html`][local-app-url].
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+
110+
## Testing
111+
112+
There are two kinds of tests in the `angular-seed` application: Unit tests and end-to-end tests.
113+
114+
### Running Unit Tests
115+
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.
118+
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`).
122+
123+
The easiest way to run the unit tests is to use the supplied npm script:
124+
125+
```
126+
npm test
127+
```
128+
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.
132+
This is the recommended strategy; if your unit tests are being run every time you save a file then
133+
you receive instant feedback on any changes that break the expected code functionality.
134+
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
137+
predefined script to do this:
138+
139+
```
140+
npm run test-single-run
141+
```
142+
143+
144+
<a name="e2e-testing"></a>
145+
### Running End-to-End Tests
146+
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
149+
special features for Angular applications.
150+
151+
* The configuration is found at `e2e-tests/protractor-conf.js`.
152+
* The end-to-end tests are found in `e2e-tests/scenarios.js`.
153+
154+
Protractor simulates interaction with our web app and verifies that the application responds
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:**
159+
160+
```
161+
npm start
162+
```
163+
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:
168+
169+
```
170+
npm run update-webdriver
171+
```
172+
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:
175+
176+
```
177+
npm run protractor
178+
```
179+
180+
This script will execute the end-to-end tests against the application being hosted on the
181+
development server.
182+
183+
**Note:**
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
186+
`java -version` from the command line.
187+
188+
If JDK is not already installed, you can download it [here][jdk-download].
189+
190+
191+
## Updating Angular
192+
193+
Since the Angular framework library code and tools are acquired through package managers (npm and
194+
bower) you can use these tools to easily update the dependencies. Simply run the preconfigured
195+
script:
196+
197+
```
198+
npm run update-deps
199+
```
200+
201+
This will call `npm update` and `bower update`, which in turn will find and install the latest
202+
versions that match the version ranges specified in the `package.json` and `bower.json` files
203+
respectively.
204+
205+
206+
## Loading Angular Asynchronously
207+
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:
212+
213+
```
214+
npm run update-index-async
215+
```
216+
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.
219+
220+
221+
## Serving the Application Files
222+
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+
229+
### Running the App during Development
230+
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+
235+
```
236+
sudo npm install -g http-server
237+
```
238+
239+
Then you can start your own development web server to serve static files from a folder by running:
240+
241+
```
242+
http-server -a localhost -p 8000
243+
```
244+
245+
Alternatively, you can choose to configure your own web server, such as Apache or Nginx. Just
246+
configure your server to serve the files under the `app/` directory.
247+
248+
### Running the App in Production
249+
250+
This really depends on how complex your app is and the overall infrastructure of your system, but
251+
the general rule is that all you need in production are the files under the `app/` directory.
252+
Everything else should be omitted.
253+
254+
Angular apps are really just a bunch of static HTML, CSS and JavaScript files that need to be hosted
255+
somewhere they can be accessed by browsers.
256+
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).
261+
262+
263+
## Continuous Integration
264+
265+
### Travis CI
266+
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`
269+
project contains a Travis configuration file, `.travis.yml`, which will cause Travis to run your
270+
tests when you push to GitHub.
271+
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.
274+
275+
276+
## Contact
277+
278+
For more information on AngularJS please check out [angularjs.org][angularjs].
279+
280+
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+
[npm]: https://www.npmjs.org/
292+
[protractor]: http://www.protractortest.org/
293+
[selenium]: http://docs.seleniumhq.org/
294+
[travis]: https://travis-ci.org/
295+
[travis-docs]: https://docs.travis-ci.com/user/getting-started

0 commit comments

Comments
 (0)