|
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