diff --git a/.bowerrc b/.bowerrc deleted file mode 100644 index 8c58c8efc9..0000000000 --- a/.bowerrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "directory": "app/bower_components" -} \ No newline at end of file diff --git a/.gitignore b/.gitignore index b702acc68f..bcecdc7669 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ logs/* !.gitkeep node_modules/ -bower_components/ +app/lib/ tmp .DS_Store .idea \ No newline at end of file diff --git a/.jshintrc b/.jshintrc index 60f49fd369..6550a823c3 100644 --- a/.jshintrc +++ b/.jshintrc @@ -1,10 +1,10 @@ { "strict": "global", "globals": { - // Angular + // AngularJS "angular": false, - // Angular mocks + // AngularJS mocks "module": false, "inject": false, diff --git a/.travis.yml b/.travis.yml index 78680206f9..7cd8405390 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,7 +3,7 @@ dist: trusty language: node_js node_js: - - '4.5' + - 6 install: - export DISPLAY=:99.0 diff --git a/README.md b/README.md index 8d52ba48b7..58c7be1c96 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ This project is an application skeleton for a typical [AngularJS][angularjs] web app. You can use it to quickly bootstrap your angular webapp projects and dev environment for these projects. -The seed contains a sample AngularJS application and is preconfigured to install the Angular +The seed contains a sample AngularJS application and is preconfigured to install the AngularJS framework and a bunch of development and testing tools for instant web development gratification. The seed app doesn't do much, just shows how to wire two controllers and views together. @@ -39,30 +39,29 @@ The `depth=1` tells git to only pull down one commit worth of historical data. ### Install Dependencies -We have two kinds of dependencies in this project: tools and Angular framework code. The tools help +We have two kinds of dependencies in this project: tools and AngularJS framework code. The tools help us manage and test the application. -* We get the tools we depend upon via `npm`, the [Node package manager][npm]. -* We get the Angular code via `bower`, a [client-side code package manager][bower]. +* We get the tools we depend upon and the AngularJS code via `npm`, the [Node package manager][npm]. * In order to run the end-to-end tests, you will also need to have the [Java Development Kit (JDK)][jdk] installed on your machine. Check out the section on [end-to-end testing](#e2e-testing) for more info. -We have preconfigured `npm` to automatically run `bower` so we can simply do: +We have preconfigured `npm` to automatically copy the downloaded AngularJS files to `app/lib` so we +can simply do: ``` npm install ``` -Behind the scenes this will also call `bower install`. After that, you should find out that you have -two new folders in your project. +Behind the scenes this will also call `npm run copy-libs`, which copies the AngularJS files and other +frontend dependencies. After that, you should find out that you have two new directories in your project. * `node_modules` - contains the npm packages for the tools we need -* `app/bower_components` - contains the Angular framework files +* `app/lib` - contains the AngularJS framework files and other frontend dependencies -*Note that the `bower_components` folder would normally be installed in the root folder but -`angular-seed` changes this location through the `.bowerrc` file. Putting it in the `app` folder -makes it easier to serve the files by a web server.* +*Note copying the AngularJS files from `node_modules` to `app/lib` makes it easier to serve the files +by a web server.* ### Run the Application @@ -146,7 +145,7 @@ npm run test-single-run The `angular-seed` app comes with end-to-end tests, again written in [Jasmine][jasmine]. These tests are run with the [Protractor][protractor] End-to-End test runner. It uses native events and has -special features for Angular applications. +special features for AngularJS applications. * The configuration is found at `e2e-tests/protractor-conf.js`. * The end-to-end tests are found in `e2e-tests/scenarios.js`. @@ -188,9 +187,9 @@ the [Java Development Kit (JDK)][jdk] to be installed on your local machine. Che If JDK is not already installed, you can download it [here][jdk-download]. -## Updating Angular +## Updating AngularJS -Since the Angular framework library code and tools are acquired through package managers (npm and +Since the AngularJS framework library code and tools are acquired through package managers (npm and bower) you can use these tools to easily update the dependencies. Simply run the preconfigured script: @@ -198,16 +197,15 @@ script: npm run update-deps ``` -This will call `npm update` and `bower update`, which in turn will find and install the latest -versions that match the version ranges specified in the `package.json` and `bower.json` files -respectively. +This will call `npm update` and `npm run copy-libs`, which in turn will find and install the latest +versions that match the version ranges specified in the `package.json` file. -## Loading Angular Asynchronously +## Loading AngularJS Asynchronously The `angular-seed` project supports loading the framework and application scripts asynchronously. The special `index-async.html` is designed to support this style of loading. For it to work you must -inject a piece of Angular JavaScript into the HTML page. The project has a predefined script to help +inject a piece of AngularJS JavaScript into the HTML page. The project has a predefined script to help do this: ``` @@ -215,12 +213,12 @@ npm run update-index-async ``` This will copy the contents of the `angular-loader.js` library file into the `index-async.html` -page. You can run this every time you update the version of Angular that you are using. +page. You can run this every time you update the version of AngularJS that you are using. ## Serving the Application Files -While Angular is client-side-only technology and it is possible to create Angular web apps that +While AngularJS is client-side-only technology and it is possible to create AngularJS web apps that do not require a backend server at all, we recommend serving the project files using a local web server during development to avoid issues with security restrictions (sandbox) in browsers. The sandbox implementation varies between browsers, but quite often prevents things like cookies, XHR, @@ -236,7 +234,7 @@ choose to install the tool globally: sudo npm install -g http-server ``` -Then you can start your own development web server to serve static files from a folder by running: +Then you can start your own development web server to serve static files from any folder by running: ``` http-server -a localhost -p 8000 @@ -251,10 +249,10 @@ This really depends on how complex your app is and the overall infrastructure of the general rule is that all you need in production are the files under the `app/` directory. Everything else should be omitted. -Angular apps are really just a bunch of static HTML, CSS and JavaScript files that need to be hosted +AngularJS apps are really just a bunch of static HTML, CSS and JavaScript files that need to be hosted somewhere they can be accessed by browsers. -If your Angular app is talking to the backend server via XHR or other means, you need to figure out +If your AngularJS app is talking to the backend server via XHR or other means, you need to figure out what is the best way to host the static files to comply with the same origin policy if applicable. Usually this is done by hosting the files by the backend server or through reverse-proxying the backend server(s) and web server(s). @@ -279,7 +277,6 @@ For more information on AngularJS please check out [angularjs.org][angularjs]. [angularjs]: https://angularjs.org/ -[bower]: http://bower.io/ [git]: https://git-scm.com/ [http-server]: https://github.com/indexzero/http-server [jasmine]: https://jasmine.github.io/ diff --git a/app/index-async.html b/app/index-async.html index 281254ed11..56b93a8598 100644 --- a/app/index-async.html +++ b/app/index-async.html @@ -2,18 +2,18 @@
- - + + - + @@ -52,7 +52,7 @@ -