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]);
 });