Skip to content

Commit 40d4122

Browse files
opiepjopiepj
committed
Merge pull request #4 from opiepj/feature/3-AppFramework
Feature/3 app framework
2 parents 1b7180a + 0a9ceb9 commit 40d4122

File tree

12 files changed

+1367
-0
lines changed

12 files changed

+1367
-0
lines changed

‎src/app/bootstrap.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/// <reference path="../typings/_custom.d.ts" />
2+
3+
// Angular 2
4+
import {bootstrap} from 'angular2/angular2';
5+
6+
7+
/*
8+
* Common Injectables
9+
* our custom helper injectables to configure our app differently using the dependency injection system
10+
*/
11+
import {
12+
jitInjectables,
13+
dynamicInjectables,
14+
preGeneratedInjectables
15+
} from '../common/changeDetectionInjectables';
16+
import {
17+
html5locationInjectables,
18+
hashlocationInjectables
19+
} from '../common/locationInjectables';
20+
21+
/*
22+
* Angular Modules
23+
*/
24+
import {httpInjectables, formInjectables} from 'angular2/angular2';
25+
import {routerInjectables} from 'angular2/router';
26+
27+
/*
28+
* App Services
29+
* our collection of injectables services
30+
*/
31+
import {appServicesInjectables} from './services/services';
32+
33+
34+
/*
35+
* App Component
36+
* our top level component that holds all of our components
37+
*/
38+
import {App} from './components/app';
39+
40+
41+
/*
42+
* Universal injectables
43+
*/
44+
var universalInjectables = [
45+
// Angular's http/form/router services/bindings
46+
httpInjectables,
47+
formInjectables,
48+
routerInjectables,
49+
50+
// Our collection of services from /services
51+
appServicesInjectables
52+
];
53+
54+
/*
55+
* Platform injectables
56+
*/
57+
var platformInjectables = [
58+
// if we want to use the Just-In-Time change detection
59+
// bestChangeDetectionInjectables,
60+
61+
// if we want to use hashBash url for the router
62+
// hashlocationInjectables
63+
];
64+
65+
/*
66+
* Bootstrap our Angular app with a top level component `App` and inject
67+
* our Universal/Platform services/bindings into Angular's dependency injection
68+
*/
69+
bootstrap(
70+
// Top Level Component
71+
App,
72+
73+
// AppInjector
74+
[
75+
universalInjectables,
76+
platformInjectables
77+
]
78+
);

‎src/app/components/app.ts‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/// <reference path="../../typings/_custom.d.ts" />
2+
3+
/*
4+
* Angular 2
5+
*/
6+
import {Component, View} from 'angular2/angular2';
7+
import {RouteConfig} from 'angular2/router';
8+
9+
/*
10+
* Directives
11+
*/
12+
import {coreDirectives, formDirectives} from 'angular2/angular2';
13+
import {routerDirectives} from 'angular2/router';
14+
// Import all of our custom app directives
15+
import {appDirectives} from '../directives/directives';
16+
17+
/*
18+
* App Pipes
19+
* our collection of pipes registry
20+
*/
21+
import {appPipes} from '../pipes/pipes';
22+
23+
/*
24+
* Components
25+
*/
26+
/* TODO: Create these Components
27+
// We use a folder if we want separate files
28+
import {Home} from './home/home';
29+
// Otherwise we only use one file for a component
30+
import {Dashboard} from './dashboard';
31+
// A simple example of a Component using a Service
32+
import {Todo} from './todo';
33+
34+
// RxJs examples
35+
import {RxJsExamples} from './rxjs-examples/rxjs-examples';
36+
*/
37+
// Use webpack's `require` to get files as a raw string using raw-loader
38+
let styles = require('./app.css');
39+
40+
/*
41+
* App Component
42+
* Top Level Component
43+
* Simple router component example
44+
*/
45+
@Component({
46+
selector: 'app', // without [ ] means we are selecting the tag directly
47+
viewBindings: [ appPipes ]
48+
})
49+
@View({
50+
// needed in order to tell Angular's compiler what's in the template
51+
directives: [
52+
// Angular's core directives
53+
coreDirectives,
54+
55+
// Angular's form directives
56+
formDirectives,
57+
58+
// Angular's router
59+
routerDirectives,
60+
61+
// Our collection of directives from /directives
62+
appDirectives
63+
],
64+
// include our .css file
65+
styles: [ styles ],
66+
template: `
67+
<header>
68+
<div layout="row" class="top-nav ac-default-theme">
69+
<img src="angular-shield.png" alt="Angular2" height="54" width="54">
70+
<span class="logo">{{ name | capitalize }} + Webpack</span>
71+
<ul>
72+
<li class="l-left">
73+
<a [router-link]=" ['/home'] "class="top-nav-button ac-default-theme">Home</a>
74+
</li>
75+
<li class="l-left">
76+
<a [router-link]=" ['/dashboard'] "class="top-nav-button ac-default-theme">Dashboard</a>
77+
</li>
78+
<li class="l-left">
79+
<a [router-link]=" ['/todo'] "class="top-nav-button ac-default-theme">Todo</a>
80+
</li>
81+
<li class="l-left">
82+
<a [router-link]=" ['/rxjs-examples', 'search'] "class="top-nav-button ac-default-theme">RxJs Examples</a>
83+
</li>
84+
</ul>
85+
</div>
86+
</header>
87+
88+
<main>
89+
<router-outlet></router-outlet>
90+
</main>
91+
92+
<footer>
93+
WebPack Angular 2 Starter by <a href="https://twitter.com/AngularClass">@AngularClass</a>
94+
</footer>
95+
`
96+
})
97+
@RouteConfig([
98+
/* TODO: create these components
99+
{ path: '/', as: 'home', component: Home },
100+
{ path: '/dashboard', as: 'dashboard', component: Dashboard },
101+
{ path: '/todo', as: 'todo', component: Todo },
102+
{ path: '/rxjs-examples/...', as: 'rxjs-examples', component: RxJsExamples }
103+
*/
104+
])
105+
export class App {
106+
name: string;
107+
constructor() {
108+
this.name = 'angular';
109+
}
110+
}

‎src/app/directives/directives.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/// <reference path="../../typings/_custom.d.ts" />
2+
/*
3+
* Angular 2
4+
*/
5+
import {coreDirectives, formDirectives} from 'angular2/angular2';
6+
import {routerDirectives} from 'angular2/router';
7+
8+
/*
9+
* App
10+
*/
11+
/* TODO: Create Autofocus directive */
12+
//import {Autofocus} from './Autofocus';
13+
14+
// global App only directives
15+
export var appDirectives: Array<any> = [
16+
//Autofocus
17+
];
18+
19+
// global Angular core and other Angular module directives (form/router)
20+
export var angularDirectives: Array<any> = [
21+
// Angular's core directives
22+
coreDirectives,
23+
24+
// Angular's form directives
25+
formDirectives,
26+
27+
// Angular's router
28+
routerDirectives
29+
];

‎src/app/pipes/pipes.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/// <reference path="../../typings/_custom.d.ts" />
2+
/*
3+
* Angular 2
4+
*/
5+
import {Pipes} from 'angular2/change_detection';
6+
7+
/*
8+
* App Pipes
9+
*/
10+
/* TODO: Create these pipe classes
11+
import {capitalize} from './CapitalizePipe';
12+
import {rxAsync} from './RxPipe';
13+
*/
14+
15+
export var appPipes = [
16+
Pipes.extend({
17+
//'async': rxAsync,
18+
//'capitalize': capitalize
19+
// add more pipes to this Map
20+
})
21+
];

‎src/app/services/services.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/// <reference path="../../typings/_custom.d.ts" />
2+
3+
import {bind} from 'angular2/angular2';
4+
5+
/* TO DO: create these components and services. */
6+
//import {todoInjectables} from './TodoService';
7+
//import {githubInjectables} from '../components/rxjs-examples/autosuggest/Github';
8+
9+
// Include injectables that you want to have globally throughout our app
10+
export var appServicesInjectables: Array<any> = [
11+
//githubInjectables,
12+
//todoInjectables,
13+
];

‎src/common/changeDetectionInjectables.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/// <reference path="../typings/_custom.d.ts" />
2+
import {bind} from 'angular2/angular2';
3+
import {
4+
ChangeDetection,
5+
DynamicChangeDetection,
6+
JitChangeDetection,
7+
PreGeneratedChangeDetection
8+
} from 'angular2/change_detection';
9+
10+
export var jitInjectables = [
11+
bind(ChangeDetection).toClass(JitChangeDetection)
12+
];
13+
14+
export var dynamicInjectables = [
15+
bind(ChangeDetection).toClass(DynamicChangeDetection)
16+
];
17+
18+
export var preGeneratedInjectables = [
19+
bind(ChangeDetection).toClass(PreGeneratedChangeDetection)
20+
];
21+
22+
export var bestChangeDetectionInjectables = [
23+
PreGeneratedChangeDetection.isSupported() ? preGeneratedInjectables :
24+
JitChangeDetection.isSupported() ? jitInjectables : dynamicInjectables
25+
];

‎src/common/locationInjectables.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/// <reference path="../typings/_custom.d.ts" />
2+
import {bind} from 'angular2/angular2';
3+
import {
4+
LocationStrategy,
5+
HashLocationStrategy,
6+
HTML5LocationStrategy
7+
} from 'angular2/router';
8+
9+
export var html5locationInjectables = [
10+
bind(LocationStrategy).toClass(HTML5LocationStrategy)
11+
];
12+
13+
export var hashlocationInjectables = [
14+
bind(LocationStrategy).toClass(HashLocationStrategy)
15+
];

‎src/public/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<title>Angular2 Webpack Starter by @gdi2990 from @AngularClass</title>
5+
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta name="description" content="">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
11+
<meta name="description" content="Angular2 Webpack Starter by @gdi2990 from @AngularClass">
12+
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
13+
14+
<base href="/">
15+
<!-- ignore: Aplha 32 router fix -->
16+
<script>baseElement = document.querySelector('base');baseElement.attr = baseElement.getAttribute;</script>
17+
<!-- styles -->
18+
<style>
19+
body {
20+
margin: 0;
21+
}
22+
</style>
23+
<!--
24+
Angular 2
25+
traceur-runtime: is only needed for ES6 browser polyfill
26+
this is not the full traceur only the polyfills
27+
-->
28+
<script src="/lib/traceur-runtime.min.js"></script>
29+
</head>
30+
<body>
31+
32+
<app>
33+
Loading...
34+
</app>
35+
36+
<!-- Commmon files to be cached -->
37+
<script src="/__build__/common.js"></script>
38+
<!-- Angular2 files -->
39+
<script src="/__build__/angular2.js"></script>
40+
<!-- App script -->
41+
<script src="/__build__/app-simple.js"></script>
42+
<!-- TODO: replace /app-simple.js with /app.js -->
43+
</body>
44+
</html>

‎src/typings/_custom.d.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
* Our custom types
3+
*/
4+
/// <reference path="browser.d.ts" />
5+
/// <reference path="ng2.d.ts" />
6+
/// <reference path="webpack.d.ts" />
7+
8+
9+
/*
10+
* tsd generated types
11+
*/
12+
/// <reference path="../../tsd_typings/tsd.d.ts" />

‎src/typings/browser.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
interface ObjectConstructor {
2+
assign(target: any, ...sources: any[]): any;
3+
observe(target: any, callback: Function, acceptList?: Array<any>): void;
4+
}

0 commit comments

Comments
 (0)