├── .gitignore
├── src
├── app
│ ├── greeting
│ │ ├── greeting.css
│ │ ├── greeting.html
│ │ └── greeting.ts
│ └── bootstrap.ts
├── main.css
└── index.html
├── tsconfig.json
├── package.json
├── gulpfile.js
├── tslint.json
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 |
--------------------------------------------------------------------------------
/src/app/greeting/greeting.css:
--------------------------------------------------------------------------------
1 | h2 {
2 | color: red;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/greeting/greeting.html:
--------------------------------------------------------------------------------
1 | {{greeting}}
2 |
3 | Your Angular 2 seed is fully functioning!
4 |
--------------------------------------------------------------------------------
/src/app/bootstrap.ts:
--------------------------------------------------------------------------------
1 | import {bootstrap} from 'angular2/platform/browser';
2 | import Greeting from './greeting/greeting';
3 |
4 | bootstrap(Greeting);
5 |
--------------------------------------------------------------------------------
/src/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
3 | line-height: 1.4em;
4 | background: #f5f5f5;
5 | color: #4d4d4d;
6 | }
7 |
--------------------------------------------------------------------------------
/src/app/greeting/greeting.ts:
--------------------------------------------------------------------------------
1 | import {Component} from 'angular2/core';
2 |
3 | @Component({
4 | selector: 'greeting',
5 | templateUrl: 'app/greeting/greeting.html',
6 | styleUrls: ['app/greeting/greeting.css']
7 | })
8 | export default class Greeting {
9 | greeting = 'Hello World';
10 | }
11 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "1.6.2",
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "outDir": "dist",
6 | "emitDecoratorMetadata": true,
7 | "experimentalDecorators": true,
8 | "target": "es5",
9 | "module": "system",
10 | "moduleResolution": "node",
11 | "removeComments": true,
12 | "sourceMap": false,
13 | "noImplicitAny": true
14 | },
15 | "filesGlob": [
16 | "src/**/*.ts"
17 | ],
18 | "exclude": [
19 | "node_modules"
20 | ],
21 | "files": [
22 | "src/bootstrap.ts",
23 | "src/component/greeting/greeting.ts"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular2 seed
6 |
7 |
8 |
9 | Loading...
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular2-goldilocks-seed",
3 | "version": "2.1.2",
4 | "description": "A seed project for Angular 2 / TypeScript development",
5 | "repository": {
6 | "type": "git",
7 | "url": "git+https://github.com/ColinEberhardt/angular2-goldilocks-seed.git"
8 | },
9 | "author": "ceberhardt@scottlogic.com",
10 | "license": "ISC",
11 | "bugs": {
12 | "url": "https://github.com/ColinEberhardt/angular2-goldilocks-seed/issues"
13 | },
14 | "homepage": "https://github.com/ColinEberhardt/angular2-goldilocks-seed#readme",
15 | "devDependencies": {
16 | "browser-sync": "^2.10.0",
17 | "del": "^2.1.0",
18 | "gulp": "^3.9.0",
19 | "gulp-sourcemaps": "^1.6.0",
20 | "gulp-tslint": "^3.6.0",
21 | "gulp-typescript": "^2.8.0"
22 | },
23 | "dependencies": {
24 | "angular2": "2.0.0-beta.6",
25 | "systemjs": "0.19.6",
26 | "es6-promise": "^3.0.2",
27 | "es6-shim": "^0.33.3",
28 | "reflect-metadata": "0.1.2",
29 | "rxjs": "5.0.0-beta.0",
30 | "zone.js": "0.5.10"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | const gulp = require('gulp');
2 | const del = require('del');
3 | const typescript = require('gulp-typescript');
4 | const sourcemaps = require('gulp-sourcemaps');
5 | const tscConfig = require('./tsconfig.json');
6 | const browserSync = require('browser-sync');
7 | const tslint = require('gulp-tslint');
8 | const reload = browserSync.reload;
9 |
10 | const paths = {
11 | dist: 'dist',
12 | distFiles: 'dist/**/*',
13 | srcFiles: 'src/**/*',
14 | srcTsFiles: 'src/**/*.ts',
15 | }
16 |
17 | // clean the contents of the distribution directory
18 | gulp.task('clean', function () {
19 | return del(paths.distFiles);
20 | });
21 |
22 | // copy static assets - i.e. non TypeScript compiled source
23 | gulp.task('copy:assets', ['clean'], function() {
24 | return gulp.src([paths.srcFiles, '!' + paths.srcTsFiles])
25 | .pipe(gulp.dest(paths.dist))
26 | });
27 |
28 | // copy dependencies
29 | gulp.task('copy:libs', ['clean'], function() {
30 | return gulp.src([
31 | 'node_modules/angular2/bundles/angular2-polyfills.js',
32 | 'node_modules/systemjs/dist/system.src.js',
33 | 'node_modules/rxjs/bundles/Rx.js',
34 | 'node_modules/angular2/bundles/angular2.dev.js'
35 | ])
36 | .pipe(gulp.dest('dist/lib'))
37 | });
38 |
39 | // TypeScript compile
40 | gulp.task('compile', ['clean'], function () {
41 | return gulp
42 | .src(paths.srcTsFiles)
43 | .pipe(sourcemaps.init())
44 | .pipe(typescript(tscConfig.compilerOptions))
45 | .pipe(sourcemaps.write('./maps'))
46 | .pipe(gulp.dest(paths.dist));
47 | });
48 |
49 | // linting
50 | gulp.task('tslint', function(){
51 | return gulp.src(paths.srcTsFiles)
52 | .pipe(tslint())
53 | .pipe(tslint.report('verbose'));
54 | });
55 |
56 | // Run browsersync for development
57 | gulp.task('serve', ['build'], function() {
58 | browserSync({
59 | server: {
60 | baseDir: paths.dist
61 | }
62 | });
63 |
64 | gulp.watch(paths.srcFiles, ['buildAndReload']);
65 | });
66 |
67 | gulp.task('build', ['tslint', 'clean', 'compile', 'copy:libs', 'copy:assets']);
68 | gulp.task('buildAndReload', ['build'], reload);
69 | gulp.task('default', ['build']);
70 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "align": [
4 | true,
5 | "parameters",
6 | "arguments",
7 | "statements"
8 | ],
9 | "ban": false,
10 | "class-name": true,
11 | "comment-format": [
12 | true,
13 | "check-space",
14 | "check-lowercase"
15 | ],
16 | "curly": true,
17 | "eofline": true,
18 | "forin": true,
19 | "indent": [
20 | true,
21 | "spaces"
22 | ],
23 | "interface-name": true,
24 | "jsdoc-format": true,
25 | "label-position": true,
26 | "label-undefined": true,
27 | "max-line-length": [
28 | true,
29 | 140
30 | ],
31 | "member-ordering": [
32 | true,
33 | "public-before-private",
34 | "static-before-instance",
35 | "variables-before-functions"
36 | ],
37 | "no-any": false,
38 | "no-arg": true,
39 | "no-bitwise": true,
40 | "no-conditional-assignment": true,
41 | "no-consecutive-blank-lines": false,
42 | "no-console": [
43 | true,
44 | "debug",
45 | "info",
46 | "time",
47 | "timeEnd",
48 | "trace"
49 | ],
50 | "no-construct": true,
51 | "no-constructor-vars": true,
52 | "no-debugger": true,
53 | "no-duplicate-key": true,
54 | "no-duplicate-variable": true,
55 | "no-empty": true,
56 | "no-eval": true,
57 | "no-inferrable-types": false,
58 | "no-internal-module": true,
59 | "no-require-imports": true,
60 | "no-shadowed-variable": true,
61 | "no-string-literal": true,
62 | "no-switch-case-fall-through": true,
63 | "no-trailing-whitespace": true,
64 | "no-unreachable": true,
65 | "no-unused-expression": true,
66 | "no-unused-variable": true,
67 | "no-use-before-declare": true,
68 | "no-var-keyword": true,
69 | "no-var-requires": true,
70 | "object-literal-sort-keys": true,
71 | "one-line": [
72 | true,
73 | "check-open-brace",
74 | "check-catch",
75 | "check-else",
76 | "check-whitespace"
77 | ],
78 | "quotemark": [
79 | true,
80 | "single",
81 | "avoid-escape"
82 | ],
83 | "radix": true,
84 | "semicolon": true,
85 | "switch-default": true,
86 | "trailing-comma": [
87 | true,
88 | {
89 | "multiline": "always",
90 | "singleline": "never"
91 | }
92 | ],
93 | "triple-equals": [
94 | true,
95 | "allow-null-check"
96 | ],
97 | "typedef": false,
98 | "typedef-whitespace": [
99 | true,
100 | {
101 | "call-signature": "nospace",
102 | "index-signature": "nospace",
103 | "parameter": "nospace",
104 | "property-declaration": "nospace",
105 | "variable-declaration": "nospace"
106 | }
107 | ],
108 | "use-strict": false,
109 | "variable-name": [
110 | true,
111 | "check-format",
112 | "allow-leading-underscore",
113 | "ban-keywords"
114 | ],
115 | "whitespace": [
116 | true,
117 | "check-branch",
118 | "check-decl",
119 | "check-operator",
120 | "check-separator",
121 | "check-type"
122 | ]
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular 2.0 (beta 6) + TypeScript seed - "Goldilocks Edition"
2 |
3 | Setting up a build for Angular 2.0 is a non-trivial task and can suck up a lot of your time. I found a few 'seed' projects, which provide a good starting point for Angular 2.0 development, however the ones I found were either [too simple](https://github.com/pkozlowski-opensource/ng2-play) or [far too complicated](https://github.com/mgechev/angular2-seed) for my needs. That's why I decided to put together a simple, yet complete, seed project that was "just right", the [Goldilocks](https://en.wikipedia.org/wiki/Goldilocks_and_the_Three_Bears) of seed projects!
4 |
5 | This project has TypeScript compilation, source maps, linting, live reload and also packages the built output into a distribution folder.
6 |
7 | ## Usage
8 |
9 | Clone or copy this project, then use npm to fetch the dependencies:
10 |
11 | ```
12 | npm install
13 | ```
14 |
15 | If you haven't used gulp before, install it as a global:
16 |
17 | ```
18 | npm install -g gulp
19 | ```
20 |
21 | Now build the project:
22 |
23 | ```
24 | gulp
25 | ```
26 |
27 | You should see something like the following:
28 |
29 | ```
30 | $ gulp
31 | [08:13:14] Using gulpfile ~/Projects/angular2-seed/gulpfile.js
32 | [08:13:14] Starting 'tslint'...
33 | [08:13:14] Starting 'clean'...
34 | [08:13:15] Finished 'tslint' after 303 ms
35 | [08:13:15] Finished 'clean' after 295 ms
36 | [08:13:15] Starting 'compile'...
37 | [08:13:15] Starting 'copy:libs'...
38 | [08:13:15] Starting 'copy:assets'...
39 | [08:13:18] Finished 'copy:libs' after 2.86 s
40 | [08:13:18] Finished 'copy:assets' after 2.86 s
41 | [08:13:18] Finished 'compile' after 2.88 s
42 | [08:13:18] Starting 'build'...
43 | [08:13:18] Finished 'build' after 43 μs
44 | [08:13:18] Starting 'default'...
45 | [08:13:18] Finished 'default' after 16 μs
46 | ```
47 |
48 | The built output is now in the `dist` folder - you can now start up a local development server to see the results:
49 |
50 | ---
51 |
52 | ##Hello World
53 |
54 | Your Angular 2 seed is fully functioning!
55 |
56 | ---
57 |
58 | For faster development cycles you can run the following:
59 |
60 | ```
61 | gulp serve
62 | ```
63 |
64 | This command runs the build and starts up a development server pointing at the output. The `src` folder is watched for changes with the development server reloading automatically when the changes have been built.
65 |
66 | ## Folder structure
67 |
68 | The following is a brief overview of everything in this project:
69 |
70 | - `dist` - this folder is constructed by the build and contains the compiled output ready to be served
71 | - `src` - all of the project source lives in this folder
72 | - `src/app/greeting/greeting.*` - the one Angular 2 component that this project contains, containing the modules TypeScript, HTML and CSS.
73 | - `src/app/bootstrap.ts` - the entry point of the application
74 | - `src/index.html` - the HTML for page which bootstraps the app. This loads Angular, SystemJS then loads the bootstrap code.
75 | - `src/main.css` - CSS for index page
76 |
77 | - `gulpfile.js` - the gulp build
78 | - `package.json` - details the nature of this project and its dependencies (as used by `npm install`)
79 | - `tsconfig.json` - the TypeScript compiler configuration
80 | - `tslint.json` - the TypeScript linter configuration
81 |
82 | ## Development tools
83 |
84 | For Angular 2 / TypeScript development I am using the Atom editor with the **atom-typescript** plugin, which together with **linter-ts**.
85 |
--------------------------------------------------------------------------------