Skip to content

Commit 6965830

Browse files
sstoriesstorie
committed
Merged branch develop into master
2 parents ea90c51 + 7fc8d1a commit 6965830

File tree

10 files changed

+185
-0
lines changed

10 files changed

+185
-0
lines changed

‎angular2-bootstrap-arguments-webpack/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
## Running the example
2+
3+
This uses the method described in the Angular 2 quick start guide, so you need to first install packages, and then you should be able to just run things:
4+
5+
```
6+
npm install
7+
npm start
8+
```
9+
10+
That should compile everything for you and launch a browser that will react to changes in any file.

‎angular2-bootstrap-arguments-webpack/app/api.service.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {Injectable, Inject} from "@angular/core";
2+
3+
export class ApiConfig {
4+
apiUrl: string;
5+
apiToken: string;
6+
}
7+
8+
@Injectable()
9+
export class ApiService {
10+
// We can easily inject the API config using the DI token created when
11+
// the application was bootstrapped
12+
//
13+
constructor(
14+
@Inject("api.config") private apiConfig: ApiConfig
15+
) {
16+
console.log("Injected config:", this.apiConfig);
17+
}
18+
}

‎angular2-bootstrap-arguments-webpack/app/app.component.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component} from '@angular/core';
2+
import {ApiService} from "./api.service";
3+
4+
@Component({
5+
selector: 'my-app',
6+
template: `
7+
<h1>Angular is now running</h1>
8+
<div>Please check the console log to see the externally provided API config</div>
9+
`,
10+
providers: [ApiService]
11+
})
12+
export class AppComponent {
13+
// Just inject the ApiService so the class is instantiated
14+
//
15+
constructor(private apiService: ApiService) {}
16+
}

‎angular2-bootstrap-arguments-webpack/app/app.module.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { NgModule, provide } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
import { AppComponent } from './app.component';
5+
6+
@NgModule({
7+
imports: [ BrowserModule ],
8+
declarations: [ AppComponent ],
9+
bootstrap: [ AppComponent ],
10+
//
11+
// Here's where we access the data set by the server in the original
12+
// index.html page. We can take advantage of the factory method of
13+
// creating a provider, and use the anonymous function to access the
14+
// data off of the 'window' object at run-time.
15+
//
16+
providers: [{provide: "api.config", useFactory: () => window['appdata']}],
17+
})
18+
export class AppModule { }

‎angular2-bootstrap-arguments-webpack/app/main.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
///<reference path="../typings/index.d.ts"/>
2+
3+
import "es6-shim";
4+
import "zone.js/dist/zone";
5+
import "reflect-metadata";
6+
7+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
8+
9+
import {AppModule} from "./app.module";
10+
11+
platformBrowserDynamic().bootstrapModule(AppModule);

‎angular2-bootstrap-arguments-webpack/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Angular 2 Bootstrapping with External Data using Webpack</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
</head>
10+
11+
<body>
12+
<my-app>Loading...</my-app>
13+
14+
<script>
15+
// To pass server-rendered data to the Angular app we'll just use the
16+
// 'window' object as a container. In this case lets set a property
17+
// on it called 'appdata', and we'll consume that in our app module
18+
//
19+
window['appdata'] = {
20+
apiUrl: "https://my-api",
21+
apiToken: "SOME_SERVER_PROVIDED_TOKEN"
22+
}
23+
</script>
24+
25+
<script src="assets/app.bundle.js"></script>
26+
27+
</body>
28+
</html>

‎angular2-bootstrap-arguments-webpack/package.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "angular2-bootstrap-arguments-webpack",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"start": "webpack && concurrently \"npm run build:w\" \"npm run lite\" ",
6+
"lite": "lite-server",
7+
"postinstall": "typings install",
8+
"build": "webpack",
9+
"build:w": "webpack --watch",
10+
"typings": "typings"
11+
},
12+
"license": "MIT",
13+
"dependencies": {
14+
"@angular/common": "^2.0.0-rc.5",
15+
"@angular/compiler": "^2.0.0-rc.5",
16+
"@angular/core": "^2.0.0-rc.5",
17+
"@angular/platform-browser": "^2.0.0-rc.5",
18+
"@angular/platform-browser-dynamic": "^2.0.0-rc.5",
19+
"es6-shim": "^0.35.1",
20+
"reflect-metadata": "^0.1.8",
21+
"rxjs": "5.0.0-beta.6",
22+
"zone.js": "^0.6.12"
23+
},
24+
"devDependencies": {
25+
"concurrently": "^2.2.0",
26+
"lite-server": "^2.2.2",
27+
"ts-loader": "^0.8.2",
28+
"typescript": "^1.8.10",
29+
"typings": "^1.3.2",
30+
"webpack": "^1.13.1"
31+
}
32+
}

‎angular2-bootstrap-arguments-webpack/tsconfig.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "commonjs",
5+
"moduleResolution": "node",
6+
"sourceMap": false,
7+
"emitDecoratorMetadata": true,
8+
"experimentalDecorators": true,
9+
"removeComments": false,
10+
"noImplicitAny": true,
11+
"suppressImplicitAnyIndexErrors": true
12+
},
13+
"files": [
14+
"app/main.ts"
15+
]
16+
}

‎angular2-bootstrap-arguments-webpack/typings.json

Whitespace-only changes.

‎angular2-bootstrap-arguments-webpack/webpack.config.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// An attempt at a very simple webpack config file that shows
2+
// the minimum required to "compile" an angular app
3+
//
4+
5+
module.exports = {
6+
// Define the entry points for our application so webpack knows what to
7+
// use as inputs
8+
//
9+
entry: {
10+
app: ["./app/main"]
11+
},
12+
13+
// Define where the resulting file should go
14+
//
15+
output: {
16+
filename: "assets/[name].bundle.js"
17+
},
18+
19+
// Define the extensions that we want webpack to resolve (we need to
20+
// override the default to ensure .ts files are included)
21+
//
22+
resolve: {
23+
extensions: ["", ".ts", ".js"]
24+
},
25+
26+
module: {
27+
loaders: [
28+
// Process any typescript or typescript-jsx files using the ts-loader
29+
//
30+
{
31+
test: /\.tsx?$/,
32+
loaders: ["ts-loader"]
33+
}
34+
]
35+
}
36+
}

0 commit comments

Comments
 (0)