├── .gitignore ├── src ├── app.component.ts ├── index.html └── app.css ├── tsconfig.json ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /typings 3 | /public 4 | /.idea 5 | .log -------------------------------------------------------------------------------- /src/app.component.ts: -------------------------------------------------------------------------------- 1 | import 'reflect-metadata'; 2 | import 'zone.js/dist/zone'; 3 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "emitDecoratorMetadata": true, 4 | "experimentalDecorators": true, 5 | "noImplicitAny": false, 6 | "target": "es5", 7 | "module": "commonjs", 8 | "removeComments": true, 9 | "sourceMap": true, 10 | "outDir": "public" 11 | }, 12 | "exclude": [ 13 | "node_modules" 14 | ], 15 | "files": [ 16 | ] 17 | } -------------------------------------------------------------------------------- /src/app.css: -------------------------------------------------------------------------------- 1 | .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;} 2 | .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; } 3 | .heroes li:hover {color: #369; background-color: #EEE; left: .2em;} 4 | .heroes .badge { 5 | font-size: small; 6 | color: white; 7 | padding: 0.1em 0.7em; 8 | background-color: #369; 9 | line-height: 1em; 10 | position: relative; 11 | left: -1px; 12 | top: -1px; 13 | } 14 | .selected { background-color: #EEE; color: #369; } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-workshop", 3 | "version": "1.0.0", 4 | "description": "NashJS angular2 workshop codebase", 5 | "main": "\"\"", 6 | "scripts": { 7 | "start": "webpack --watch --progress --colors --config webpack.config.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/mikeallisonJS/angular2-workshop.git" 13 | }, 14 | "author": "Mike Allison", 15 | "license": "MIT", 16 | "dependencies": { 17 | "angular2": "^2.0.0-beta.13", 18 | "css-loader": "^0.23.1", 19 | "es6-shim": "^0.35.0", 20 | "postcss-loader": "^0.8.0", 21 | "reflect-metadata": "0.1.2", 22 | "rxjs": "^5.0.0-beta.2", 23 | "style-loader": "^0.13.0", 24 | "ts-loader": "^0.8.1", 25 | "zone.js": "^0.6.6" 26 | }, 27 | "devDependencies": { 28 | "browser-sync": "^2.10.0", 29 | "browser-sync-webpack-plugin": "^1.0.1", 30 | "connect-modrewrite": "^0.8.2", 31 | "extract-text-webpack-plugin": "^0.9.1", 32 | "file-loader": "^0.8.4", 33 | "html-loader": "^0.3.0", 34 | "html-webpack-plugin": "^1.6.2", 35 | "ts-loader": "^0.7.1", 36 | "typescript": "^1.6.2", 37 | "typings": "^0.7.12", 38 | "url-loader": "^0.5.6", 39 | "webpack": "^1.12.6" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var BrowserSync = require('browser-sync-webpack-plugin'); 3 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 | var modRewrite = require('connect-modrewrite'); 6 | 7 | module.exports = { 8 | entry: './src/app.component.ts', 9 | output: { 10 | path: 'public', 11 | publicPath: '', 12 | filename: '[name].bundle.js' 13 | }, 14 | cache: true, 15 | debug: true, 16 | stats: { 17 | colors: true, 18 | reasons: true, 19 | hash: true, 20 | version: true, 21 | timings: true, 22 | chunks: true, 23 | chunkModules: true, 24 | cached: true, 25 | cachedAssets: true 26 | }, 27 | resolve: { 28 | extensions: ['','.js','.ts'] 29 | }, 30 | plugins: [ 31 | new webpack.optimize.OccurenceOrderPlugin(), 32 | new ExtractTextPlugin('[name].[hash].css'), 33 | new HtmlWebpackPlugin({ 34 | template: './src/index.html', 35 | inject: 'body' 36 | }), 37 | new BrowserSync({ 38 | host: 'localhost', 39 | port: 3000, 40 | server: { baseDir: ['public'] }, 41 | middleware: [ 42 | modRewrite(['^[^\\.]*$ /index.html [L]']) 43 | ] 44 | }) 45 | ], 46 | module: { 47 | loaders: [ 48 | { 49 | test: /\.ts/, 50 | loaders: ['ts'], 51 | exclude: /node_modules/ 52 | }, { 53 | test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, 54 | loader: 'url-loader?limit=10000' 55 | }, { 56 | test: /\.(eot|ttf|wav|mp3)$/, 57 | loader: 'file-loader' 58 | }, { 59 | test: /\.css$/, 60 | // Reference: https://github.com/webpack/extract-text-webpack-plugin 61 | // Extract css files in production builds 62 | // 63 | // Reference: https://github.com/webpack/style-loader 64 | // Use style-loader in development for hot-loading 65 | loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss') 66 | } 67 | ] 68 | } 69 | }; --------------------------------------------------------------------------------