├── www └── .gitignore ├── lib ├── index.scss ├── scss │ ├── _variables.scss │ └── index.scss ├── typings │ ├── require.d.ts.old │ ├── tsd.d.ts │ └── windows.d.ts ├── vendors.ts ├── components │ ├── map │ │ ├── index.scss │ │ ├── index.html │ │ └── index.ts │ ├── about │ │ ├── index.scss │ │ ├── items.json │ │ ├── index.ts │ │ └── index.html │ ├── home │ │ ├── index.scss │ │ ├── index.html │ │ └── index.ts │ ├── http │ │ ├── index.scss │ │ ├── index.html │ │ ├── index.ts │ │ └── octocat.json │ ├── dataType │ │ ├── index.scss │ │ ├── service.ts │ │ ├── index.ts │ │ └── index.html │ ├── githubUsers │ │ ├── index.scss │ │ ├── item │ │ │ ├── index.scss │ │ │ ├── index.html │ │ │ └── index.ts │ │ ├── list │ │ │ ├── index.scss │ │ │ ├── index.html │ │ │ └── index.ts │ │ ├── index.html │ │ └── index.ts │ ├── index.html │ ├── navbar │ │ ├── index.scss │ │ ├── index.ts │ │ └── index.html │ ├── index.scss │ └── index.ts ├── index.ts └── index.html ├── webpack.config.prod.js ├── tsconfig.json ├── .gitignore ├── README.md ├── LICENSE ├── webpack.config.js └── package.json /www/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /lib/index.scss: -------------------------------------------------------------------------------- 1 | @import './scss/index.scss'; 2 | -------------------------------------------------------------------------------- /lib/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $app-background-color: white !default; 2 | -------------------------------------------------------------------------------- /lib/typings/require.d.ts.old: -------------------------------------------------------------------------------- 1 | declare function require(string): any; 2 | -------------------------------------------------------------------------------- /lib/typings/tsd.d.ts: -------------------------------------------------------------------------------- 1 | 2 | /// 3 | -------------------------------------------------------------------------------- /lib/typings/windows.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { noBullshitBoilerplate: any; } 2 | -------------------------------------------------------------------------------- /lib/vendors.ts: -------------------------------------------------------------------------------- 1 | import 'angular2/bundles/angular2-polyfills'; 2 | import 'es6-shim'; 3 | -------------------------------------------------------------------------------- /lib/components/map/index.scss: -------------------------------------------------------------------------------- 1 | .sebm-google-map-container { 2 | height: 400px; 3 | } 4 | -------------------------------------------------------------------------------- /lib/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import '~bootstrap/scss/bootstrap.scss'; 3 | -------------------------------------------------------------------------------- /lib/components/about/index.scss: -------------------------------------------------------------------------------- 1 | // Import variables before use 2 | @import '../../scss/variables'; 3 | -------------------------------------------------------------------------------- /lib/components/home/index.scss: -------------------------------------------------------------------------------- 1 | // Import variables before use 2 | @import '../../scss/variables'; 3 | -------------------------------------------------------------------------------- /lib/components/http/index.scss: -------------------------------------------------------------------------------- 1 | // Import variables before use 2 | @import '../../scss/variables'; 3 | -------------------------------------------------------------------------------- /lib/components/dataType/index.scss: -------------------------------------------------------------------------------- 1 | // Import variables before use 2 | @import '../../scss/variables'; 3 | -------------------------------------------------------------------------------- /lib/components/githubUsers/index.scss: -------------------------------------------------------------------------------- 1 | // Import variables before use 2 | @import '../../scss/variables'; 3 | -------------------------------------------------------------------------------- /lib/components/githubUsers/item/index.scss: -------------------------------------------------------------------------------- 1 | // Import variables before use 2 | @import '../../../scss/variables'; 3 | -------------------------------------------------------------------------------- /lib/components/githubUsers/list/index.scss: -------------------------------------------------------------------------------- 1 | // Import variables before use 2 | @import '../../../scss/variables'; 3 | -------------------------------------------------------------------------------- /lib/components/index.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | -------------------------------------------------------------------------------- /lib/components/about/items.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "title": "Menu 1" 3 | },{ 4 | "title": "Menu 2" 5 | },{ 6 | "title": "Menu 3" 7 | }] 8 | -------------------------------------------------------------------------------- /lib/components/githubUsers/index.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. Github Users
    2. 3 |
4 | 5 | -------------------------------------------------------------------------------- /lib/components/navbar/index.scss: -------------------------------------------------------------------------------- 1 | // Import variables before use 2 | @import '../../scss/variables'; 3 | 4 | nav{ 5 | margin-bottom: 20px; 6 | border-radius: 0; 7 | } 8 | -------------------------------------------------------------------------------- /lib/components/home/index.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. Home
    2. 3 |
4 |
5 |

Hello, world!

6 |
7 | -------------------------------------------------------------------------------- /lib/components/index.scss: -------------------------------------------------------------------------------- 1 | // Import variables before use 2 | @import '../scss/variables'; 3 | 4 | // Root tag of your component 5 | .container { 6 | background-color: $app-background-color; 7 | } 8 | -------------------------------------------------------------------------------- /lib/components/githubUsers/list/index.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

{{user.login}}

4 | 5 |
6 | -------------------------------------------------------------------------------- /webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"), 2 | webpackConfig = require('./webpack.config.js'); 3 | 4 | webpackConfig.plugins.concat([ 5 | new webpack.optimize.OccurenceOrderPlugin(), 6 | new webpack.optimize.DedupePlugin(), 7 | new webpack.optimize.UglifyJsPlugin() 8 | ]); 9 | 10 | module.exports = webpackConfig; 11 | -------------------------------------------------------------------------------- /lib/components/dataType/service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from 'angular2/core'; 2 | 3 | @Injectable() 4 | export default class DataTypeService { 5 | 6 | constructor() { 7 | 8 | } 9 | 10 | getRandowString(length) { 11 | return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": false, 6 | "noImplicitAny": false, 7 | "removeComments": true, 8 | "noLib": false, 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "sourceMap": true, 12 | "listFiles": false, 13 | "outDir": "dist" 14 | }, 15 | "exclude": [ "node_modules" ] 16 | } 17 | -------------------------------------------------------------------------------- /lib/components/about/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | 3 | @Component({ 4 | selector: "about", 5 | directives: [], 6 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 7 | template: require('./index.html') 8 | }) 9 | export class About { 10 | 11 | constructor() { 12 | } 13 | 14 | ngOnInit() { 15 | console.log('[Component] home running'); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/components/githubUsers/item/index.html: -------------------------------------------------------------------------------- 1 | 6 |
7 |
8 |

{{user?.name}}

9 |

{{user?.location}}

10 | Go to profile 11 |
12 |
13 | -------------------------------------------------------------------------------- /lib/components/navbar/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | import { RouterLink} from 'angular2/router'; 3 | 4 | @Component({ 5 | selector: "navbar", 6 | directives: [RouterLink], 7 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 8 | template: require('./index.html') 9 | }) 10 | export class Navbar { 11 | title: string; 12 | 13 | constructor() { 14 | this.title = window.noBullshitBoilerplate.name; 15 | } 16 | 17 | ngOnInit() { 18 | console.log('[Component] navbar running'); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | dist/ 30 | -------------------------------------------------------------------------------- /lib/components/githubUsers/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | import {RouteConfig, Route, ROUTER_DIRECTIVES} from 'angular2/router'; 3 | import {Item} from './item/index'; 4 | import {List} from './list/index'; 5 | 6 | 7 | @Component({ 8 | selector: "list", 9 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 10 | template: require('./index.html'), 11 | directives: [ROUTER_DIRECTIVES] 12 | }) 13 | @RouteConfig([ 14 | new Route({ path: '/list', component: List, name: 'GithubUsersList' , useAsDefault: true}), 15 | new Route({ path: '/list/:login', component: Item, name: 'GithubUsersItem'}) 16 | ]) 17 | export class GithubUsers { 18 | 19 | constructor() {} 20 | } 21 | -------------------------------------------------------------------------------- /lib/components/http/index.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. Http requests
    2. 3 |
4 | 5 |
6 |
7 | 8 |
9 |

{{octocat.name}} ({{octocat.login}})

10 |
11 | 16 |
17 | -------------------------------------------------------------------------------- /lib/components/dataType/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | import DataTypeService from './service'; 3 | 4 | @Component({ 5 | selector: "home", 6 | providers: [DataTypeService], 7 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 8 | template: require('./index.html') 9 | }) 10 | export class DataType { 11 | 12 | firstName: String; 13 | lastName: String; 14 | 15 | constructor(public service:DataTypeService) { 16 | this.firstName = "Julien"; 17 | } 18 | 19 | ngOnInit() { 20 | console.log('[Component] datatype running'); 21 | } 22 | 23 | triggerModelChange(){ 24 | this.firstName = this.service.getRandowString(8); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /lib/components/map/index.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. Map
    2. 3 |
4 | 5 |
6 |

Quick example with angular2-google-maps plugin

7 |
You can add markers by clicking to the map
8 |
9 | 10 | 15 | 16 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lib/components/githubUsers/list/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | import {ROUTER_DIRECTIVES} from 'angular2/router'; 3 | import {Http} from 'angular2/http'; 4 | 5 | @Component({ 6 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 7 | template: require('./index.html'), 8 | directives: [ROUTER_DIRECTIVES] 9 | }) 10 | export class List { 11 | users: Array; 12 | 13 | constructor(public http: Http) { 14 | 15 | } 16 | 17 | ngOnInit() { 18 | this.http.get('https://api.github.com/search/users?q=location:mexico,mexico&sort=followers&order=desc') 19 | .subscribe((response) => { 20 | this.users = response.json().items; 21 | }); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /lib/index.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import {provide} from 'angular2/core'; 4 | import {bootstrap} from 'angular2/platform/browser'; 5 | import {FORM_PROVIDERS} from 'angular2/common'; 6 | import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy, APP_BASE_HREF} from 'angular2/router'; 7 | import {HTTP_PROVIDERS} from 'angular2/http'; 8 | import {App} from './components/index'; 9 | 10 | bootstrap(App, [ 11 | FORM_PROVIDERS, 12 | HTTP_PROVIDERS, 13 | ROUTER_PROVIDERS, 14 | // PathLocationStrategy being the default, we only need to define APP_BASE_HREF 15 | // provide(APP_BASE_HREF, {useValue: '/'}) 16 | // Here we want to use the # strategy instead: 17 | provide(LocationStrategy, {useClass: HashLocationStrategy}) 18 | ]); 19 | -------------------------------------------------------------------------------- /lib/components/githubUsers/item/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | import {Router, RouteParams, RouteData, ROUTER_DIRECTIVES} from 'angular2/router'; 3 | import {Http} from 'angular2/http'; 4 | 5 | @Component({ 6 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 7 | template: require('./index.html'), 8 | directives: [ROUTER_DIRECTIVES] 9 | }) 10 | export class Item { 11 | user: Object; 12 | constructor(private _http: Http, private _router: Router, private _params: RouteParams, private _data: RouteData) { 13 | this.user = {}; 14 | } 15 | 16 | ngOnInit() { 17 | this._http.get(`https://api.github.com/users/${this._params.get('login')}`).subscribe((response) => { 18 | this.user = response.json(); 19 | }); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /lib/components/http/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | import {Inject} from 'angular2/core'; 3 | import {Http} from 'angular2/http'; 4 | import '!file?name=data/[name].[ext]!./octocat.json'; 5 | 6 | @Component({ 7 | selector: "http", 8 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 9 | template: require('./index.html') 10 | }) 11 | export class HttpPage { 12 | octocat: Object; 13 | 14 | constructor(public http: Http) { 15 | 16 | } 17 | 18 | getOctocatProfile() { 19 | console.log('[method] getOctocatProfile called', this.http); 20 | this.http.get('data/octocat.json').subscribe((response) => { 21 | this.octocat = response.json(); 22 | }); 23 | } 24 | 25 | ngOnInit() { 26 | console.log('[Component] http running'); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /lib/components/navbar/index.html: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /lib/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {%=o.htmlWebpackPlugin.options.pkg.title %} 8 | 13 | 14 | 15 | 16 | 17 | Loading... 18 | 19 | {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} 20 | 21 | {% } %} 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Contains 2 | 3 | * Webpack config 4 | * Sass scaffolding 5 | * Routing capability 6 | * Http request demonstration 7 | * Bootstrap 4 Import 8 | * RouterChild (GithubUser component) 9 | * Components 10 | * App (app scaffolding) 11 | * Home (homepage) 12 | * Navbar (menu) 13 | * GithubUser (list/item demonstration) 14 | * HttpModule (Http call) 15 | * Google Map 16 | * About (Info about this project) 17 | 18 | ## Preriquisites 19 | 20 | * NodeJS (recommended: 4.1.x) 21 | * NPM (recommended: 3.3.x `sudo npm install -g npm`) 22 | 23 | ## Install 24 | 25 | `npm install` 26 | 27 | ## Commands 28 | 29 | ### Web Server 30 | 31 | `npm run devserver` 32 | 33 | then open `http://localhost:8080/` 34 | 35 | ### Dump the dev app 36 | 37 | `npm run dumpdev` 38 | 39 | ### Dump the prod (minified) app 40 | 41 | `npm run dumpprod` 42 | 43 | ## Credit 44 | 45 | * https://github.com/AngularClass/angular2-webpack-starter 46 | -------------------------------------------------------------------------------- /lib/components/about/index.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. About
    2. 3 |
4 |
5 |
6 |
7 |
8 |

This project is Open Sourced

9 |

This project demonstrate an Angular2 application with just what's necessary, no bullshit!

10 | Open in Github 11 |
12 | Follow my Blog 13 |
14 | Follow me on Twitter 15 |
16 |
17 |
18 |
19 | -------------------------------------------------------------------------------- /lib/components/dataType/index.html: -------------------------------------------------------------------------------- 1 |
    2 |
  1. DataType
    2. 3 |
4 | 5 |
6 |
7 |
8 |

Two way data binding

9 | 
[(ngModel)]="firstName"
10 | 11 | 12 |
13 | Same as:
[value]="firstName" (input)="firstName=$event.target.value"
14 | 15 |
16 |

Here is my first name: {{firstName}}.

17 |
18 |
19 |
20 |
21 |

Observables (WIP)

22 |

23 |
24 |
25 |
26 | -------------------------------------------------------------------------------- /lib/components/home/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | 3 | @Component({ 4 | selector: "home", 5 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 6 | template: require('./index.html') 7 | }) 8 | export class Home { 9 | 10 | constructor() { 11 | } 12 | 13 | ngOnInit() { 14 | console.log('[Component] home ngOnInit'); 15 | } 16 | 17 | ngOnDestroy() { 18 | console.log('[Component] home onDestroy'); 19 | } 20 | 21 | ngOnChanges() { 22 | console.log('[Component] home onChanges'); 23 | } 24 | 25 | ngDoCheck() { 26 | console.log('[Component] home doCheck'); 27 | } 28 | 29 | ngAfterContentInit() { 30 | console.log('[Component] home afterContentInit'); 31 | } 32 | 33 | ngAfterContentChecked() { 34 | console.log('[Component] home afterContentChecked'); 35 | } 36 | 37 | ngAfterViewInit() { 38 | console.log('[Component] home afterViewInit'); 39 | } 40 | 41 | ngAfterViewChecked() { 42 | console.log('[Component] home afterViewChecked'); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Julien Renaux 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. 22 | 23 | -------------------------------------------------------------------------------- /lib/components/map/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | import {ANGULAR2_GOOGLE_MAPS_PROVIDERS, 3 | SebmGoogleMap, 4 | MapMouseEvent, 5 | ANGULAR2_GOOGLE_MAPS_DIRECTIVES} from 'angular2-google-maps/core'; 6 | 7 | @Component({ 8 | selector: "map", 9 | directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES], 10 | providers: [ANGULAR2_GOOGLE_MAPS_PROVIDERS], 11 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 12 | template: require('./index.html') 13 | }) 14 | export class Map { 15 | 16 | constructor() { 17 | 18 | } 19 | 20 | zoom: number = 5; 21 | 22 | lat: number = 47; 23 | lng: number = 2; 24 | 25 | markers = [{ 26 | lat : 48.8589, 27 | lng : 2.350387, 28 | label : 'Paris' 29 | }]; 30 | 31 | onClickMap ($event: MapMouseEvent) { 32 | this.markers.push({ 33 | lat : $event.coords.lat, 34 | lng : $event.coords.lng, 35 | label : 'A' 36 | }); 37 | } 38 | 39 | onClickMarker ($event) { 40 | console.log(this, $event); 41 | } 42 | 43 | 44 | 45 | 46 | } 47 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'), 2 | libPath = path.join(__dirname, 'lib'), 3 | wwwPath = path.join(__dirname, 'www'), 4 | pkg = require('./package.json'), 5 | HtmlWebpackPlugin = require('html-webpack-plugin'); 6 | 7 | module.exports = { 8 | entry: { 9 | 'app': path.join(libPath, 'index.ts'), 10 | 'vendors': path.join(libPath, 'vendors.ts'), 11 | 'style': path.join(libPath, 'index.scss') 12 | }, 13 | output: { 14 | path: wwwPath, 15 | filename: '[name]-[hash:6].js' 16 | }, 17 | module: { 18 | loaders: [{ 19 | test: /\.ts$/, 20 | loader: 'ts', 21 | exclude: [ 22 | /node_modules/ 23 | ] 24 | }, { 25 | test: /\.json$/, 26 | loader: "json" 27 | }, { 28 | test: /\.html$/, 29 | loader: 'raw' 30 | }, { 31 | test: /\.scss$/, 32 | loader: "style!css!autoprefixer?browsers=last 2 versions!sass" 33 | }], 34 | noParse: [/angular2\/bundles\/.+/], 35 | }, 36 | resolve: { 37 | extensions: ['', '.ts', '.js', '.html', '.scss'] 38 | }, 39 | plugins: [new HtmlWebpackPlugin({ 40 | filename: 'index.html', 41 | pkg: pkg, 42 | template: path.join(libPath, 'index.html') 43 | })] 44 | }; 45 | -------------------------------------------------------------------------------- /lib/components/http/octocat.json: -------------------------------------------------------------------------------- 1 | { 2 | "login": "octocat", 3 | "id": 583231, 4 | "avatar_url": "https://avatars.githubusercontent.com/u/583231?v=3&s=100", 5 | "gravatar_id": "", 6 | "url": "https://api.github.com/users/octocat", 7 | "html_url": "https://github.com/octocat", 8 | "followers_url": "https://api.github.com/users/octocat/followers", 9 | "following_url": "https://api.github.com/users/octocat/following{/other_user}", 10 | "gists_url": "https://api.github.com/users/octocat/gists{/gist_id}", 11 | "starred_url": "https://api.github.com/users/octocat/starred{/owner}{/repo}", 12 | "subscriptions_url": "https://api.github.com/users/octocat/subscriptions", 13 | "organizations_url": "https://api.github.com/users/octocat/orgs", 14 | "repos_url": "https://api.github.com/users/octocat/repos", 15 | "events_url": "https://api.github.com/users/octocat/events{/privacy}", 16 | "received_events_url": "https://api.github.com/users/octocat/received_events", 17 | "type": "User", 18 | "site_admin": false, 19 | "name": "The Octocat", 20 | "company": "GitHub", 21 | "blog": "http://www.github.com/blog", 22 | "location": "San Francisco", 23 | "email": "octocat@github.com", 24 | "hireable": null, 25 | "bio": null, 26 | "public_repos": 5, 27 | "public_gists": 8, 28 | "followers": 1180, 29 | "following": 6, 30 | "created_at": "2011-01-25T18:44:36Z", 31 | "updated_at": "2015-11-04T19:09:28Z" 32 | } 33 | -------------------------------------------------------------------------------- /lib/components/index.ts: -------------------------------------------------------------------------------- 1 | import {Component, View} from 'angular2/core'; 2 | import {Navbar} from './navbar/index'; 3 | import {Home} from './home/index'; 4 | import {About} from './about/index'; 5 | import {GithubUsers} from './githubUsers/index'; 6 | import {HttpPage} from './http/index'; 7 | import {DataType} from './dataType/index'; 8 | import {Map} from './map/index'; 9 | import {RouteConfig, Route, ROUTER_DIRECTIVES} from 'angular2/router'; 10 | 11 | @Component({ 12 | selector: "app" 13 | }) 14 | @View({ 15 | directives: [Navbar, ROUTER_DIRECTIVES], 16 | styles: [require('!raw!autoprefixer?browsers=last 2 versions!sass!./index.scss')], 17 | template: require('./index.html') 18 | }) 19 | @RouteConfig([ 20 | new Route({ path: '/', component: Home, name: 'Home' }), 21 | new Route({ path: '/about', component: About, name: 'About', data: { pageId: null } }), 22 | new Route({ path: '/http', component: HttpPage, name: 'Http' }), 23 | new Route({ path: '/datatype', component: DataType, name: 'DataType' }), 24 | new Route({ path: '/github-users/...', component: GithubUsers, name: 'GithubUsers'}), 25 | new Route({ path: '/map', component: Map, name: 'Map'}) 26 | ]) 27 | export class App { 28 | 29 | constructor() { 30 | 31 | } 32 | 33 | ngOnInit() { 34 | console.log('[Component] app running'); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-nobullshit-boilerplate", 3 | "version": "0.0.1", 4 | "description": "Angular2, TypeScript and Webpack no bullshit!", 5 | "main": "lib/index.ts", 6 | "scripts": { 7 | "devserver": "webpack-dev-server --json --progress", 8 | "dumpdev": "rm -rf www/* && webpack --progress --colors -d", 9 | "dumpprod": "rm -rf www/* && webpack --progress --colors --config webpack.config.prod.js -p" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/shprink/angular2-nobullshit-boilerplate.git" 14 | }, 15 | "author": "shprink (http://julienrenaux.fr/)", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/shprink/angular2-nobullshit-boilerplate/issues" 19 | }, 20 | "homepage": "https://github.com/shprink/angular2-nobullshit-boilerplate#readme", 21 | "dependencies": { 22 | "angular2": "2.0.0-beta.0", 23 | "angular2-google-maps": "^0.5.0", 24 | "bootstrap": "github:twbs/bootstrap#v4.0.0-alpha", 25 | "es6-shim": "^0.33.10", 26 | "node-sass": "^3.4.1", 27 | "reflect-metadata": "0.1.2", 28 | "rxjs": "5.0.0-beta.0" 29 | }, 30 | "devDependencies": { 31 | "autoprefixer-loader": "^3.1.0", 32 | "css-loader": "^0.21.0", 33 | "file-loader": "^0.8.4", 34 | "html-loader": "^0.3.0", 35 | "html-webpack-plugin": "^1.6.1", 36 | "json-loader": "^0.5.3", 37 | "path": "^0.4.9", 38 | "raw-loader": "^0.5.1", 39 | "sass-loader": "^3.1.1", 40 | "style-loader": "^0.13.0", 41 | "ts-loader": "^0.6.0", 42 | "typescript": "1.7.3", 43 | "util": "^0.10.3", 44 | "webpack": "~1.12.6", 45 | "webpack-dev-server": "~1.10.0" 46 | } 47 | } 48 | --------------------------------------------------------------------------------