|
| 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