Major Restructuring (#88)

Bugs:

* Fixed reload issue


Enhancements:

* Made close button look clickable
* Folder restructure
* Test refactor

.gitignore

@@ -3,6 +3,6 @@
 /build
 /report
 /typings
-/tmp
+/src/tmp
 .DS_Store
-assets/styles/*.css
+/src/assets/styles/*.css

.travis.yml

@@ -10,4 +10,5 @@ node_js:
   - "4.3"
 script: gulp build
 after_script:
+  - npm install coveralls
   - npm run-script coveralls

README.md

@@ -8,8 +8,11 @@
 
 
 > Angular 2 is still in **Release Candidate** stage, please **don't** use this in production
+
 > Follow Angular 2 Changelog [here](https://github.com/angular/angular/blob/master/CHANGELOG.md)
 
+> Live Production Build [Demo](https://antonybudianto.github.io/angular2-starter/)
+
 ## Table of Content
 * [Introduction](#introduction)
 * [Installation](#installation)
@@ -43,9 +46,12 @@ Please visit the [wiki](https://github.com/antonybudianto/angular2-starter/wiki)
 Firstly, you need to have [Node.js](https://nodejs.org/en/)
 - For v4, please use v4.3.x (LTS) or higher (**highly** recommended)
 - For v5, please use v5.6.x or higher, here is [why](https://nodejs.org/en/blog/vulnerability/february-2016-security-releases/)
+- Ready for v6
 
 > You need v4.x or higher for [Protractor](https://angular.github.io/protractor/#/)
 
+Get the starter from [releases page](https://github.com/antonybudianto/angular2-starter/releases)
+
 Then, install these packages globally:
 ```bash
 npm install -g gulp
@@ -84,7 +90,7 @@ To begin testing, run:
 ```bash
 gulp e2e
 ```
-and it'll compile all E2E spec files in `/test/e2e/*.spec.ts`, boot up Selenium server then launches Chrome browser.
+and it'll compile all E2E spec files in `/src/test/e2e/*.spec.ts`, boot up Selenium server then launches Chrome browser.
 
 ## Production
 > All build tasks will run the `gulp test`, the bundle will only be created if the test passed.
@@ -101,7 +107,7 @@ The starter defaults to bundle using [SystemJS Builder extension](https://github
 There is [Webpack extension](https://github.com/ngstarter/ngstarter-webpack-tasks) available too, feel free to swap it as you like.
 
 ## Extension
-You can extend this starter with many extensions built by open source community. Browse the extensions [here](https://github.com/ngstarter)
+You can extend this starter with many extensions built by the community. Browse the extensions [here](https://github.com/ngstarter)
 
 ## Contributing
 Feel free to submit a PR if there are any issues or new features, read [this](https://github.com/antonybudianto/angular2-starter/blob/master/CONTRIBUTING.md) before

gulp.config.js

@@ -2,18 +2,22 @@ var historyApiFallback = require('connect-history-api-fallback')
 
 module.exports = function () {
     var root = '';
-    var app = root + 'app/';
-    var test = root + 'test/';
-    var tmp = root + 'tmp/';
+    var src = root + 'src/';
+    var app = src + 'app/';
+    var test = src + 'test/';
+    var tmp = src + 'tmp/';
+    var tmpApp = tmp + 'app/';
+    var tmpTest = tmp + 'test/';
     var testHelper = test + 'test-helpers/';
     var e2e = test + 'e2e/';
-    var assets = root + 'assets/';
+    var tmpE2E = tmpTest + 'e2e/';
+    var assets = src + 'assets/';
     var assetsPath = {
         styles: assets + 'styles/',
         images: assets + 'images/',
         fonts: assets + 'fonts/'
     };
-    var index = root + 'index.html';
+    var index = src + 'index.html';
     var tsFiles = [
         app + '**/!(*.spec)+(.ts)'
     ];
@@ -41,16 +45,19 @@ module.exports = function () {
         dev: {
             port: 3000,
             server: {
-                baseDir: './',
-                middleware: [historyApiFallback()]
+                baseDir: './src/',
+                middleware: [historyApiFallback()],
+                routes: {
+                    "/node_modules": "node_modules"
+                }
             },
             files: [
-                "index.html",
-                "systemjs.conf.js",
-                "assets/styles/main.css",
-                "tmp/app/**/*.js",
-                "app/**/*.css",
-                "app/**/*.html"
+                src + "index.html",
+                src + "systemjs.conf.js",
+                src + "assets/styles/main.css",
+                tmpApp + "**/*.js",
+                app + "**/*.css",
+                app + "**/*.html"
             ]
         },
         prod: {
@@ -78,9 +85,13 @@ module.exports = function () {
 
     var config = {
         root: root,
+        src: src,
         app: app,
         test: test,
         tmp: tmp,
+        tmpApp: tmpApp,
+        tmpTest: tmpTest,
+        tmpE2E: tmpE2E,
         testHelper: testHelper,
         e2e: e2e,
         e2eConfig: e2eConfig,

karma-test-shim.js

@@ -30,7 +30,7 @@ function onlySpecFiles(path) {
 // Normalize paths to module names.
 function file2moduleName(filePath) {
   return filePath.replace(/\\/g, '/')
-    .replace(/^\/base\//, '')
+    .replace(/^\/base\/src\/tmp\//, '')
     .replace(/\.js/, '');
 }
 

karma.conf.js

@@ -1,20 +1,17 @@
 module.exports = function(config) {
+  var gulpConfig = require('./gulp.config')();
   var dependencies = require('./package.json').dependencies;
   var excludedDependencies = [
     'systemjs', 'zone.js', 'font-awesome'
   ];
   var configuration = {
-    basePath: '',
+    basePath: './',
 
     frameworks: ['jasmine'],
     browsers: ['PhantomJS'],
     reporters: ['progress', 'coverage'],
 
-    preprocessors: {
-      'tmp/app/**/!(*.spec)+(.js)': ['coverage'],
-      'tmp/app/**/*.js': ['sourcemap'],
-      'tmp/test/**/*.js': ['sourcemap']
-    },
+    preprocessors: {},
 
     // Generate json used for remap-istanbul
     coverageReporter: {
@@ -26,38 +23,20 @@ module.exports = function(config) {
 
     files: [
       'node_modules/traceur/bin/traceur-runtime.js',
-      // IE required polyfills, in this exact order
       'node_modules/es6-shim/es6-shim.min.js',
       'node_modules/systemjs/dist/system-polyfills.js',
       'node_modules/zone.js/dist/zone.js',
       'node_modules/reflect-metadata/Reflect.js',
       'node_modules/zone.js/dist/async-test.js',
       'node_modules/zone.js/dist/fake-async-test.js',
-      'node_modules/systemjs/dist/system.src.js',
-
-      'tmp/test/test-helpers/global/**/*.js',
-      'systemjs.conf.js',
-      'karma-test-shim.js',
-
-      { pattern: 'tmp/app/**/*.js', included: false },
-      { pattern: 'tmp/test/test-helpers/*.js', included: false },
-
-      // paths loaded via Angular's component compiler
-      // (these paths need to be rewritten, see proxies section)
-      { pattern: 'app/**/*.html', included: false },
-      { pattern: 'app/**/*.css', included: false },
-
-      // paths to support debugging with source maps in dev tools
-      { pattern: 'app/**/*.ts', included: false, watched: false },
-      { pattern: 'tmp/app/**/*.js.map', included: false, watched: false }
+      'node_modules/systemjs/dist/system.src.js'
     ],
 
     // proxied base paths
     proxies: {
       // required for component assests fetched by Angular's compiler
-      "/app/": "/base/app/",
-      "/tmp/app/": "/base/tmp/app/",
-      "/tmp/test/": "/base/tmp/test/",
+      "/app/": "/base/src/app/",
+      "/tmp/": "/base/src/tmp/",
       "/node_modules/": "/base/node_modules/"
     },
 
@@ -67,6 +46,24 @@ module.exports = function(config) {
     autoWatch: true,
   };
 
+  configuration.preprocessors[gulpConfig.tmpApp + '**/!(*.spec)+(.js)'] = ['coverage'];
+  configuration.preprocessors[gulpConfig.tmpApp + '**/*.js'] = ['sourcemap'];
+  configuration.preprocessors[gulpConfig.tmpTest + '**/*.js'] = ['sourcemap'];
+
+  var files = [
+    gulpConfig.tmpTest + 'test-helpers/global/**/*.js',
+    gulpConfig.src + 'systemjs.conf.js',
+    'karma-test-shim.js',
+    createFilePattern(gulpConfig.tmpApp + '**/*.js', { included: false }),
+    createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', { included: false }),
+    createFilePattern(gulpConfig.app + '**/*.html', { included: false }),
+    createFilePattern(gulpConfig.app + '**/*.css', { included: false }),
+    createFilePattern(gulpConfig.app + '**/*.ts', { included: false, watched: false }),
+    createFilePattern(gulpConfig.tmpApp + '**/*.js.map', { included: false, watched: false })
+  ];
+
+  configuration.files = configuration.files.concat(files);
+
   Object.keys(dependencies).forEach(function(key) {
     if(excludedDependencies.indexOf(key) >= 0) { return; }
 
@@ -84,4 +81,10 @@ module.exports = function(config) {
   }
 
   config.set(configuration);
+
+  // Helpers
+  function createFilePattern(path, config) {
+    config.pattern = path;
+    return config;
+  }
 }

package.json

@@ -1,9 +1,9 @@
 {
   "name": "angular2-starter",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "author": "Antony Budianto",
-  "description": "Angular 2 Starter with Gulp, Karma, Jasmine, Protractor using SystemJS",
-  "main": "index.html",
+  "description": "Angular 2 Starter with extensible features",
+  "main": "src/tmp/app/main.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/antonybudianto/angular2-starter.git"
@@ -19,6 +19,8 @@
     "starter",
     "seed",
     "gulp",
+    "webpack",
+    "extensible",
     "systemjs",
     "systemjs builder",
     "travis",
@@ -42,17 +44,16 @@
     "es6-shim": "^0.35.0",
     "font-awesome": "^4.6.1",
     "jquery": "^2.2.3",
-    "lodash": "^4.11.0",
+    "lodash": "^4.13.1",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
-    "systemjs": "^0.19.27",
+    "systemjs": "^0.19.29",
     "zone.js": "^0.6.12"
   },
   "devDependencies": {
     "browser-sync": "^2.12.8",
     "codelyzer": "0.0.19",
     "connect-history-api-fallback": "^1.2.0",
-    "coveralls": "^2.11.9",
     "del": "~2.2.0",
     "glob": "^7.0.3",
     "gulp": "^3.9.1",
@@ -74,15 +75,14 @@
     "karma-jasmine": "~1.0.2",
     "karma-phantomjs-launcher": "~1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "ngstarter-systemjs-tasks": "^1.0.0-rc.0",
+    "ngstarter-systemjs-tasks": "1.0.0-rc.1",
     "phantomjs-prebuilt": "^2.1.7",
     "remap-istanbul": "~0.6.4",
     "require-dir": "~0.3.0",
-    "run-sequence": "^1.2.0",
-    "systemjs-builder": "~0.15.16",
-    "traceur": "~0.0.108",
+    "run-sequence": "^1.2.1",
+    "traceur": "~0.0.110",
     "tslint": "^3.10.2",
-    "typings": "^1.0.3",
+    "typings": "^1.0.4",
     "yargs": "^4.7.1"
   }
 }

app/todolist/todolist.html → src/app/todolist/todolist.html

@@ -1,6 +1,7 @@
 <style>
     .badge:hover {
         background-color: orangered;
+        cursor: pointer;
     }
     .list-options {
         vertical-align: middle;

src/assets/styles/bootstrap.scss

@@ -0,0 +1,2 @@
+@import 'bootstrap.variables';
+@import '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

index.html → src/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <!-- build:css assets/bundle.css -->
-    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
+    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css">
     <!-- app:css -->
     <link rel="stylesheet" href="/assets/styles/main.css">
     <!-- endinject -->
@@ -17,23 +17,23 @@
     </as-main-app>
 
     <!-- build:js assets/lib.js -->
-    <script src="node_modules/jquery/dist/jquery.js"></script>
-    <script src="node_modules/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
+    <script src="../node_modules/jquery/dist/jquery.js"></script>
+    <script src="../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
 
     <!-- 1. Load libraries -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="../node_modules/zone.js/dist/zone.js"></script>
+    <script src="../node_modules/reflect-metadata/Reflect.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
     <!-- endbuild -->
 
     <!-- build:js assets/app.js -->
     <script src="tmp/app/bundle.js"></script>
     <!-- endbuild -->
 
     <!-- build:remove -->
-    <script src="node_modules/systemjs/dist/system.js"></script>
+    <script src="../node_modules/systemjs/dist/system.js"></script>
     <script src="systemjs.conf.js"></script>
     <script>
       System.import('app/main.js')

systemjs.conf.js → src/systemjs.conf.js

@@ -24,6 +24,9 @@
 
     // packages tells the System loader how to load when no filename and/or no extension
     var packages = {
+        'src/tmp/app': {
+            defaultExtension: 'js'
+        },
         'app': {
             defaultExtension: 'js'
         },

tasks/build.js

@@ -28,6 +28,9 @@ gulp.task('build-assets', function (done) {
         .pipe(cssnano())
         .pipe(gulp.dest(config.build.app));
 
+        gulp.src(config.src + 'favicon.ico')
+        .pipe(gulp.dest(config.build.path));
+
         gulp.src(config.assetsPath.images + '**/*.*', {
             base: config.assetsPath.images
         })

tasks/clean.js

@@ -26,17 +26,9 @@ gulp.task('clean-ts', function () {
 });
 
 gulp.task('clean-ts-app', function () {
-    return del([
-        config.tmp + config.app + '**/*.js',
-        config.tmp + config.app + '**/*.js.map'
-    ]);
+    return del([config.tmpApp]);
 });
 
 gulp.task('clean-ts-test', function () {
-    return del([
-        config.tmp + config.app + '**/*.spec.js',
-        config.tmp + config.app + '**/*.spec.js.map',
-        config.tmp + config.test + '**/*.js',
-        config.tmp + config.test + '**/*.js.map'
-    ]);
+    return del([config.tmpTest]);
 });