├── .gitignore
├── assets
    └── scss
    │   └── app.scss
├── dev
    ├── boot.ts
    └── app.component.ts
├── .editorconfig
├── tsconfig.json
├── README.md
├── package.json
├── LICENSE.md
├── index.html
└── gulpfile.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /app
3 | /src
4 | 


--------------------------------------------------------------------------------
/assets/scss/app.scss:
--------------------------------------------------------------------------------
1 | body {
2 |   padding: 32px;
3 |   margin: 32px;
4 |   font-family: "Roboto", Arial, sans-serif;
5 |   font-size: 16px;
6 | }
7 | 


--------------------------------------------------------------------------------
/dev/boot.ts:
--------------------------------------------------------------------------------
1 | ///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
2 | import {bootstrap} from 'angular2/platform/browser';
3 | import {AppComponent} from "./app.component";
4 | 
5 | bootstrap(AppComponent);


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/dev/app.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from 'angular2/core';
 2 | 
 3 | @Component({
 4 |     selector: 'my-app',
 5 |     template: `
 6 |         <h1>Angular 2 Boilerplate</h1>
 7 |         <p>Hello World!</p>
 8 |     `,
 9 | })
10 | export class AppComponent {
11 | 
12 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES5",
 4 |     "module": "system",
 5 |     "moduleResolution": "node",
 6 |     "sourceMap": true,
 7 |     "emitDecoratorMetadata": true,
 8 |     "experimentalDecorators": true,
 9 |     "removeComments": false,
10 |     "noImplicitAny": false,
11 |     "outDir": "./app"
12 |   },
13 |   "filesGlob": [
14 |     "./dev/**/*.ts",
15 |     "!./node_modules/**/*.ts"
16 |   ],
17 |   "exclude": [
18 |     "node_modules",
19 |     "typings/main",
20 |     "typings/main.d.ts"
21 |   ],
22 |   "atom": {
23 |     "rewriteTsconfig": true
24 |   }
25 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Angular 2 Beta Boilerplate
 2 | 
 3 | ## Description
 4 | This repository acts as a very simple Angular 2 Beta Boilerplate with which you can get started developing Angular 2 immediately.
 5 | It is derived from the official Angular 2 Documentation which can be found [here](https://angular.io/docs/ts/latest/quickstart.html).
 6 | ## Usage
 7 | Follow the following steps and you're good to go! Important: Typescript and npm has to be installed on your machine!
 8 | 
 9 | 1: Clone repo
10 | ```
11 | git clone https://github.com/mschwarzmueller/angular-2-beta-boilerplate.git
12 | ```
13 | 2: Install packages
14 | ```
15 | npm install
16 | ```
17 | 3: Start server (includes auto refreshing) and gulp watcher
18 | ```
19 | npm start
20 | ```
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular2-boilerplate",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "lite": "lite-server",
 6 |     "gulp": "gulp",
 7 |     "start": "concurrent \"npm run gulp\" \"npm run lite\" "
 8 |   },
 9 |   "license": "ISC",
10 |   "dependencies": {
11 |     "angular2": "2.0.0-beta.14",
12 |     "systemjs": "0.19.25",
13 |     "es6-shim": "^0.35.0",
14 |     "reflect-metadata": "0.1.2",
15 |     "rxjs": "5.0.0-beta.2",
16 |     "zone.js": "0.6.6"
17 |   },
18 |   "devDependencies": {
19 |     "autoprefixer": "^6.3.5",
20 |     "cssnano": "^3.4.0",
21 |     "concurrently": "^2.0.0",
22 |     "gulp": "^3.9.0",
23 |     "gulp-ext-replace": "^0.2.0",
24 |     "gulp-imagemin": "^2.4.0",
25 |     "gulp-postcss": "^6.0.1",
26 |     "gulp-sourcemaps": "^1.6.0",
27 |     "gulp-typescript": "^2.10.0",
28 |     "gulp-uglify": "^1.5.1",
29 |     "lite-server": "^2.1.0",
30 |     "postcss": "^5.0.13",
31 |     "postcss-scss": "^0.1.3",
32 |     "precss": "^1.3.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Maximilian Schwarzmüller
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype>
 2 | <html>
 3 | <head>
 4 |     <base href="/">
 5 |     <title>Angular 2 Boilerplate</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <!-- Load libraries -->
 8 |     <!-- IE required polyfills, in this exact order -->
 9 |     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
10 |     <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
11 |     <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
12 |     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
13 |     <script src="node_modules/systemjs/dist/system.src.js"></script>
14 |     <script src="node_modules/rxjs/bundles/Rx.js"></script>
15 |     <script src="node_modules/angular2/bundles/angular2.js"></script>
16 |     <script src="node_modules/angular2/bundles/router.dev.js"></script>
17 |     <script src="node_modules/angular2/bundles/http.js"></script>
18 | 
19 | 
20 |     <link rel="stylesheet" href="src/css/app.css">
21 | </head>
22 | <body>
23 | <my-app>Loading...</my-app>
24 | 
25 | <script>
26 |     System.config({
27 |         packages: {
28 |             app: {
29 |                 format: 'register',
30 |                 defaultExtension: 'js'
31 |             }
32 |         }
33 |     });
34 |     System.import('app/boot')
35 |             .then(null, console.error.bind(console));
36 | </script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | 
 3 | var assetsDev = 'assets/';
 4 | var assetsProd = 'src/';
 5 | 
 6 | var appDev = 'dev/';
 7 | var appProd = 'app/';
 8 | 
 9 | /* Mixed */
10 | var ext_replace = require('gulp-ext-replace');
11 | 
12 | /* CSS */
13 | var postcss = require('gulp-postcss');
14 | var sourcemaps = require('gulp-sourcemaps');
15 | var autoprefixer = require('autoprefixer');
16 | var precss = require('precss');
17 | var cssnano = require('cssnano');
18 | 
19 | /* JS & TS */
20 | var jsuglify = require('gulp-uglify');
21 | var typescript = require('gulp-typescript');
22 | 
23 | /* Images */
24 | var imagemin = require('gulp-imagemin');
25 | 
26 | var tsProject = typescript.createProject('tsconfig.json');
27 | 
28 | gulp.task('build-css', function () {
29 |     return gulp.src(assetsDev + 'scss/*.scss')
30 |         .pipe(sourcemaps.init())
31 |         .pipe(postcss([precss, autoprefixer, cssnano]))
32 |         .pipe(sourcemaps.write())
33 |         .pipe(ext_replace('.css'))
34 |         .pipe(gulp.dest(assetsProd + 'css/'));
35 | });
36 | 
37 | gulp.task('build-ts', function () {
38 |     return gulp.src(appDev + '**/*.ts')
39 |         .pipe(sourcemaps.init())
40 |         .pipe(typescript(tsProject))
41 |         .pipe(sourcemaps.write())
42 |         //.pipe(jsuglify())
43 |         .pipe(gulp.dest(appProd));
44 | });
45 | 
46 | gulp.task('build-img', function () {
47 |     return gulp.src(assetsDev + 'img/**/*')
48 |         .pipe(imagemin({
49 |             progressive: true
50 |         }))
51 |         .pipe(gulp.dest(assetsProd + 'img/'));
52 | });
53 | 
54 | gulp.task('build-html', function () {
55 |     return gulp.src(appDev + '**/*.html')
56 |         .pipe(gulp.dest(appProd));
57 | });
58 | 
59 | gulp.task('watch', function () {
60 |     gulp.watch(appDev + '**/*.ts', ['build-ts']);
61 |     gulp.watch(assetsDev + 'scss/**/*.scss', ['build-css']);
62 |     gulp.watch(assetsDev + 'img/*', ['build-img']);
63 | });
64 | 
65 | gulp.task('default', ['watch', 'build-ts', 'build-css']);


--------------------------------------------------------------------------------