├── .editorconfig
├── .gitignore
├── README.md
├── firebase.json
├── gulpfile.js
├── package.json
├── src
├── app-shell.js
├── app
│ └── app.ts
├── components
│ ├── About.ts
│ ├── Home.ts
│ ├── header.ts
│ ├── sidenav.ts
│ └── toast.ts
├── css
│ ├── core.scss
│ └── core
│ │ ├── _card.scss
│ │ ├── _colors.scss
│ │ ├── _core.scss
│ │ ├── _dialog.scss
│ │ ├── _header.scss
│ │ ├── _loader.scss
│ │ ├── _main.scss
│ │ ├── _side-nav.scss
│ │ ├── _toast.scss
│ │ └── _z-index.scss
├── images
│ ├── apple-touch-icon.png
│ ├── chrome-splashscreen-icon-384x384.png
│ ├── chrome-touch-icon-192x192.png
│ ├── ic_add_24px.svg
│ ├── ic_info_outline_24px.svg
│ ├── ic_menu_24px.svg
│ ├── icon-128x128.png
│ ├── ms-touch-icon-144x144-precomposed.png
│ └── side-nav-bg@2x.jpg
├── index.html
├── main.ts
├── ng2-service-worker.ts
├── services
│ ├── Auth.ts
│ ├── Backend.ts
│ └── Nav.ts
└── util
│ └── styleloader.js
├── system.config.js
├── tasks
├── build.ts
├── compile.ts
├── copy.ts
└── styles.ts
└── tsconfig.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 |
3 | root = true
4 |
5 | [*]
6 | charset = utf-8
7 | indent_style = space
8 | indent_size = 2
9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 |
13 | [*.md]
14 | insert_final_newline = false
15 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /dist/
2 | /node_modules/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ng2-application-shell
2 |
3 | Port of the Chrome Team's [Application Shell](https://github.com/GoogleChrome/application-shell) architecture to Angular2.
4 |
5 | Work in Progress!
6 |
--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 | "firebase": "ng2-forum-demo",
3 | "public": "dist",
4 | "ignore": [
5 | "firebase.json",
6 | "**/.*",
7 | "**/node_modules/**"
8 | ],
9 | "rewrites": [{
10 | "source": "**",
11 | "destination": "/index.html"
12 | }]
13 | }
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var tsregister = require('ts-node/register');
3 | var tsconfig = require('./tsconfig.json');
4 |
5 | var config = {
6 | index: 'src/index.html',
7 | css:['src/**/*.scss'],
8 | staticFiles: [
9 | 'src/**/*',
10 | '!src/**/*.ts',
11 | 'node_modules/systemjs/dist/system.js',
12 | 'node_modules/angular2/bundles/angular2-polyfills.js'
13 | ],
14 | dist: './dist',
15 | system: {
16 | configFile: 'system.config.js'
17 | }
18 | };
19 |
20 | require('./tasks/build').build(gulp, config);
21 | require('./tasks/copy').copy(gulp, config);
22 | require('./tasks/styles').compile(gulp, config);
23 | require('./tasks/compile').compile(gulp, config);
24 |
25 |
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng2-application-shell",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "dependencies": {
12 | "angular2": "^2.0.0-alpha.52",
13 | "es6-promise": "^3.0.2",
14 | "es6-shim": "^0.33.13",
15 | "firebase": "^2.3.2",
16 | "reflect-metadata": "^0.1.2",
17 | "rxjs": "^5.0.0-alpha.14",
18 | "zone.js": "^0.5.8"
19 | },
20 | "devDependencies": {
21 | "gulp": "^3.9.0",
22 | "gulp-inline": "^0.1.0",
23 | "gulp-minify-css": "^1.2.2",
24 | "gulp-sass": "^2.1.1",
25 | "gulp-util": "^3.0.7",
26 | "systemjs": "^0.19.6",
27 | "systemjs-builder": "^0.14.11",
28 | "ts-node": "^0.5.4",
29 | "typescript": "^1.7.3",
30 | "typescript-node": "^0.1.3"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/app-shell.js:
--------------------------------------------------------------------------------
1 | //TODO: service worker stuffs
2 |
3 | System.config({
4 | map: {
5 | app: 'src/main.ts'
6 | }
7 | });
8 |
9 | System.import('app').catch(function(err){
10 | console.log(err);
11 | });
--------------------------------------------------------------------------------
/src/app/app.ts:
--------------------------------------------------------------------------------
1 | //ng2 deps
2 | import {Component} from 'angular2/core';
3 | import {Router, Route, RouteConfig, AsyncRoute, ROUTER_DIRECTIVES} from 'angular2/router';
4 |
5 | //app services
6 | import {AuthService} from '../services/Auth';
7 | import {Nav} from '../services/Nav';
8 | import {Backend, BackendConfig} from '../services/Backend';
9 |
10 | //generic components
11 | import {AppHeader} from '../components/header';
12 | import {SideNav} from '../components/sidenav';
13 | import {Toast} from '../components/toast';
14 |
15 | //routable components
16 | import {Home} from '../components/Home';
17 | import {About} from '../components/About';
18 |
19 | @Component({
20 | selector: 'app',
21 | providers: [Nav],
22 | directives: [AppHeader, SideNav, Toast, ROUTER_DIRECTIVES],
23 | template: `
24 |
25 |
26 |
27 |
28 |
29 | `,
30 | })
31 | @RouteConfig([
32 | new Route({ name: 'Home', component: Home, path: '/home', useAsDefault: true }),
33 | new Route({ name: 'About', component: About, path: '/about' })
34 | ])
35 | export class App {
36 | constructor(public backend: Backend, public nav: Nav) { }
37 |
38 | authenticate() {
39 | this.backend.authenticate()
40 | }
41 | showToast(message) { }
42 | }
--------------------------------------------------------------------------------
/src/components/About.ts:
--------------------------------------------------------------------------------
1 | import {Component} from 'angular2/core';
2 | import {Nav} from '../services/Nav';
3 |
4 | @Component({
5 | selector: 'about',
6 | template: `
7 |
8 |
About
9 |
10 |
11 | `
12 | })
13 | export class About {
14 | constructor(){
15 |
16 | }
17 | }
--------------------------------------------------------------------------------
/src/components/Home.ts:
--------------------------------------------------------------------------------
1 | import {Component} from 'angular2/core';
2 | import {Nav} from '../services/Nav';
3 |
4 | @Component({
5 | selector: 'home',
6 | template: `
7 |
8 |
Hello World
9 |
10 |
11 |
12 |
13 |
Hello World
14 |
15 |
16 |
17 |
18 |
Hello World
19 |
20 |
21 |
22 |
23 |
Hello World
24 |
25 |
26 |
27 |
28 |
Hello World
29 |
30 |
31 |
32 |
33 |
Hello World
34 |
35 |
36 |
37 |
38 |
Hello World
39 |
40 |
41 |
42 |
43 |
Hello World
44 |
45 |
46 |
47 |
48 |
Hello World
49 |
50 |
51 |
52 |
53 |
Hello World
54 |
55 |
56 |
57 |
58 |
Hello World
59 |
60 |
61 |
62 |
63 |
Hello World
64 |
65 |
66 |
67 |
68 | `
69 | })
70 | export class Home {
71 | constructor(private nav: Nav){
72 |
73 | }
74 | openSideNav(){
75 | this.nav.open()
76 | }
77 | }
--------------------------------------------------------------------------------
/src/components/header.ts:
--------------------------------------------------------------------------------
1 | import {Component} from 'angular2/core';
2 | import {Nav} from '../services/Nav';
3 |
4 | @Component({
5 | selector: 'app-header',
6 | template: `
7 |
8 |
9 |
10 | `
11 | })
12 | export class AppHeader {
13 | constructor(private nav: Nav){
14 |
15 | }
16 | openSideNav(){
17 | this.nav.open()
18 | }
19 | }
--------------------------------------------------------------------------------
/src/components/sidenav.ts:
--------------------------------------------------------------------------------
1 | import {Component, Directive, Output, Input, EventEmitter, Renderer, ElementRef} from 'angular2/core';
2 | import {App} from '../app/app';
3 | import {Nav} from '../services/Nav';
4 | import {ReplaySubject} from 'rxjs/subject/ReplaySubject';
5 | import {ROUTER_DIRECTIVES} from 'angular2/router';
6 |
7 | @Directive({
8 | selector: '[side-nav-content]',
9 | host: {
10 | '(transitionend)': 'cleanup()'
11 | }
12 | })
13 | class SideNavContent {
14 | @Input() open: boolean;
15 |
16 | constructor(private el: ElementRef, private renderer: Renderer){
17 |
18 | }
19 | ngOnChanges(changes:any){
20 | if(changes.open.currentValue && changes.open.previousValue !== undefined){
21 | this.setOpen()
22 | }
23 | else{
24 | this.setClosed()
25 | }
26 | }
27 | setOpen(){
28 | this.renderer.setElementClass(this.el, 'side-nav__content--animatable', true);
29 | this.renderer.setElementStyle(this.el, 'transform', 'translateX(0px)');
30 | }
31 | setClosed(){
32 | this.renderer.setElementClass(this.el, 'side-nav__content--animatable', true);
33 | this.renderer.setElementStyle(this.el, 'transform', 'translateX(-102%)');
34 | }
35 | cleanup(){
36 | this.renderer.setElementClass(this.el, 'side-nav__content--animatable', false);
37 | }
38 |
39 | }
40 |
41 | @Component({
42 | selector: 'side-nav',
43 | directives: [SideNavContent, ROUTER_DIRECTIVES],
44 | template: `
45 |
46 |
47 |
50 |
51 |
52 |
Index
53 |
About
54 |
URL 2
55 |
56 |
57 |
Version @VERSION@
58 |
27 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import {bootstrap} from 'angular2/platform/browser';
2 | import {platform, provide} from 'angular2/core';
3 | import {ROUTER_PROVIDERS} from 'angular2/router';
4 |
5 | import {AuthService} from './services/Auth';
6 | import {Backend, BackendConfig} from './services/Backend';
7 | import {Nav} from './services/Nav';
8 |
9 | const FIREBASE_URL = 'https://ng2-forum-demo.firebaseio.com';
10 |
11 | import {App} from './app/app';
12 |
13 | bootstrap(App,[
14 | ROUTER_PROVIDERS,
15 | AuthService,
16 | Backend,
17 | provide(BackendConfig, {useValue: {url: FIREBASE_URL }})
18 | ]);
19 |
20 |
--------------------------------------------------------------------------------
/src/ng2-service-worker.ts:
--------------------------------------------------------------------------------
1 | import 'reflect-metadata';
2 | import {Injector, Injectable, provide} from 'angular2/src/core/di';
3 |
4 | class SWLogger {
5 | log(...args: any[]) {
6 | console.log.apply(console, ['[service-worker]'].concat(args));
7 | }
8 | }
9 |
10 |
11 | const SW_EVENTS = {
12 | INSTALL: 'install',
13 | FETCH: 'fetch',
14 | ACTIVATE: 'activate'
15 | }
16 |
17 | class SWContext {
18 | addEventListener(event, handler) { }
19 | }
20 |
21 |
22 | @Injectable()
23 | class NgServiceWorker {
24 | constructor(serviceWorkerContext: SWContext, private _logger: SWLogger) {
25 | serviceWorkerContext.addEventListener(SW_EVENTS.ACTIVATE, (ev) => this.onActivate(ev));
26 | serviceWorkerContext.addEventListener(SW_EVENTS.INSTALL, (ev) => this.onInstall(ev));
27 | serviceWorkerContext.addEventListener(SW_EVENTS.FETCH, (ev) => this.onFetch(ev));
28 | }
29 |
30 | bootstrap() {
31 | this._logger.log('bootstrap')
32 | }
33 |
34 | onInstall(installEvent) {
35 | installEvent.waitUntil(this._onInstall());
36 | }
37 |
38 | private _onInstall() {
39 | return Promise.resolve('ready');
40 | }
41 |
42 | onActivate(activateEvent) {
43 | this._logger.log('activate', activateEvent);
44 | }
45 | onFetch(fetchEvent) {
46 | this._logger.log('fetch', fetchEvent.request.url);
47 | }
48 | }
49 |
50 |
51 |
52 | Injector
53 | .resolveAndCreate([
54 | SWLogger,
55 | provide(SWContext, { useValue: self }),
56 | NgServiceWorker, ])
57 | .get(NgServiceWorker)
58 | .bootstrap();
--------------------------------------------------------------------------------
/src/services/Auth.ts:
--------------------------------------------------------------------------------
1 | import {Injectable, Inject} from 'angular2/core';
2 | import {Backend} from './Backend';
3 |
4 | @Injectable()
5 | export class AuthService {
6 | constructor(private backend: Backend){
7 |
8 | }
9 | authenticate(){
10 | this.backend.authenticate()
11 | }
12 | }
--------------------------------------------------------------------------------
/src/services/Backend.ts:
--------------------------------------------------------------------------------
1 | import Firebase from 'firebase';
2 | import {Injectable} from 'angular2/core';
3 | import {Observable} from 'rxjs/Observable';
4 | import {ReplaySubject} from 'rxjs/subject/ReplaySubject';
5 |
6 | export class BackendConfig {
7 | url: string;
8 | }
9 |
10 |
11 | @Injectable()
12 | export class Backend {
13 | authState: ReplaySubject = new ReplaySubject(1);
14 | ref: Firebase;
15 | constructor(config: BackendConfig){
16 | this.ref = new Firebase(config.url);
17 | }
18 | authenticate(){
19 | let authRequest = new Observable(obs => {
20 |
21 | this.ref.authWithOAuthPopup('github', (err, res) => {
22 | if(err){
23 | obs.error(err);
24 | }
25 | else {
26 | obs.next(res);
27 | }
28 | })
29 |
30 | });
31 |
32 | authRequest.subscribe(this.authState);
33 |
34 | }
35 | }
--------------------------------------------------------------------------------
/src/services/Nav.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from 'angular2/core';
2 | import {ReplaySubject} from 'rxjs/subject/ReplaySubject';
3 |
4 | @Injectable()
5 | export class Nav {
6 | isOpen: ReplaySubject = new ReplaySubject(1);
7 |
8 | open(){
9 | this.isOpen.next(true);
10 | }
11 | close(){
12 | this.isOpen.next(false);
13 | }
14 | toggle(){
15 | this.isOpen.map(open => !open).take(1).subscribe(this.isOpen);
16 | }
17 | }
--------------------------------------------------------------------------------
/src/util/styleloader.js:
--------------------------------------------------------------------------------
1 | var remoteStyles = ['https://fonts.googleapis.com/css?family=Roboto:400,300,700,500,400italic']
2 |
3 | window.requestAnimationFrame(function() {
4 | var elementToInsertLinkBefore =
5 | document.getElementsByTagName('script')[0];
6 | for (var i = 0; i < remoteStyles.length; i++) {
7 | var linkElement = document.createElement('link');
8 | linkElement.rel = 'stylesheet';
9 | linkElement.media = 'all';
10 | linkElement.href = remoteStyles[i];
11 |
12 | elementToInsertLinkBefore.parentNode.insertBefore(linkElement,
13 | elementToInsertLinkBefore);
14 | }
15 | });
--------------------------------------------------------------------------------
/system.config.js:
--------------------------------------------------------------------------------
1 | System.config({
2 | transpiler: 'typescript',
3 | typescriptOptions: {
4 | emitDecoratorMetadata: true
5 | },
6 | map: {
7 | typescript: 'node_modules/typescript/lib/typescript.js',
8 | app: './src',
9 | angular2: 'node_modules/angular2',
10 | rxjs: 'node_modules/rxjs',
11 | 'reflect-metadata': 'node_modules/reflect-metadata/temp/Reflect.js',
12 | 'zone.js': 'node_modules/zone.js/dist/zone.js',
13 | firebase: 'node_modules/firebase/lib/firebase-web.js'
14 | },
15 | packages: {
16 | app: {
17 | defaultExtension: 'ts',
18 | main: 'main.ts'
19 | },
20 | angular2: {
21 | defaultExtension: 'js',
22 | },
23 | rxjs: {
24 | defaultExtension: 'js'
25 | },
26 | 'reflect-metadata': {
27 | format: 'global'
28 | }
29 | }
30 | });
--------------------------------------------------------------------------------
/tasks/build.ts:
--------------------------------------------------------------------------------
1 | declare var require;
2 |
3 | const sass = require('gulp-sass');
4 | const inline = require('gulp-inline');
5 | const minifyCSS = require('gulp-minify-css');
6 |
7 | export const build = (gulp, config) => {
8 |
9 | gulp.task('default', ['compile:sass','compile:app','copy:dev'], () => {
10 |
11 | gulp.src(config.index)
12 | .pipe(inline({
13 | base: 'dist',
14 | css: minifyCSS,
15 | disabledTypes: ['img', 'js'], // Only inline css files
16 | }))
17 | .pipe(gulp.dest('dist/'));
18 |
19 | });
20 |
21 |
22 | }
--------------------------------------------------------------------------------
/tasks/compile.ts:
--------------------------------------------------------------------------------
1 | declare var require;
2 |
3 | var Builder = require('systemjs-builder');
4 | var util = require('gulp-util');
5 |
6 | export const compile = (gulp, config) => {
7 |
8 | gulp.task('compile:app', ['compile:vendor'], () => {
9 |
10 | let builder = new Builder();
11 |
12 | return builder.loadConfig(config.system.configFile)
13 | .then(() => {
14 | return builder.bundle('app - dist/vendor.js', 'dist/app.js', {minify: util.env.production})
15 | })
16 | });
17 |
18 | gulp.task('compile:vendor', [], () => {
19 |
20 | let builder = new Builder();
21 |
22 | return builder.loadConfig(config.system.configFile)
23 | .then(() => {
24 | return builder.bundle('app - [app/**/*]', 'dist/vendor.js', {minify: util.env.production})
25 | })
26 | });
27 |
28 | gulp.task('compile:serviceworker', [], () => {
29 |
30 | let builder = new Builder();
31 |
32 | return builder.loadConfig(config.system.configFile)
33 | .then(() => {
34 | return builder.buildStatic('app/ng2-service-worker', 'dist/worker.js', {minify: util.env.production})
35 | })
36 | });
37 | }
--------------------------------------------------------------------------------
/tasks/copy.ts:
--------------------------------------------------------------------------------
1 | const copy = (gulp, config) => {
2 |
3 | gulp.task('copy:dev', () => {
4 | return gulp.src(config.staticFiles)
5 | .pipe(gulp.dest(config.dist));
6 | });
7 |
8 | }
9 |
10 | export {copy};
--------------------------------------------------------------------------------
/tasks/styles.ts:
--------------------------------------------------------------------------------
1 | declare var require;
2 |
3 | const sass = require('gulp-sass');
4 |
5 | export const compile = (gulp, config) => {
6 | gulp.task('compile:sass', () => {
7 | return gulp.src(config.css)
8 | .pipe(sass().on('error', sass.logError))
9 | .pipe(gulp.dest(config.dist))
10 | })
11 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "commonjs",
4 | "target": "es5",
5 | "noImplicitAny": false,
6 | "outDir": "build",
7 | "rootDir": ".",
8 | "sourceMap": false,
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "moduleResolution": "node"
12 | },
13 | "exclude": [
14 | "node_modules"
15 | ]
16 | }
--------------------------------------------------------------------------------
22 |
23 |