chore(*): refactor, improve, upgrade

.gitignore

@@ -1,7 +1,7 @@
 logs/*
 !.gitkeep
 node_modules/
-bower_components/
+app/lib/
 tmp
 .DS_Store
 .idea

.jshintrc

@@ -1,10 +1,10 @@
 {
   "strict": "global",
   "globals": {
-    // Angular
+    // AngularJS
     "angular": false,
 
-    // Angular mocks
+    // AngularJS mocks
     "module": false,
     "inject": false,
 

.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

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,39 +190,37 @@ 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:
 
 ```
 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/

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

app/index-async.html

@@ -2,18 +2,18 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
+  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
+  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
   <style>
     [ng-cloak] {
       display: none;
     }
   </style>
-  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
+  <script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
   <script>
-    // include angular loader, which allows the files to load in any order
+    // include AngularJS loader, which allows the files to load in any order
     //@@NG_LOADER_START@@
-    // You need to run `npm run update-index-async` to inject the angular async code here
+    // You need to run `npm run update-index-async` to inject the AngularJS async code here
     //@@NG_LOADER_END@@
 
     // include a third-party async loader library
@@ -28,16 +28,16 @@
 
     // load all of the dependencies asynchronously.
     $script([
-      'bower_components/angular/angular.js',
-      'bower_components/angular-route/angular-route.js',
+      'lib/angular/angular.js',
+      'lib/angular-route/angular-route.js',
       'app.js',
       'view1/view1.js',
       'view2/view2.js',
-      'components/version/version.js',
-      'components/version/version-directive.js',
-      'components/version/interpolate-filter.js'
+      'core/version/version.js',
+      'core/version/version-directive.js',
+      'core/version/interpolate-filter.js'
     ], function() {
-      // when all is done, execute bootstrap angular application
+      // when all is done, execute bootstrap AngularJS application
       angular.bootstrap(document, ['myApp']);
     });
   </script>
@@ -52,7 +52,7 @@
 
   <div ng-view></div>
 
-  <div>Angular seed app: v<span app-version></span></div>
+  <div>AngularJS seed app: v<span app-version></span></div>
 
 </body>
 </html>

app/index.html

@@ -9,10 +9,10 @@
   <title>My AngularJS App</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
+  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
+  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
   <link rel="stylesheet" href="app.css">
-  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
+  <script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
 </head>
 <body>
   <ul class="menu">
@@ -26,18 +26,18 @@
 
   <div ng-view></div>
 
-  <div>Angular seed app: v<span app-version></span></div>
+  <div>AngularJS seed app: v<span app-version></span></div>
 
   <!-- In production use:
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
   -->
-  <script src="bower_components/angular/angular.js"></script>
-  <script src="bower_components/angular-route/angular-route.js"></script>
+  <script src="lib/angular/angular.js"></script>
+  <script src="lib/angular-route/angular-route.js"></script>
   <script src="app.js"></script>
   <script src="view1/view1.js"></script>
   <script src="view2/view2.js"></script>
-  <script src="components/version/version.js"></script>
-  <script src="components/version/version-directive.js"></script>
-  <script src="components/version/interpolate-filter.js"></script>
+  <script src="core/version/version.js"></script>
+  <script src="core/version/version-directive.js"></script>
+  <script src="core/version/interpolate-filter.js"></script>
 </body>
 </html>

e2e-tests/protractor.conf.js

@@ -8,7 +8,7 @@ exports.config = {
   ],
 
   capabilities: {
-    'browserName': 'chrome'
+    browserName: 'chrome'
   },
 
   baseUrl: 'http://localhost:8000/',