├── README.md ├── after ├── .gitignore ├── README.md ├── gulpfile.js ├── package.json └── src │ ├── app │ └── app.js │ ├── home │ ├── home.html │ └── home.js │ ├── index.css │ ├── index.html │ ├── index.js │ ├── login │ ├── login.css │ ├── login.html │ └── login.js │ └── services │ ├── auth.js │ └── words.js └── before ├── .gitignore ├── README.md ├── gulpfile.js ├── package.json └── src ├── index.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Angular 2 demo + JWT 2 | 3 | This is a demo of `Angular 2` (-alpha.21) which contains a basic application with `JWT` authentication. 4 | 5 | It uses the boilerplate made by [Pawel Kozlowski](https://github.com/pkozlowski-opensource) called [ng2-play](https://github.com/pkozlowski-opensource/ng2-play). 6 | 7 | This example is heavily inspired in the demo made by [Matias Gontovnikas](https://github.com/mgonto) and [PatrickJS](https://github.com/gdi2290) which is also an `Angular 2` demo with `JWT` [angular2-authentication-sample](https://github.com/auth0/angular2-authentication-sample). 8 | 9 | If you want to learn more about this demo, visit [Angular-Tips](http://angular-tips.com/blog/2015/05/an-introduction-to-angular-2/) 10 | 11 | If you just want to run it, download the companion [backend](https://github.com/angular-tips/GermanWords-backend-koa), run it and then: 12 | 13 | ``` 14 | $ cd after 15 | $ npm install 16 | $ npm start 17 | ``` 18 | 19 | Then visit [http://localhost:3000](http://localhost:3000) -------------------------------------------------------------------------------- /after/.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | npm-debug.log 4 | dist 5 | -------------------------------------------------------------------------------- /after/README.md: -------------------------------------------------------------------------------- 1 | ng2-play 2 | ======== 3 | 4 | The goal of this repo is to prepare a minimal ("walking skeleton") project build with Angular2.0 and ES6 5 | 6 | ## Install 7 | 8 | Clone this repo and execute in your favourite shell: 9 | 10 | * `npm i -g gulp` to install gulp globally (if you don't have it installed already) 11 | * `npm i` to install local npm dependencies 12 | 13 | ## Play 14 | 15 | After completing installation type in your favourite shell: 16 | 17 | * `gulp play` (or `npm start`) to start a "Hello World" app in a new browser window. App files are observed and will be re-transpiled on each change. 18 | 19 | ## Dependencies 20 | 21 | * ES6 -> ES5 transpilation 22 | * [traceur](https://github.com/google/traceur-compiler): ES6 -> ES5 transpilation 23 | * ES6 modules loading 24 | * [es6-module-loader](https://github.com/ModuleLoader/es6-module-loader): ES6 module loader polyfill 25 | * [systemjs](https://github.com/systemjs/systemjs): plugins for the ES6 module loader to handle different module formats - this is mostly needed to load module format generated by traceur 26 | 27 | ## Learning materials 28 | 29 | ### Zones / long stack-traces 30 | 31 | * [original repo](https://github.com/angular/zone.js) 32 | * [zones in Dart](https://www.dartlang.org/articles/zones/) 33 | * [zones in node](http://strongloop.com/strongblog/comparing-node-js-promises-trycatch-zone-js-angular/) 34 | 35 | ### ES6 module loading 36 | 37 | * [Practical Workflows for ES6 Modules, Fluent 2014](https://www.youtube.com/watch?v=0VUjM-jJf2U) 38 | * [Guy Bedford: Package Management for ES6 Modules, JSConf2014](https://www.youtube.com/watch?v=szJjsduHBQQ) 39 | * [Loader API specification](http://whatwg.github.io/loader/) 40 | -------------------------------------------------------------------------------- /after/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var del = require('del'); 3 | var plumber = require('gulp-plumber'); 4 | var rename = require('gulp-rename'); 5 | var traceur = require('gulp-traceur'); 6 | var rework = require('rework'); 7 | var npmRework = require('rework-npm'); 8 | var path = require('path'); 9 | var fs = require('fs'); 10 | var mkpath = require('mkpath'); 11 | 12 | var PATHS = { 13 | src: { 14 | js: 'src/**/*.js', 15 | html: 'src/**/*.html', 16 | css: { 17 | main: 'src/index.css', 18 | all: 'src/**/*.css' 19 | } 20 | }, 21 | lib: [ 22 | 'node_modules/gulp-traceur/node_modules/traceur/bin/traceur-runtime.js', 23 | 'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js', 24 | 'node_modules/systemjs/lib/extension-register.js', 25 | 'node_modules/angular2/node_modules/zone.js/zone.js', 26 | 'node_modules/whatwg-fetch/fetch.js', 27 | 'node_modules/jwt-decode/build/jwt-decode.js', 28 | 'node_modules/angular2/node_modules/zone.js/long-stack-trace-zone.js' 29 | ] 30 | }; 31 | 32 | gulp.task('clean', function(done) { 33 | del(['dist'], done); 34 | }); 35 | 36 | gulp.task('js', function () { 37 | return gulp.src(PATHS.src.js) 38 | .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 39 | .pipe(plumber()) 40 | .pipe(traceur({ 41 | modules: 'instantiate', 42 | moduleName: true, 43 | annotations: true, 44 | types: true, 45 | memberVariables: true 46 | })) 47 | .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 48 | .pipe(gulp.dest('dist')); 49 | }); 50 | 51 | gulp.task('html', function () { 52 | return gulp.src(PATHS.src.html) 53 | .pipe(gulp.dest('dist')); 54 | }); 55 | 56 | gulp.task('css', function() { 57 | var file = path.resolve(PATHS.src.css.main); 58 | var source = path.relative(__dirname, file); 59 | mkpath.sync('dist'); 60 | var output = fs.createWriteStream('dist/build.css'); 61 | var contents = fs.readFileSync(file, {encoding: 'utf8'}); 62 | 63 | // Initialize and pluginize `rework` 64 | var css = rework(contents); 65 | css.use(npmRework()); 66 | 67 | // write result 68 | output.write(css.toString()) 69 | output.end(); 70 | }); 71 | 72 | gulp.task('libs', ['angular2', 'router'], function () { 73 | var size = require('gulp-size'); 74 | return gulp.src(PATHS.lib) 75 | .pipe(size({showFiles: true, gzip: true})) 76 | .pipe(gulp.dest('dist/lib')); 77 | }); 78 | 79 | 80 | gulp.task('angular2', function () { 81 | 82 | var buildConfig = { 83 | paths: { 84 | "angular2/*": "node_modules/angular2/es6/prod/*.es6", 85 | "rx/*": "node_modules/angular2/node_modules/rx/*.js" 86 | } 87 | }; 88 | 89 | var Builder = require('systemjs-builder'); 90 | var builder = new Builder(buildConfig); 91 | 92 | return builder.build('angular2/angular2', 'dist/lib/angular2.js', {}); 93 | }); 94 | 95 | gulp.task('router', function () { 96 | 97 | var buildConfig = { 98 | paths: { 99 | "angular2/*": "node_modules/angular2/es6/prod/*.es6", 100 | "rx/*": "node_modules/angular2/node_modules/rx/*.js" 101 | } 102 | }; 103 | 104 | var Builder = require('systemjs-builder'); 105 | var builder = new Builder(buildConfig); 106 | 107 | return builder.build('angular2/router', 'dist/lib/router.js', {}); 108 | }); 109 | 110 | gulp.task('play', ['default'], function () { 111 | 112 | var http = require('http'); 113 | var connect = require('connect'); 114 | var serveStatic = require('serve-static'); 115 | var open = require('open'); 116 | var port = 3000; 117 | var app; 118 | 119 | gulp.watch(PATHS.src.html, ['html']); 120 | gulp.watch(PATHS.src.js, ['js']); 121 | gulp.watch(PATHS.src.css.all, ['css']); 122 | 123 | app = connect(); 124 | 125 | app.use(serveStatic(__dirname + '/dist')); // serve everything that is static 126 | 127 | http.createServer(app).listen(port, function () { 128 | console.log('\n', 'Server listening on port', port, '\n') 129 | // open('http://localhost:' + port); 130 | }); 131 | }); 132 | 133 | gulp.task('default', ['js', 'css', 'html', 'libs']); -------------------------------------------------------------------------------- /after/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng2-play", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "test": "echo \"Error: no test specified\" && exit 1", 6 | "start": "gulp play" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/pkozlowski-opensource/ng2-play.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/pkozlowski-opensource/ng2-play/issues" 14 | }, 15 | "homepage": "https://github.com/pkozlowski-opensource/ng2-play", 16 | "devDependencies": { 17 | "connect": "^3.3.4", 18 | "del": "~1.1.1", 19 | "gulp": "~3.8.10", 20 | "gulp-plumber": "^1.0.0", 21 | "gulp-rename": "~1.2.0", 22 | "gulp-size": "^1.2.1", 23 | "gulp-traceur": "0.17.*", 24 | "mkpath": "~0.1.0", 25 | "open": "0.0.5", 26 | "rework": "~1.0.1", 27 | "rework-npm": "~1.0.0", 28 | "serve-static": "~1.8.1", 29 | "systemjs-builder": "^0.10.3", 30 | "through2": "~0.6.3" 31 | }, 32 | "dependencies": { 33 | "angular2": "2.0.0-alpha.21", 34 | "bootstrap": "~3.3.4", 35 | "es6-module-loader": "0.16.5", 36 | "jwt-decode": "~1.1.0", 37 | "systemjs": "~0.16.10", 38 | "whatwg-fetch": "~0.7.0", 39 | "when": "~3.7.3" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /after/src/app/app.js: -------------------------------------------------------------------------------- 1 | import {View, Component} from 'angular2/angular2'; 2 | import {Router, RouterOutlet} from 'angular2/router'; 3 | import {Home} from '../home/home'; 4 | import {Login} from '../login/login'; 5 | 6 | @Component({ 7 | selector: 'words-app' 8 | }) 9 | @View({ 10 | template: ``, 11 | directives: [RouterOutlet] 12 | }) 13 | export class App { 14 | constructor(router: Router) { 15 | router 16 | .config('/home', Home) 17 | .then(() => router.config('/login', Login)) 18 | .then(() => router.navigate('/home')); 19 | } 20 | } -------------------------------------------------------------------------------- /after/src/home/home.html: -------------------------------------------------------------------------------- 1 |
2 |

German words demo!

3 |

Click the button below to get a random German word with its translation:

4 |

Give me a word!

5 |
6 | 
Word: {{word.german}}
7 | 
Translation: {{word.english}}
8 |

Please login below to see the translation

9 |
10 |
11 |
12 |

Welcome back {{user.username}}

13 | Logout 14 |
15 |
16 | Login 17 |
-------------------------------------------------------------------------------- /after/src/home/home.js: -------------------------------------------------------------------------------- 1 | import {View, Component, If} from 'angular2/angular2'; 2 | import {Router} from 'angular2/router'; 3 | import {Words} from '../services/words'; 4 | import {Auth} from '../services/auth'; 5 | 6 | @Component({ 7 | selector: 'home', 8 | injectables: [Words, Auth] 9 | }) 10 | @View({ 11 | templateUrl: 'home/home.html', 12 | directives: [If] 13 | }) 14 | export class Home { 15 | constructor(router: Router, words: Words, auth: Auth) { 16 | this.router = router; 17 | this.auth = auth; 18 | this.words = words; 19 | 20 | this.isAuth = auth.isAuth(); 21 | 22 | if (this.isAuth) { 23 | this.user = this.auth.getUser(); 24 | } 25 | } 26 | 27 | getRandomWord() { 28 | this.words.getWord().then((response) => { 29 | this.word = response; 30 | }); 31 | } 32 | 33 | login(event) { 34 | event.preventDefault(); 35 | this.router.parent.navigate('/login'); 36 | } 37 | 38 | logout(event) { 39 | event.preventDefault(); 40 | this.auth.logout(); 41 | this.isAuth = false; 42 | this.user = null; 43 | } 44 | } -------------------------------------------------------------------------------- /after/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'bootstrap'; 2 | @import './src/login/login.css'; -------------------------------------------------------------------------------- /after/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | Loading... 30 | 31 |
32 | 33 | 34 | 35 | 38 | 39 | -------------------------------------------------------------------------------- /after/src/index.js: -------------------------------------------------------------------------------- 1 | import { bootstrap } from 'angular2/angular2'; 2 | import { RootRouter } from 'angular2/src/router/router'; 3 | import { Pipeline } from 'angular2/src/router/pipeline'; 4 | import { bind } from 'angular2/di'; 5 | import { Router } from 'angular2/router'; 6 | 7 | import { App } from './app/app'; 8 | 9 | bootstrap(App, [ 10 | bind(Router).toValue(new RootRouter(new Pipeline())) 11 | ]); -------------------------------------------------------------------------------- /after/src/login/login.css: -------------------------------------------------------------------------------- 1 | .login { 2 | width: 40%; 3 | } -------------------------------------------------------------------------------- /after/src/login/login.html: -------------------------------------------------------------------------------- 1 |
2 |

Login

3 |
4 |
5 | 6 | 7 |
8 |
9 | 10 | 11 |
12 | 13 |
14 |
-------------------------------------------------------------------------------- /after/src/login/login.js: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/angular2'; 2 | import {Router} from 'angular2/router'; 3 | import {Auth} from '../services/auth'; 4 | 5 | @Component({ 6 | selector: 'login', 7 | injectables: [Auth] 8 | }) 9 | @View({ 10 | templateUrl: 'login/login.html' 11 | }) 12 | export class Login { 13 | constructor(router: Router, auth: Auth) { 14 | this.router = router; 15 | this.auth = auth; 16 | } 17 | 18 | login(event, username, password) { 19 | event.preventDefault(); 20 | this.auth.login(username, password).then(() => { 21 | this.router.parent.navigate('/home'); 22 | }) 23 | .catch((error) => { 24 | alert(error); 25 | }); 26 | } 27 | } -------------------------------------------------------------------------------- /after/src/services/auth.js: -------------------------------------------------------------------------------- 1 | export class Auth { 2 | constructor() { 3 | this.token = localStorage.getItem('jwt'); 4 | this.user = this.token && jwt_decode(this.token); 5 | } 6 | 7 | isAuth() { 8 | return !!this.token; 9 | } 10 | 11 | getUser() { 12 | return this.user; 13 | } 14 | 15 | login(username, password) { 16 | return fetch('http://localhost:3001/sessions/create', { 17 | method: 'POST', 18 | headers: { 19 | 'Accept': 'application/json', 20 | 'Content-Type': 'application/json' 21 | }, 22 | body: JSON.stringify({ 23 | username, password 24 | }) 25 | }) 26 | .then((response) => { 27 | return response.text(); 28 | }) 29 | .then((text) => { 30 | this.token = JSON.parse(text).id_token; 31 | localStorage.setItem('jwt', this.token); 32 | }); 33 | } 34 | 35 | logout() { 36 | localStorage.removeItem('jwt'); 37 | this.token = null; 38 | this.user = null; 39 | } 40 | } -------------------------------------------------------------------------------- /after/src/services/words.js: -------------------------------------------------------------------------------- 1 | export class Words { 2 | getWord() { 3 | var jwt = localStorage.getItem('jwt'); 4 | 5 | return fetch('http://localhost:3001/api/random-word', { 6 | method: 'GET', 7 | headers: { 8 | 'Accept': 'application/json', 9 | 'Content-Type': 'application/json', 10 | 'Authorization': 'bearer ' + jwt 11 | } 12 | }) 13 | .then((response) => { 14 | return response.text(); 15 | }) 16 | .then((text) => { 17 | return JSON.parse(text); 18 | }) 19 | } 20 | } -------------------------------------------------------------------------------- /before/.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | npm-debug.log 4 | dist 5 | -------------------------------------------------------------------------------- /before/README.md: -------------------------------------------------------------------------------- 1 | ng2-play 2 | ======== 3 | 4 | The goal of this repo is to prepare a minimal ("walking skeleton") project build with Angular2.0 and ES6 5 | 6 | ## Install 7 | 8 | Clone this repo and execute in your favourite shell: 9 | 10 | * `npm i -g gulp` to install gulp globally (if you don't have it installed already) 11 | * `npm i` to install local npm dependencies 12 | 13 | ## Play 14 | 15 | After completing installation type in your favourite shell: 16 | 17 | * `gulp play` (or `npm start`) to start a "Hello World" app in a new browser window. App files are observed and will be re-transpiled on each change. 18 | 19 | ## Dependencies 20 | 21 | * ES6 -> ES5 transpilation 22 | * [traceur](https://github.com/google/traceur-compiler): ES6 -> ES5 transpilation 23 | * ES6 modules loading 24 | * [es6-module-loader](https://github.com/ModuleLoader/es6-module-loader): ES6 module loader polyfill 25 | * [systemjs](https://github.com/systemjs/systemjs): plugins for the ES6 module loader to handle different module formats - this is mostly needed to load module format generated by traceur 26 | 27 | ## Learning materials 28 | 29 | ### Zones / long stack-traces 30 | 31 | * [original repo](https://github.com/angular/zone.js) 32 | * [zones in Dart](https://www.dartlang.org/articles/zones/) 33 | * [zones in node](http://strongloop.com/strongblog/comparing-node-js-promises-trycatch-zone-js-angular/) 34 | 35 | ### ES6 module loading 36 | 37 | * [Practical Workflows for ES6 Modules, Fluent 2014](https://www.youtube.com/watch?v=0VUjM-jJf2U) 38 | * [Guy Bedford: Package Management for ES6 Modules, JSConf2014](https://www.youtube.com/watch?v=szJjsduHBQQ) 39 | * [Loader API specification](http://whatwg.github.io/loader/) 40 | -------------------------------------------------------------------------------- /before/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var del = require('del'); 3 | var plumber = require('gulp-plumber'); 4 | var rename = require('gulp-rename'); 5 | var traceur = require('gulp-traceur'); 6 | var rework = require('rework'); 7 | var npmRework = require('rework-npm'); 8 | var path = require('path'); 9 | var fs = require('fs'); 10 | var mkpath = require('mkpath'); 11 | 12 | var PATHS = { 13 | src: { 14 | js: 'src/**/*.js', 15 | html: 'src/**/*.html', 16 | css: { 17 | main: 'src/index.css', 18 | all: 'src/**/*.css' 19 | } 20 | }, 21 | lib: [ 22 | 'node_modules/gulp-traceur/node_modules/traceur/bin/traceur-runtime.js', 23 | 'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js', 24 | 'node_modules/systemjs/lib/extension-register.js', 25 | 'node_modules/angular2/node_modules/zone.js/zone.js', 26 | 'node_modules/whatwg-fetch/fetch.js', 27 | 'node_modules/jwt-decode/build/jwt-decode.js', 28 | 'node_modules/angular2/node_modules/zone.js/long-stack-trace-zone.js' 29 | ] 30 | }; 31 | 32 | gulp.task('clean', function(done) { 33 | del(['dist'], done); 34 | }); 35 | 36 | gulp.task('js', function () { 37 | return gulp.src(PATHS.src.js) 38 | .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 39 | .pipe(plumber()) 40 | .pipe(traceur({ 41 | modules: 'instantiate', 42 | moduleName: true, 43 | annotations: true, 44 | types: true, 45 | memberVariables: true 46 | })) 47 | .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 48 | .pipe(gulp.dest('dist')); 49 | }); 50 | 51 | gulp.task('html', function () { 52 | return gulp.src(PATHS.src.html) 53 | .pipe(gulp.dest('dist')); 54 | }); 55 | 56 | gulp.task('css', function() { 57 | var file = path.resolve(PATHS.src.css.main); 58 | var source = path.relative(__dirname, file); 59 | mkpath.sync('dist'); 60 | var output = fs.createWriteStream('dist/build.css'); 61 | var contents = fs.readFileSync(file, {encoding: 'utf8'}); 62 | 63 | // Initialize and pluginize `rework` 64 | var css = rework(contents); 65 | css.use(npmRework()); 66 | 67 | // write result 68 | output.write(css.toString()) 69 | output.end(); 70 | }); 71 | 72 | gulp.task('libs', ['angular2', 'router'], function () { 73 | var size = require('gulp-size'); 74 | return gulp.src(PATHS.lib) 75 | .pipe(size({showFiles: true, gzip: true})) 76 | .pipe(gulp.dest('dist/lib')); 77 | }); 78 | 79 | 80 | gulp.task('angular2', function () { 81 | 82 | var buildConfig = { 83 | paths: { 84 | "angular2/*": "node_modules/angular2/es6/prod/*.es6", 85 | "rx/*": "node_modules/angular2/node_modules/rx/*.js" 86 | } 87 | }; 88 | 89 | var Builder = require('systemjs-builder'); 90 | var builder = new Builder(buildConfig); 91 | 92 | return builder.build('angular2/angular2', 'dist/lib/angular2.js', {}); 93 | }); 94 | 95 | gulp.task('router', function () { 96 | 97 | var buildConfig = { 98 | paths: { 99 | "angular2/*": "node_modules/angular2/es6/prod/*.es6", 100 | "rx/*": "node_modules/angular2/node_modules/rx/*.js" 101 | } 102 | }; 103 | 104 | var Builder = require('systemjs-builder'); 105 | var builder = new Builder(buildConfig); 106 | 107 | return builder.build('angular2/router', 'dist/lib/router.js', {}); 108 | }); 109 | 110 | gulp.task('play', ['default'], function () { 111 | 112 | var http = require('http'); 113 | var connect = require('connect'); 114 | var serveStatic = require('serve-static'); 115 | var open = require('open'); 116 | var port = 3000; 117 | var app; 118 | 119 | gulp.watch(PATHS.src.html, ['html']); 120 | gulp.watch(PATHS.src.js, ['js']); 121 | gulp.watch(PATHS.src.css.all, ['css']); 122 | 123 | app = connect(); 124 | 125 | app.use(serveStatic(__dirname + '/dist')); // serve everything that is static 126 | 127 | http.createServer(app).listen(port, function () { 128 | console.log('\n', 'Server listening on port', port, '\n') 129 | // open('http://localhost:' + port); 130 | }); 131 | }); 132 | 133 | gulp.task('default', ['js', 'css', 'html', 'libs']); -------------------------------------------------------------------------------- /before/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng2-play", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "test": "echo \"Error: no test specified\" && exit 1", 6 | "start": "gulp play" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/pkozlowski-opensource/ng2-play.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/pkozlowski-opensource/ng2-play/issues" 14 | }, 15 | "homepage": "https://github.com/pkozlowski-opensource/ng2-play", 16 | "devDependencies": { 17 | "connect": "^3.3.4", 18 | "del": "~1.1.1", 19 | "gulp": "~3.8.10", 20 | "gulp-plumber": "^1.0.0", 21 | "gulp-rename": "~1.2.0", 22 | "gulp-size": "^1.2.1", 23 | "gulp-traceur": "0.17.*", 24 | "mkpath": "~0.1.0", 25 | "open": "0.0.5", 26 | "rework": "~1.0.1", 27 | "rework-npm": "~1.0.0", 28 | "serve-static": "~1.8.1", 29 | "systemjs-builder": "^0.10.3", 30 | "through2": "~0.6.3" 31 | }, 32 | "dependencies": { 33 | "angular2": "2.0.0-alpha.21", 34 | "bootstrap": "~3.3.4", 35 | "es6-module-loader": "0.16.5", 36 | "jwt-decode": "~1.1.0", 37 | "systemjs": "~0.16.10", 38 | "whatwg-fetch": "~0.7.0", 39 | "when": "~3.7.3" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /before/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/angular-tips/GermanWords-frontend-angular-2/1a45febb4d544628cc63a38eec2edf3f2f2e9b45/before/src/index.css -------------------------------------------------------------------------------- /before/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 | --------------------------------------------------------------------------------