Skip to content

Commit 1af0ed4

Browse files
antonmoiseevantonmoiseev
committed
Add walkthrough 2 app
1 parent 6489400 commit 1af0ed4

27 files changed

+557
-0
lines changed

‎angular2-webpack-firebase-2/.firebaserc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"projects": {
3+
"production": "angular-webpack2"
4+
}
5+
}

‎angular2-webpack-firebase-2/.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.idea
2+
dist
3+
node_modules
4+
typings

‎angular2-webpack-firebase-2/database.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"products": [
3+
"Teapot",
4+
"Clock",
5+
"Surfboard"
6+
]
7+
}

‎angular2-webpack-firebase-2/database.rules.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"rules": {
3+
".read": "auth != null",
4+
".write": "auth != null"
5+
}
6+
}

‎angular2-webpack-firebase-2/firebase.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"database": {
3+
"rules": "database.rules.json"
4+
},
5+
"hosting": {
6+
"public": "dist",
7+
"ignore": ["**/*.gz"],
8+
"rewrites": [{
9+
"source": "**",
10+
"destination": "/index.html"
11+
}]
12+
}
13+
}

‎angular2-webpack-firebase-2/karma-test-runner.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
Error.stackTraceLimit = Infinity;
2+
3+
require('reflect-metadata');
4+
require('zone.js/dist/zone');
5+
require('zone.js/dist/async-test');
6+
require('zone.js/dist/fake-async-test');
7+
8+
var testing = require('@angular/core/testing');
9+
var browser = require('@angular/platform-browser-dynamic/testing');
10+
11+
testing.setBaseTestProviders(
12+
browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
13+
browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
14+
15+
Object.assign(global, testing);
16+
17+
var testContext = require.context('./src', true, /\.spec\.ts/);
18+
19+
function requireAll(requireContext) {
20+
return requireContext.keys().map(requireContext);
21+
}
22+
23+
var modules = requireAll(testContext);

‎angular2-webpack-firebase-2/karma.conf.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = function(config) {
2+
config.set({
3+
browsers : ['Chrome', 'Firefox'],
4+
frameworks : ['jasmine'],
5+
reporters : ['mocha'],
6+
singleRun : true,
7+
preprocessors: {'./karma-test-runner.js': ['webpack']},
8+
files : [{pattern: './karma-test-runner.js', watched: false}],
9+
webpack : require('./webpack.test.config.js'),
10+
webpackServer: {noInfo: true}
11+
});
12+
};

‎angular2-webpack-firebase-2/package.json

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "angular2-webpack-starter",
3+
"version": "1.0.0",
4+
"description": "Angular 2 Webpack starter project for dev/prod environments",
5+
"homepage": "https://www.manning.com/books/angular-2-development-with-typescript",
6+
"private": true,
7+
"scripts": {
8+
"clean": "rimraf dist",
9+
"postinstall": "typings install",
10+
"prebuild": "npm run clean && npm run test",
11+
"build": "webpack --config webpack.prod.config.js --progress --profile --colors --display-error-details --display-cached",
12+
"start": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 8080",
13+
"preserve:dist": "npm run build",
14+
"serve:dist": "static dist -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}' -z",
15+
"test": "karma start karma.conf.js",
16+
"deploy:dist": "firebase deploy",
17+
"deploy:data": "firebase database:set / database.json"
18+
},
19+
"dependencies": {
20+
"@angular/common": "2.0.0-rc.1",
21+
"@angular/compiler": "2.0.0-rc.1",
22+
"@angular/core": "2.0.0-rc.1",
23+
"@angular/http": "2.0.0-rc.1",
24+
"@angular/platform-browser": "2.0.0-rc.1",
25+
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
26+
"@angular/router": "2.0.0-rc.1",
27+
"es6-shim": "^0.35.1",
28+
"firebase": "^3.0.3",
29+
"reflect-metadata": "^0.1.3",
30+
"rxjs": "5.0.0-beta.6",
31+
"systemjs": "^0.19.29",
32+
"zone.js": "^0.6.12"
33+
},
34+
"devDependencies": {
35+
"compression-webpack-plugin": "^0.3.1",
36+
"copy-webpack-plugin": "^3.0.1",
37+
"css-loader": "^0.23.1",
38+
"dedupe-plugin": "^1.0.0",
39+
"firebase-tools": "^3.0.2",
40+
"html-loader": "^0.4.3",
41+
"jasmine-core": "^2.4.1",
42+
"karma": "^0.13.22",
43+
"karma-chrome-launcher": "^1.0.1",
44+
"karma-firefox-launcher": "^1.0.0",
45+
"karma-jasmine": "^1.0.2",
46+
"karma-mocha-reporter": "^2.0.0",
47+
"karma-webpack": "^1.7.0",
48+
"node-static": "^0.7.7",
49+
"raw-loader": "^0.5.1",
50+
"rimraf": "^2.5.2",
51+
"style-loader": "^0.13.0",
52+
"to-string-loader": "^1.1.3",
53+
"ts-loader": "^0.8.1",
54+
"typescript": "~1.8.9",
55+
"typings": "^1.0.4",
56+
"webpack": "^1.13.1",
57+
"webpack-dev-server": "^1.14.0"
58+
}
59+
}

‎angular2-webpack-firebase-2/src/app/about/about.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.wrapper {
2+
background: yellow;
3+
}
4+
5+
.unauthorized {
6+
background: red;
7+
color: white;
8+
font-weight: 700;
9+
}

‎angular2-webpack-firebase-2/src/app/about/about.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="wrapper">
2+
<h2>About Component</h2>
3+
4+
<div *ngIf="!currentUser" class="unauthorized">You are not authorized to access this page. You will be redirected to the Home page in 5 seconds.</div>
5+
6+
<ul *ngIf="currentUser">
7+
<li *ngFor="let p of products">{{p}}</li>
8+
</ul>
9+
</div>

‎angular2-webpack-firebase-2/src/app/about/about.ts

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {Component, OnDestroy} from '@angular/core';
2+
import {OnActivate, Router, RouteSegment} from '@angular/router';
3+
import {Observable} from 'rxjs/Observable';
4+
import 'rxjs/add/observable/timer';
5+
6+
declare var firebase: any;
7+
8+
@Component({
9+
selector: 'my-about',
10+
styles: [require('./about.css')],
11+
template: require('./about.html'),
12+
})
13+
export class About implements OnActivate, OnDestroy {
14+
currentUser: any;
15+
products: string[];
16+
17+
constructor(private router: Router) {}
18+
19+
routerOnActivate(curr: RouteSegment, prev?: RouteSegment) {
20+
this.currentUser = firebase.auth().currentUser;
21+
22+
if (!this.currentUser) {
23+
24+
// Observable.timer() to avoid using browser's API directly.
25+
Observable.timer(5000).subscribe(() => {
26+
27+
let previousPageUrl = prev.stringifiedUrlSegments;
28+
this.router.navigateByUrl(previousPageUrl);
29+
30+
});
31+
}
32+
33+
firebase.database().ref('products').on('value', snapshot => {
34+
this.products = snapshot.val();
35+
});
36+
}
37+
38+
ngOnDestroy() {
39+
firebase.database().ref('products').off();
40+
}
41+
}

‎angular2-webpack-firebase-2/src/app/app.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.wrapper {
2+
background: #eee;
3+
}
4+
5+
.auth-panel {
6+
margin: 20px 0;
7+
}
8+
9+
.error-message {
10+
color: red;
11+
}

‎angular2-webpack-firebase-2/src/app/app.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="wrapper">
2+
<h1>Angular Webpack Starter</h1>
3+
4+
<nav>
5+
<a [routerLink]="['/']">Home</a>
6+
<a [routerLink]="['/about']">About</a>
7+
</nav>
8+
9+
<div class="auth-panel">
10+
<button (click)="login()">Login</button>
11+
<button (click)="logout()">Logout</button>
12+
13+
<div>
14+
Current user: {{currentUserName}}
15+
</div>
16+
17+
<div class="error-message">
18+
{{errorMessage}}
19+
</div>
20+
</div>
21+
22+
23+
<div>
24+
<router-outlet></router-outlet>
25+
</div>
26+
</div>

‎angular2-webpack-firebase-2/src/app/app.spec.ts

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import {ComponentResolver} from '@angular/core';
2+
import {Location} from '@angular/common';
3+
import {
4+
DefaultRouterUrlSerializer,
5+
Router,
6+
RouterOutletMap,
7+
RouterUrlSerializer
8+
} from '@angular/router';
9+
import {
10+
beforeEachProviders,
11+
describe,
12+
expect,
13+
fakeAsync,
14+
inject,
15+
it,
16+
tick
17+
} from '@angular/core/testing';
18+
import {SpyLocation} from '@angular/common/testing';
19+
import {TestComponentBuilder} from '@angular/compiler/testing';
20+
import {MyApp} from './app';
21+
22+
describe('Router', () => {
23+
beforeEachProviders(() => [
24+
RouterOutletMap,
25+
{provide: Location, useClass: SpyLocation},
26+
{provide: RouterUrlSerializer, useClass: DefaultRouterUrlSerializer},
27+
{provide: Router,
28+
deps: [ComponentResolver, RouterUrlSerializer, RouterOutletMap, Location],
29+
useFactory: (resolver, urlParser, outletMap, location) =>
30+
new Router('MyApp', MyApp, resolver, urlParser, outletMap, location),
31+
}
32+
]);
33+
34+
it('should be able to navigate to Home using commands API',
35+
fakeAsync(inject([Router, Location, TestComponentBuilder],
36+
(router: Router, location: Location, tcb: TestComponentBuilder) => {
37+
tcb.createFakeAsync(MyApp);
38+
router.navigate(['/']);
39+
tick();
40+
expect(location.path()).toBe('');
41+
})
42+
));
43+
44+
it('should be able to navigate to About using commands API',
45+
fakeAsync(inject([Router, Location, TestComponentBuilder],
46+
(router: Router, location: Location, tcb: TestComponentBuilder) => {
47+
tcb.createFakeAsync(MyApp);
48+
router.navigate(['/about']);
49+
tick();
50+
expect(location.path()).toBe('/about');
51+
})
52+
));
53+
54+
it('should be able to navigate to About by URL',
55+
fakeAsync(inject([Router, Location, TestComponentBuilder],
56+
(router: Router, location: Location, tcb: TestComponentBuilder) => {
57+
tcb.createFakeAsync(MyApp);
58+
router.navigateByUrl('/about');
59+
tick();
60+
expect(location.path()).toEqual('/about');
61+
})
62+
));
63+
});

‎angular2-webpack-firebase-2/src/app/app.ts

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {Component} from '@angular/core';
2+
import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
3+
4+
import {Home} from './home/home';
5+
import {About} from './about/about';
6+
7+
declare var firebase: any;
8+
9+
@Component({
10+
selector: 'my-app',
11+
styles: [require('./app.css')],
12+
template: require('./app.html'),
13+
directives: [ROUTER_DIRECTIVES]
14+
})
15+
@Routes([
16+
{path: '/', component: Home},
17+
{path: '/about', component: About}
18+
])
19+
export class MyApp {
20+
currentUser: any;
21+
errorMessage: string;
22+
23+
get currentUserName(): string {
24+
return this.currentUser ? this.currentUser.displayName : 'unauthenticated';
25+
};
26+
27+
28+
login() {
29+
var githubProvider = new firebase.auth.GithubAuthProvider();
30+
31+
firebase.auth().signInWithPopup(githubProvider).then(result => {
32+
// The signed-in user info.
33+
this.currentUser = result.user;
34+
35+
}).catch(error => console.log(error));
36+
}
37+
38+
logout() {
39+
firebase.auth().signOut().then(() => {
40+
this.currentUser = null;
41+
});
42+
}
43+
}

‎angular2-webpack-firebase-2/src/app/home/home.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.wrapper {
2+
background: lightgreen;
3+
}

‎angular2-webpack-firebase-2/src/app/home/home.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="wrapper">
2+
<h2>Home Component</h2>
3+
<p>Welcome to the Angular Webpack Starter project!</p>
4+
</div>

‎angular2-webpack-firebase-2/src/app/home/home.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'my-home',
5+
styles: [require('./home.css')],
6+
template: require('./home.html')
7+
})
8+
export class Home {}

‎angular2-webpack-firebase-2/src/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset=UTF-8>
5+
<title>Angular Webpack Starter</title>
6+
<base href="/">
7+
</head>
8+
<body>
9+
<my-app>Loading...</my-app>
10+
<script src="vendor.bundle.js"></script>
11+
<script src="bundle.js"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)