forked from angular-app/angular-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
65bafff
commit f1daae6
Showing
1 changed file
with
53 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,29 +1,61 @@ | ||
[![Build Status](https://secure.travis-ci.org/angular-app/angular-app.png)](http://travis-ci.org/angular-app/angular-app) | ||
|
||
# Installation | ||
# [AngularJS](www..angularjs.org/) CRUD application demo | ||
|
||
## Tools | ||
Our development process and back end server rely on applications written in NodeJS (nodejs.org). You need to install NodeJS and then the development tools. | ||
NodeJs comes with a package manager called npm for installing NodeJS applications and libraries. | ||
* Install node.js (requires node.js version >= 0.8.4) - [http://nodejs.org/download/] | ||
*** | ||
|
||
## Purpose | ||
|
||
The idea is to **demonstrate how to write a typical, non-trivial CRUD application using AngularJS**. To showcase AngularJS in its most advantageous environment we've set out to write a simplified project management tool supporting teams using the SCRUM methodology. The sample application tries to show best practices when it comes to: folders structure, using modules, testing, communicating with a REST back-end, organizing navigation, addressing security concerns (authentication / authorization). | ||
|
||
We've learned a lot while using and supporting AngularJS on the [mailing list](https://groups.google.com/group/angular) and would like to share our experience. | ||
|
||
## Stack | ||
|
||
* Persistence store: [MongDB](www.mongodb.org/) hosted on [MongoLab](https://mongolab.com/) | ||
* Backend: [Node.js](nodejs.org/) | ||
* Awesome [AngularJS](www..angularjs.org/) on the client | ||
* CSS based on [Twitter's bootstrap](http://twitter.github.com/bootstrap/) | ||
|
||
### Build | ||
|
||
It is a complete project with a build system focused on AngularJS apps and tightly integrated with other tools commonly used in the AngularJS community: | ||
* powered by [Grunt.js](http://gruntjs.com/) | ||
* test written using [Jasmine](http://pivotal.github.com/jasmine/) syntax | ||
* test are executed by [Testacular](http://vojtajina.github.com/testacular/) (integrated with the Grunt.js build) | ||
* build supporting JS, CSS and AngularJS templates minification | ||
* [Twitter's bootstrap](http://twitter.github.com/bootstrap/) with LESS templates processing integrated into the build | ||
* [Travis-CI](https://travis-ci.org/) integration | ||
|
||
## Installation | ||
|
||
### Platform & tools | ||
|
||
You need to install Node.js and then the development tools. Node.js comes with a package manager called [npm](http://npmjs.org) for installing NodeJS applications and libraries. | ||
* [Install node.js](http://nodejs.org/download/) (requires node.js version >= 0.8.4) | ||
* Install Grunt and Testacular as global npm modules: | ||
|
||
``` | ||
npm install -g [email protected] [email protected] | ||
``` | ||
## App Server | ||
Our backend application server is a NodeJS application that relies upon some 3rd Party libraries. You need to install these using the NodeJS package manager, npm | ||
* Install local dependencies: | ||
### App Server | ||
Our backend application server is a NodeJS application that relies upon some 3rd Party npm packages. You need to install these: | ||
* Install local dependencies: | ||
``` | ||
cd server | ||
npm install | ||
cd .. | ||
``` | ||
## Client App | ||
Our client application is a straight HTML/Javascript application but our development process uses a NodeJS build tool called Grunt [gruntjs.com]. Grunt relies upon some 3rd party libraries that we need to install as local dependencies using npm. | ||
### Client App | ||
Our client application is a straight HTML/Javascript application but our development process uses a Node.js build tool | ||
[Grunt.js](gruntjs.com). Grunt relies upon some 3rd party libraries that we need to install as local dependencies using npm. | ||
* Install local dependencies: | ||
``` | ||
|
@@ -32,15 +64,15 @@ Our client application is a straight HTML/Javascript application but our develop | |
cd .. | ||
``` | ||
# Building | ||
## Building | ||
_*If you are using Windows then you must run `grunt` as `grunt.cmd`. Throughout the rest of this README we will just write `grunt`.*_ | ||
## Build the client app | ||
### Build the client app | ||
The app made up of a number of javascript, css and html files that need to be merged into a final distribution for running. We use the Grunt build tool to do this. | ||
* Build client application: `grunt build` | ||
## Configure Server | ||
### Configure Server | ||
The server stores its data in a MongoLab database. | ||
* Create an account at MongoLab - it's free: [https://mongolab.com/signup/]. | ||
* Create a database to use for this application: [https://mongolab.com/newdb] | ||
|
@@ -62,15 +94,17 @@ The server stores its data in a MongoLab database. | |
`node server/initDB.js` | ||
``` | ||
# Running | ||
## Start the Server | ||
## Running | ||
### Start the Server | ||
* Run the server | ||
``` | ||
node server/server.js | ||
``` | ||
* Browse to the application at [http://localhost:3000] | ||
# Folders structure | ||
## Development | ||
### Folders structure | ||
At the top level, the repository is split into a client folder and a server folder. The client folder contains all the client-side AngularJS application. The server folder contains a very basic Express based webserver that delivers and supports the application. | ||
Within the client folder you have the following structure: | ||
* `build` contains build tasks for Grunt | ||
|
@@ -79,8 +113,7 @@ Within the client folder you have the following structure: | |
* `test` contains test sources, configuration and dependencies | ||
* `vendor` contains external dependencies for the application | ||
# Development Process | ||
## Default Build | ||
### Default Build | ||
The default grunt task will build (checks the javascript (lint), runs the unit tests (test:unit) and builds distributable files) and run all unit tests: `grunt` (or `grunt.cmd` on Windows). The tests are run by testacular and need one or more browsers open to actually run the tests. | ||
* `grunt` or `grunt.cmd` (on Windows) | ||
* Open one or more browsers and point them to [http://localhost:8080/__testacular/]. Once the browsers connect the tests will run and the build will complete. | ||
|
@@ -90,14 +123,14 @@ The watch grunt task will monitor the source files and run the default build tas | |
## Build without tests | ||
If for some reason you don't want to run the test but just generate the files - not a good idea(!!) - you can simply run the build task: `grunt build`. | ||
## Building release code | ||
### Building release code | ||
You can build a release version of the app, with minified files. This task will also run the "end to end" (e2e) tests. | ||
The e2e tests require the server to be started and also one or more browsers open to run the tests. (You can use the same browsers as for the unit tests.) | ||
* Run `grunt release` | ||
* Open one or more browsers and point them to [http://localhost:8080/__testacular/]. Once the browsers connect the tests will run and the build will complete. | ||
* If you leave the browsers open at this url then future runs of `grunt` will automatically run the tests against these browsers. | ||
## Continuous testing | ||
### Continuous testing | ||
You can have grunt (testacular) continuously watch for file changes and automatically run all the tests on every change, without rebuilding the distribution files. This can make the test run faster when you are doing test driven development and don't need to actually run the application itself. | ||
* Run `grunt test-watch`. | ||
|