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..464c52d2ff 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,21 +1,19 @@ -sudo: required dist: trusty language: node_js node_js: - - '4.5' + - 10 -install: - - export DISPLAY=:99.0 - - sh -e /etc/init.d/xvfb start - - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - - - sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list' - - sudo apt-get update -q - - sudo apt-get install -q google-chrome-stable +addons: + chrome: stable + +cache: + directories: + - "$HOME/.npm" -before_script: +install: - npm install script: - - npm run test-single-run - - (npm start > /dev/null &) && (npm run protractor) + - npm run test-single-run -- --browsers ChromeHeadless + - (npm start > /dev/null &) && npm run protractor -- --capabilities.chromeOptions.args headless diff --git a/README.md b/README.md index 8d52ba48b7..3e996e8a7b 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,30 @@ 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 -us manage and test the application. +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 front end 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 front end 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 @@ -79,9 +79,9 @@ Now browse to the app at [`localhost:8000/index.html`][local-app-url]. ## Directory Layout ``` -app/ --> all of the source files for the application +app/ --> all of the source files for the application app.css --> default stylesheet - components/ --> all app specific modules + core/ --> all app specific modules version/ --> version related components version.js --> version module declaration and basic "version" value service version_test.js --> "version" value service tests @@ -100,10 +100,12 @@ app/ --> all of the source files for the application app.js --> main application module index.html --> app layout file (the main html template file of the app) index-async.html --> just like index.html, but loads js files asynchronously -karma.conf.js --> config file for running unit tests with Karma e2e-tests/ --> end-to-end tests protractor-conf.js --> Protractor config file scenarios.js --> end-to-end scenarios to be run by Protractor +karma.conf.js --> config file for running unit tests with Karma +package.json --> Node.js specific metadata, including development tools dependencies +package-lock.json --> Npm specific metadata, including versions of installed development tools dependencies ``` @@ -117,8 +119,8 @@ The `angular-seed` app comes preconfigured with unit tests. These are written in which we run with the [Karma][karma] test runner. We provide a Karma configuration file to run them. * The configuration is found at `karma.conf.js`. -* The unit tests are found next to the code they are testing and have an `_test.js` suffix (e.g. - `view1_test.js`). +* The unit tests are found next to the code they are testing and have a `.spec.js` suffix (e.g. + `view1.spec.js`). The easiest way to run the unit tests is to use the supplied npm script: @@ -146,7 +148,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,26 +190,24 @@ 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 -bower) you can use these tools to easily update the dependencies. Simply run the preconfigured -script: +Since the AngularJS framework library code and tools are acquired through package managers (e.g. +npm) you can use these tools to easily update the dependencies. Simply run the preconfigured 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 +215,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 +236,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,13 +251,13 @@ 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 -somewhere they can be accessed by browsers. +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 -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). +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). ## Continuous Integration @@ -279,7 +279,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/app.js b/app/app.js index 6ea2401bcd..3a0ca2557e 100644 --- a/app/app.js +++ b/app/app.js @@ -1,6 +1,6 @@ 'use strict'; -// Declare app level module which depends on views, and components +// Declare app level module which depends on views, and core components angular.module('myApp', [ 'ngRoute', 'myApp.view1', diff --git a/app/components/version/interpolate-filter.js b/app/core/version/interpolate-filter.js similarity index 100% rename from app/components/version/interpolate-filter.js rename to app/core/version/interpolate-filter.js diff --git a/app/components/version/interpolate-filter_test.js b/app/core/version/interpolate-filter.spec.js similarity index 100% rename from app/components/version/interpolate-filter_test.js rename to app/core/version/interpolate-filter.spec.js diff --git a/app/components/version/version-directive.js b/app/core/version/version-directive.js similarity index 100% rename from app/components/version/version-directive.js rename to app/core/version/version-directive.js diff --git a/app/components/version/version-directive_test.js b/app/core/version/version-directive.spec.js similarity index 100% rename from app/components/version/version-directive_test.js rename to app/core/version/version-directive.spec.js diff --git a/app/components/version/version.js b/app/core/version/version.js similarity index 100% rename from app/components/version/version.js rename to app/core/version/version.js diff --git a/app/components/version/version_test.js b/app/core/version/version.spec.js similarity index 100% rename from app/components/version/version_test.js rename to app/core/version/version.spec.js diff --git a/app/index-async.html b/app/index-async.html index 281254ed11..e66b69c302 100644 --- a/app/index-async.html +++ b/app/index-async.html @@ -2,18 +2,18 @@ - - + + - + @@ -52,7 +52,7 @@
-
Angular seed app: v
+
AngularJS seed app: v
diff --git a/app/index.html b/app/index.html index ec9da03650..091d5a2df5 100644 --- a/app/index.html +++ b/app/index.html @@ -9,10 +9,10 @@ My AngularJS App - - + + - +