Merge remote-tracking branch 'origin/master'
# Conflicts: # public/docs/ts/latest/tutorial/index.jade # public/docs/ts/latest/tutorial/toh-pt5.jade
This commit is contained in:
commit
29df35d724
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<!-- #enddocregion style -->
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<link rel="stylesheet" href="demo.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<!-- #enddocregion style -->
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<!-- #enddocregion style -->
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
<!-- #enddocregion style -->
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
<!-- #enddocregion styles -->
|
||||
|
||||
<!-- IE required polyfill -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
<!-- #enddocregion styles -->
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -9,17 +9,17 @@
|
|||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
|
||||
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="https://npmcdn.com/zone.js@0.6.12"></script>
|
||||
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
|
||||
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
|
||||
<script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
|
||||
|
||||
<!-- 2. Configure SystemJS -->
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -10,17 +10,17 @@
|
|||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
|
||||
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="https://npmcdn.com/zone.js@0.6.12"></script>
|
||||
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
|
||||
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
|
||||
<script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
|
||||
|
||||
<!-- 2. Configure SystemJS -->
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -10,17 +10,17 @@
|
|||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
|
||||
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="https://npmcdn.com/zone.js@0.6.12"></script>
|
||||
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
|
||||
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
|
||||
<script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
|
||||
|
||||
<!-- 2. Configure SystemJS -->
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -22,7 +22,7 @@ module.exports = function(config) {
|
|||
},
|
||||
files: [
|
||||
// Polyfills.
|
||||
'node_modules/es6-shim/es6-shim.js',
|
||||
'node_modules/code-js/client/shim.min.js',
|
||||
|
||||
// Zone.js dependencies
|
||||
// Note - do not include zone.js itself here, it is already
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="sample.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -31,12 +31,14 @@
|
|||
"@angular/router": "2.0.0-rc.1",
|
||||
"@angular/router-deprecated": "2.0.0-rc.1",
|
||||
"@angular/upgrade": "2.0.0-rc.1",
|
||||
|
||||
"systemjs": "0.19.27",
|
||||
"es6-shim": "^0.35.0",
|
||||
"core-js": "^2.4.0",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.6",
|
||||
"zone.js": "^0.6.12",
|
||||
"angular2-in-memory-web-api": "0.0.7",
|
||||
|
||||
"angular2-in-memory-web-api": "0.0.9",
|
||||
"bootstrap": "^3.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<!-- #docregion libraries -->
|
||||
<!-- #docregion ie-polyfills -->
|
||||
<!-- IE required polyfill -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<!-- #enddocregion ie-polyfills -->
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
|
|
|
@ -17,11 +17,12 @@
|
|||
"@angular/router-deprecated": "2.0.0-rc.1",
|
||||
"@angular/upgrade": "2.0.0-rc.1",
|
||||
|
||||
"core-js": "^2.4.0",
|
||||
"reflect-metadata": "0.1.3",
|
||||
"rxjs": "5.0.0-beta.6",
|
||||
"zone.js": "0.6.12",
|
||||
|
||||
"angular2-in-memory-web-api": "0.0.7",
|
||||
"angular2-in-memory-web-api": "0.0.9",
|
||||
"bootstrap": "^3.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<!-- #docregion libraries -->
|
||||
<!-- #docregion ie-polyfills -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<!-- #enddocregion ie-polyfills -->
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
|
|
|
@ -22,12 +22,12 @@
|
|||
"@angular/upgrade": "2.0.0-rc.1",
|
||||
|
||||
"systemjs": "0.19.27",
|
||||
"es6-shim": "^0.35.0",
|
||||
"core-js": "^2.4.0",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.6",
|
||||
"zone.js": "^0.6.12",
|
||||
|
||||
"angular2-in-memory-web-api": "0.0.7",
|
||||
"angular2-in-memory-web-api": "0.0.9",
|
||||
"bootstrap": "^3.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// #docregion
|
||||
/**
|
||||
* System configuration for Angular 2 samples
|
||||
* Adjust as necessary for your application needs.
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"ambientDependencies": {
|
||||
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
|
||||
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
|
||||
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
|
||||
"node": "registry:dt/node#4.0.0+20160509154515"
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import "package:angular2/core.dart" show Component;
|
||||
|
||||
import "toh/hero_list_component.dart" show HeroListComponent;
|
||||
import "wiki/wiki_component.dart" show WikiComponent;
|
||||
import "wiki/wiki_smart_component.dart" show WikiSmartComponent;
|
||||
|
||||
@Component(
|
||||
selector: "my-app",
|
||||
template: '''
|
||||
<hero-list></hero-list>
|
||||
<my-wiki></my-wiki>
|
||||
<my-wiki-smart></my-wiki-smart>
|
||||
''',
|
||||
// #enddocregion
|
||||
/*
|
||||
// #docregion http-providers
|
||||
providers: const [
|
||||
// in-memory web api provider
|
||||
const Provider(BrowserClient,
|
||||
useFactory: HttpClientBackendServiceFactory, deps: const [])],
|
||||
// #enddocregion http-providers
|
||||
*/
|
||||
// #docregion
|
||||
directives: const [
|
||||
HeroListComponent,
|
||||
WikiComponent,
|
||||
WikiSmartComponent
|
||||
])
|
||||
class AppComponent {}
|
|
@ -2,7 +2,7 @@
|
|||
import 'package:http/browser_client.dart';
|
||||
import 'package:http_in_memory_web_api/http_in_memory_web_api.dart';
|
||||
|
||||
CreateDb createDb = () => {
|
||||
CreateDb _createDb = () => {
|
||||
'heroes': [
|
||||
{"id": "1", "name": "Windstorm"},
|
||||
{"id": "2", "name": "Bombasto"},
|
||||
|
@ -12,4 +12,4 @@ CreateDb createDb = () => {
|
|||
};
|
||||
|
||||
BrowserClient HttpClientBackendServiceFactory() =>
|
||||
new HttpClientInMemoryBackendService(createDb);
|
||||
new HttpClientInMemoryBackendService(_createDb);
|
||||
|
|
|
@ -9,7 +9,7 @@ import 'hero_service.dart';
|
|||
@Component(
|
||||
selector: 'hero-list',
|
||||
templateUrl: 'hero_list_component.html',
|
||||
styles: const ['.error {color:red;}'])
|
||||
providers: const [HeroService])
|
||||
// #docregion component
|
||||
class HeroListComponent implements OnInit {
|
||||
final HeroService _heroService;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<!-- #docregion -->
|
||||
<h1>Tour of Heroes</h1>
|
||||
<h3>Heroes:</h3>
|
||||
<ul>
|
||||
<li *ngFor="let hero of heroes">
|
||||
|
|
|
@ -15,7 +15,9 @@ class HeroService {
|
|||
// #enddocregion endpoint, http-get
|
||||
final BrowserClient _http;
|
||||
|
||||
// #docregion ctor
|
||||
HeroService(this._http);
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion methods, error-handling, http-get
|
||||
Future<List<Hero>> getHeroes() async {
|
||||
|
@ -57,6 +59,7 @@ class HeroService {
|
|||
|
||||
Exception _handleError(dynamic e) {
|
||||
// In a real world app, we might use a remote logging infrastructure
|
||||
// We'd also dig deeper into the error to get a better message
|
||||
print(e); // log to console instead
|
||||
return new Exception('Server error; cause: $e');
|
||||
}
|
||||
|
|
|
@ -1,36 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
import 'package:http/browser_client.dart';
|
||||
|
||||
import 'hero_list_component.dart';
|
||||
import 'hero_service.dart';
|
||||
// #enddocregion
|
||||
// #docregion in-mem-web-api
|
||||
/* ... */
|
||||
import 'package:server_communication/hero_data.dart';
|
||||
// #docregion
|
||||
|
||||
@Component(
|
||||
// #enddocregion in-mem-web-api
|
||||
selector: 'my-toh',
|
||||
// #docregion template
|
||||
template: '''
|
||||
<h1>Tour of Heroes</h1>
|
||||
<hero-list></hero-list>
|
||||
''',
|
||||
// #enddocregion template
|
||||
directives: const [HeroListComponent],
|
||||
// #enddocregion
|
||||
// #docregion in-mem-web-api
|
||||
/* ... */
|
||||
// #docregion
|
||||
providers: const [
|
||||
HeroService,
|
||||
// #enddocregion
|
||||
// in-memory web api providers
|
||||
const Provider(BrowserClient,
|
||||
useFactory: HttpClientBackendServiceFactory)
|
||||
// #docregion
|
||||
])
|
||||
class TohComponent {}
|
|
@ -12,11 +12,15 @@ dependencies:
|
|||
jsonpadding: ^0.1.0
|
||||
stream_transformers: ^0.3.0+3
|
||||
http_in_memory_web_api: ^0.0.1
|
||||
# #docregion transformers
|
||||
transformers:
|
||||
- angular2:
|
||||
platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
|
||||
platform_pipes: 'package:angular2/common.dart#COMMON_PIPES'
|
||||
platform_directives:
|
||||
- 'package:angular2/common.dart#CORE_DIRECTIVES'
|
||||
platform_pipes:
|
||||
- 'package:angular2/common.dart#COMMON_PIPES'
|
||||
entry_points: 'web/main.dart'
|
||||
resolved_identifiers:
|
||||
BrowserClient: 'package:http/browser_client.dart'
|
||||
- dart_to_js_script_rewriter
|
||||
# #enddocregion transformers
|
||||
|
|
|
@ -6,15 +6,14 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="sample.css">
|
||||
|
||||
<script defer src="main.dart" type="application/dart"></script>
|
||||
<script defer src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-toh>ToH Loading...</my-toh>
|
||||
<my-wiki>Wiki Loading...</my-wiki>
|
||||
<my-wiki-smart>WikiSmart Loading...</my-wiki-smart>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -1,12 +1,34 @@
|
|||
// #docregion
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
// #docplaster
|
||||
// #docregion final
|
||||
import 'package:angular2/core.dart' show Provider;
|
||||
// #docregion v1
|
||||
import 'package:angular2/platform/browser.dart' show bootstrap;
|
||||
// #docregion http-providers
|
||||
import 'package:http/browser_client.dart' show BrowserClient;
|
||||
// #enddocregion http-providers
|
||||
|
||||
import 'package:server_communication/toh/toh_component.dart';
|
||||
import 'package:server_communication/wiki/wiki_component.dart';
|
||||
import 'package:server_communication/wiki/wiki_smart_component.dart';
|
||||
import 'package:server_communication/app_component.dart';
|
||||
// #enddocregion v1
|
||||
// #docregion in-mem-web-api-imports
|
||||
import "package:server_communication/hero_data.dart";
|
||||
|
||||
main() {
|
||||
bootstrap(TohComponent);
|
||||
bootstrap(WikiComponent);
|
||||
bootstrap(WikiSmartComponent);
|
||||
// #enddocregion in-mem-web-api-imports
|
||||
// #docregion in-mem-web-api-providers
|
||||
void main() {
|
||||
bootstrap(AppComponent, const [
|
||||
// in-memory web api provider
|
||||
const Provider(BrowserClient,
|
||||
useFactory: HttpClientBackendServiceFactory, deps: const [])
|
||||
// TODO: drop `deps` once fix lands for
|
||||
// https://github.com/angular/angular/issues/5266
|
||||
]);
|
||||
}
|
||||
// #enddocregion final, in-mem-web-api-providers
|
||||
/*
|
||||
// #docregion v1
|
||||
|
||||
void main() {
|
||||
bootstrap(AppComponent, const [BrowserClient]);
|
||||
}
|
||||
// #enddocregion v1
|
||||
*/
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
.error {color:red;}
|
|
@ -4,69 +4,62 @@ describe('Server Communication', function () {
|
|||
browser.get('');
|
||||
});
|
||||
|
||||
describe('Tour of Heroes e2e tests', function () {
|
||||
|
||||
var _initialHeroCount = 4;
|
||||
var _newHeroName = 'Mr. IQ';
|
||||
var _heroCountAfterAdd = 5;
|
||||
|
||||
it('should display ' + _initialHeroCount + ' heroes after init', function () {
|
||||
var myTohComp = element(by.tagName('my-toh'));
|
||||
expect(myTohComp).toBeDefined('<my-toh> must exist');
|
||||
var heroListComp = myTohComp.element(by.tagName('hero-list'));
|
||||
describe('Tour of Heroes (Observable)', function () {
|
||||
|
||||
var initialHeroCount = 4;
|
||||
var newHeroName = 'Mr. IQ';
|
||||
var heroCountAfterAdd = 5;
|
||||
|
||||
var heroListComp = element(by.tagName('hero-list'));
|
||||
var addButton = heroListComp.element(by.tagName('button'));
|
||||
var heroTags = heroListComp.all(by.tagName('li'));
|
||||
var heroNameInput = heroListComp.element(by.tagName('input'));
|
||||
|
||||
it('should exist', function() {
|
||||
expect(heroListComp).toBeDefined('<hero-list> must exist');
|
||||
var heroTags = heroListComp.all(by.tagName('li'));
|
||||
expect(heroTags.count()).toBe(_initialHeroCount);
|
||||
});
|
||||
|
||||
|
||||
it('should display ' + initialHeroCount + ' heroes after init', function () {
|
||||
expect(heroTags.count()).toBe(initialHeroCount);
|
||||
});
|
||||
|
||||
it('should not add hero with empty name', function () {
|
||||
var myTohComp = element(by.tagName('my-toh'));
|
||||
expect(myTohComp).toBeDefined('<my-toh> must exist');
|
||||
var addButton = myTohComp.element(by.tagName('button'));
|
||||
expect(addButton).toBeDefined('"Add Hero" button must be defined');
|
||||
addButton.click().then(function() {
|
||||
var heroListComp = myTohComp.element(by.tagName('hero-list'));
|
||||
var heroTags = heroListComp.all(by.tagName('li'));
|
||||
expect(heroTags.count()).toBe(_initialHeroCount, 'No new hero should be added');
|
||||
expect(heroTags.count()).toBe(initialHeroCount, 'No new hero should be added');
|
||||
});
|
||||
})
|
||||
|
||||
it('should add a new hero to the list', function () {
|
||||
var myTohComp = element(by.tagName('my-toh'));
|
||||
expect(myTohComp).toBeDefined('<my-toh> must exist');
|
||||
var heroNameInput = myTohComp.element(by.tagName('input'));
|
||||
expect(heroNameInput).toBeDefined('<input> for hero name must exist');
|
||||
var addButton = myTohComp.element(by.tagName('button'));
|
||||
expect(addButton).toBeDefined('"Add Hero" button must be defined');
|
||||
sendKeys(heroNameInput, _newHeroName);
|
||||
sendKeys(heroNameInput, newHeroName);
|
||||
addButton.click().then(function() {
|
||||
var heroListComp = myTohComp.element(by.tagName('hero-list'));
|
||||
var heroTags = heroListComp.all(by.tagName('li'));
|
||||
expect(heroTags.count()).toBe(_heroCountAfterAdd, 'A new hero should be added');
|
||||
var newHeroInList = heroTags.get(_heroCountAfterAdd - 1).getText();
|
||||
expect(newHeroInList).toBe(_newHeroName, 'The hero should be added to the end of the list');
|
||||
expect(heroTags.count()).toBe(heroCountAfterAdd, 'A new hero should be added');
|
||||
var newHeroInList = heroTags.get(heroCountAfterAdd - 1).getText();
|
||||
expect(newHeroInList).toBe(newHeroName, 'The hero should be added to the end of the list');
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
describe('Wikipedia Demo e2e tests', function () {
|
||||
|
||||
|
||||
describe('Wikipedia Demo', function () {
|
||||
|
||||
it('should initialize the demo with empty result list', function () {
|
||||
var myWikiComp = element(by.tagName('my-wiki'));
|
||||
expect(myWikiComp).toBeDefined('<my-wiki> must exist');
|
||||
var resultList = myWikiComp.all(by.tagName('li'));
|
||||
expect(resultList.count()).toBe(0, 'result list must be empty');
|
||||
});
|
||||
|
||||
|
||||
describe('Fetches after each keystroke', function () {
|
||||
it('should fetch results after "B"', function(done) {
|
||||
testForRefreshedResult('B', done);
|
||||
});
|
||||
|
||||
|
||||
it('should fetch results after "Ba"', function(done) {
|
||||
testForRefreshedResult('a', done);
|
||||
});
|
||||
|
||||
|
||||
it('should fetch results after "Bas"', function(done) {
|
||||
testForRefreshedResult('s', done);
|
||||
});
|
||||
|
@ -75,13 +68,13 @@ describe('Server Communication', function () {
|
|||
testForRefreshedResult('ic', done);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function testForRefreshedResult(keyPressed, done) {
|
||||
testForResult('my-wiki', keyPressed, false, done)
|
||||
}
|
||||
});
|
||||
|
||||
describe('Smarter Wikipedia Demo e2e tests', function () {
|
||||
|
||||
describe('Smarter Wikipedia Demo', function () {
|
||||
|
||||
it('should initialize the demo with empty result list', function () {
|
||||
var myWikiSmartComp = element(by.tagName('my-wiki-smart'));
|
||||
|
@ -93,40 +86,40 @@ describe('Server Communication', function () {
|
|||
it('should fetch results after "Java"', function(done) {
|
||||
testForNewResult('Java', done);
|
||||
});
|
||||
|
||||
|
||||
it('should fetch results after "JavaS"', function(done) {
|
||||
testForStaleResult('S', done);
|
||||
});
|
||||
|
||||
|
||||
it('should fetch results after "JavaSc"', function(done) {
|
||||
testForStaleResult('c', done);
|
||||
});
|
||||
|
||||
|
||||
it('should fetch results after "JavaScript"', function(done) {
|
||||
testForStaleResult('ript', done);
|
||||
});
|
||||
|
||||
|
||||
|
||||
function testForNewResult(keyPressed, done) {
|
||||
testForResult('my-wiki-smart', keyPressed, false, done)
|
||||
}
|
||||
|
||||
function testForStaleResult(keyPressed, done) {
|
||||
testForResult('my-wiki-smart', keyPressed, true, done)
|
||||
testForResult('my-wiki-smart', keyPressed, true, done)
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
function testForResult(componentTagName, keyPressed, hasListBeforeSearch, done) {
|
||||
var searchWait = 1000; // Wait for wikipedia but not so long that tests timeout
|
||||
var wikiComponent = element(by.tagName(componentTagName));
|
||||
expect(wikiComponent).toBeDefined('<' + componentTagName + '> must exist');
|
||||
var searchBox = wikiComponent.element(by.tagName('input'));
|
||||
expect(searchBox).toBeDefined('<input> for search must exist');
|
||||
|
||||
|
||||
searchBox.sendKeys(keyPressed).then(function () {
|
||||
var resultList = wikiComponent.all(by.tagName('li'));
|
||||
|
||||
|
||||
if (hasListBeforeSearch) {
|
||||
expect(resultList.count()).toBeGreaterThan(0, 'result list should not be empty before search');
|
||||
}
|
||||
|
@ -137,5 +130,5 @@ describe('Server Communication', function () {
|
|||
}, searchWait);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
|
|
@ -1,9 +0,0 @@
|
|||
// #docregion
|
||||
// import 'rxjs/Rx'; // adds ALL RxJS operators to Observable
|
||||
|
||||
// Just the Observable operators we need for THIS app.
|
||||
import 'rxjs/add/operator/catch';
|
||||
import 'rxjs/add/operator/debounceTime';
|
||||
import 'rxjs/add/operator/distinctUntilChanged';
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/switchMap';
|
|
@ -0,0 +1,37 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
// #docregion import-rxjs
|
||||
// Add the RxJS Observable operators we need in this app.
|
||||
import './rxjs-operators';
|
||||
// #enddocregion import-rxjs
|
||||
|
||||
import { HeroListComponent } from './toh/hero-list.component';
|
||||
import { HeroListPromiseComponent } from './toh/hero-list.component.promise';
|
||||
|
||||
import { WikiComponent } from './wiki/wiki.component';
|
||||
import { WikiSmartComponent } from './wiki/wiki-smart.component';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: `
|
||||
<hero-list></hero-list>
|
||||
<hero-list-promise></hero-list-promise>
|
||||
<my-wiki></my-wiki>
|
||||
<my-wiki-smart></my-wiki-smart>
|
||||
`,
|
||||
// #enddocregion
|
||||
/*
|
||||
// #docregion http-providers
|
||||
providers: [ HTTP_PROVIDERS ]
|
||||
// #enddocregion http-providers
|
||||
*/
|
||||
// #docregion
|
||||
directives: [
|
||||
HeroListComponent, HeroListPromiseComponent,
|
||||
WikiComponent, WikiSmartComponent
|
||||
]
|
||||
})
|
||||
export class AppComponent { }
|
||||
// #enddocregion
|
|
@ -1,21 +1,30 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion final
|
||||
// Imports for loading & configuring the in-memory web api
|
||||
import { provide } from '@angular/core';
|
||||
import { XHRBackend } from '@angular/http';
|
||||
|
||||
import { InMemoryBackendService,
|
||||
SEED_DATA } from 'angular2-in-memory-web-api/core';
|
||||
import { HeroData } from './hero-data';
|
||||
|
||||
// The usual bootstrapping imports
|
||||
// #docregion v1
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
// #docregion http-providers
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
// #enddocregion http-providers
|
||||
|
||||
// #docregion import-rxjs
|
||||
// Add the RxJS Observable operators we need in this app.
|
||||
import './add-rxjs-operators';
|
||||
// #enddocregion import-rxjs
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
import { TohComponent } from './toh/toh.component';
|
||||
import { WikiComponent } from './wiki/wiki.component';
|
||||
import { WikiSmartComponent } from './wiki/wiki-smart.component';
|
||||
|
||||
// #docregion http-providers
|
||||
bootstrap(TohComponent, [HTTP_PROVIDERS]);
|
||||
// #enddocregion http-providers
|
||||
bootstrap(WikiComponent);
|
||||
bootstrap(WikiSmartComponent);
|
||||
// #enddocregion v1, final
|
||||
/*
|
||||
// #docregion v1
|
||||
bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
|
||||
// #enddocregion v1
|
||||
*/
|
||||
// #docregion final
|
||||
bootstrap(AppComponent, [
|
||||
HTTP_PROVIDERS,
|
||||
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
|
||||
provide(SEED_DATA, { useClass: HeroData }) // in-mem server data
|
||||
]);
|
||||
// #enddocregion final
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
// #docregion
|
||||
// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable
|
||||
|
||||
// See node_module/rxjs/Rxjs.js
|
||||
// Import just the rxjs statics and operators we need for THIS app.
|
||||
|
||||
// Statics
|
||||
import 'rxjs/add/observable/throw';
|
||||
|
||||
// Operators
|
||||
import 'rxjs/add/operator/catch';
|
||||
import 'rxjs/add/operator/debounceTime';
|
||||
import 'rxjs/add/operator/distinctUntilChanged';
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
import 'rxjs/add/operator/toPromise';
|
|
@ -1,4 +1,5 @@
|
|||
<!-- #docregion -->
|
||||
<h1>Tour of Heroes ({{mode}})</h1>
|
||||
<h3>Heroes:</h3>
|
||||
<ul>
|
||||
<li *ngFor="let hero of heroes">
|
||||
|
|
|
@ -1,21 +1,22 @@
|
|||
// ToH Promise Version
|
||||
// #docregion
|
||||
// Promise Version
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service.1';
|
||||
import { HeroService } from './hero.service.promise';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list',
|
||||
selector: 'hero-list-promise',
|
||||
templateUrl: 'app/toh/hero-list.component.html',
|
||||
styles: ['.error {color:red;}']
|
||||
providers: [ HeroService ]
|
||||
})
|
||||
// #docregion component
|
||||
export class HeroListComponent implements OnInit {
|
||||
export class HeroListPromiseComponent implements OnInit {
|
||||
|
||||
constructor (private heroService: HeroService) {}
|
||||
|
||||
errorMessage: string;
|
||||
heroes: Hero[];
|
||||
mode = 'Promise';
|
||||
|
||||
ngOnInit() { this.getHeroes(); }
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
// #docregion
|
||||
// Observable Version
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list',
|
||||
templateUrl: 'app/toh/hero-list.component.html',
|
||||
styles: ['.error {color:red;}']
|
||||
providers: [ HeroService ]
|
||||
})
|
||||
// #docregion component
|
||||
export class HeroListComponent implements OnInit {
|
||||
|
@ -15,7 +15,8 @@ export class HeroListComponent implements OnInit {
|
|||
constructor (private heroService: HeroService) {}
|
||||
|
||||
errorMessage: string;
|
||||
heroes:Hero[];
|
||||
heroes: Hero[];
|
||||
mode = 'Observable';
|
||||
|
||||
ngOnInit() { this.getHeroes(); }
|
||||
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
// ToH Promise Version
|
||||
// #docplaster
|
||||
|
||||
// #docregion
|
||||
// Promise Version
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http, Response } from '@angular/http';
|
||||
import { Headers, RequestOptions } from '@angular/http';
|
||||
|
@ -41,7 +40,8 @@ export class HeroService {
|
|||
private handleError (error: any) {
|
||||
// In a real world app, we might use a remote logging infrastructure
|
||||
// We'd also dig deeper into the error to get a better message
|
||||
let errMsg = error.message || error.statusText || 'Server error';
|
||||
let errMsg = (error.message) ? error.message :
|
||||
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
|
||||
console.error(errMsg); // log to console instead
|
||||
return Promise.reject(errMsg);
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
// Observable Version
|
||||
// #docregion v1
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http, Response } from '@angular/http';
|
||||
|
@ -14,7 +15,9 @@ import { Observable } from 'rxjs/Observable';
|
|||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
// #docregion ctor
|
||||
constructor (private http: Http) {}
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion endpoint
|
||||
private heroesUrl = 'app/heroes'; // URL to web API
|
||||
|
@ -52,7 +55,8 @@ export class HeroService {
|
|||
private handleError (error: any) {
|
||||
// In a real world app, we might use a remote logging infrastructure
|
||||
// We'd also dig deeper into the error to get a better message
|
||||
let errMsg = error.message || error.statusText || 'Server error';
|
||||
let errMsg = (error.message) ? error.message :
|
||||
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
|
||||
console.error(errMsg); // log to console instead
|
||||
return Observable.throw(errMsg);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
export class Hero {
|
||||
constructor(
|
||||
public id:number,
|
||||
public name:string) { }
|
||||
public id: number,
|
||||
public name: string) { }
|
||||
}
|
||||
|
|
|
@ -1,43 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { HeroService } from './hero.service';
|
||||
// #enddocregion
|
||||
|
||||
// #docregion in-mem-web-api-imports
|
||||
import { provide } from '@angular/core';
|
||||
import { XHRBackend } from '@angular/http';
|
||||
|
||||
// in-memory web api imports
|
||||
import { InMemoryBackendService,
|
||||
SEED_DATA } from 'angular2-in-memory-web-api/core';
|
||||
import { HeroData } from '../hero-data';
|
||||
// #enddocregion in-mem-web-api-imports
|
||||
// #docregion
|
||||
|
||||
@Component({
|
||||
selector: 'my-toh',
|
||||
// #docregion template
|
||||
template: `
|
||||
<h1>Tour of Heroes</h1>
|
||||
<hero-list></hero-list>
|
||||
`,
|
||||
// #enddocregion template
|
||||
directives: [HeroListComponent],
|
||||
providers: [
|
||||
HTTP_PROVIDERS,
|
||||
HeroService,
|
||||
// #enddocregion
|
||||
// #docregion in-mem-web-api-providers
|
||||
// in-memory web api providers
|
||||
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
|
||||
provide(SEED_DATA, { useClass: HeroData }) // in-mem server data
|
||||
// #enddocregion in-mem-web-api-providers
|
||||
// #docregion
|
||||
]
|
||||
})
|
||||
export class TohComponent { }
|
||||
// #enddocregion
|
|
@ -6,9 +6,11 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="sample.css">
|
||||
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
@ -21,9 +23,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<my-toh>ToH Loading...</my-toh>
|
||||
<my-wiki>Wiki Loading...</my-wiki>
|
||||
<my-wiki-smart>WikiSmart Loading...</my-wiki-smart>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
.error {color:red;}
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -11,8 +11,7 @@
|
|||
"dependencies": {
|
||||
"angular2": "2.0.0-beta.0",
|
||||
"systemjs": "0.19.6",
|
||||
"es6-promise": "^3.0.2",
|
||||
"es6-shim": "^0.35.0",
|
||||
"core-js": "^2.4.0",
|
||||
"reflect-metadata": "0.1.2",
|
||||
"rxjs": "5.0.0-beta.0",
|
||||
"zone.js": "0.5.10"
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="template-syntax.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<!-- NOT CONVERTED YET -->
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -98,16 +98,16 @@ class AppComponent {
|
|||
|
||||
// #docregion hero-array
|
||||
final List<Hero> mockHeroes = [
|
||||
new Hero(11, "Mr. Nice"),
|
||||
new Hero(12, "Narco"),
|
||||
new Hero(13, "Bombasto"),
|
||||
new Hero(14, "Celeritas"),
|
||||
new Hero(15, "Magneta"),
|
||||
new Hero(16, "RubberMan"),
|
||||
new Hero(17, "Dynama"),
|
||||
new Hero(18, "Dr IQ"),
|
||||
new Hero(19, "Magma"),
|
||||
new Hero(20, "Tornado")
|
||||
new Hero(11, 'Mr. Nice'),
|
||||
new Hero(12, 'Narco'),
|
||||
new Hero(13, 'Bombasto'),
|
||||
new Hero(14, 'Celeritas'),
|
||||
new Hero(15, 'Magneta'),
|
||||
new Hero(16, 'RubberMan'),
|
||||
new Hero(17, 'Dynama'),
|
||||
new Hero(18, 'Dr IQ'),
|
||||
new Hero(19, 'Magma'),
|
||||
new Hero(20, 'Tornado')
|
||||
];
|
||||
// #enddocregion hero-array
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -89,14 +89,14 @@ class AppComponent {
|
|||
}
|
||||
|
||||
final List<Hero> mockHeroes = [
|
||||
new Hero(11, "Mr. Nice"),
|
||||
new Hero(12, "Narco"),
|
||||
new Hero(13, "Bombasto"),
|
||||
new Hero(14, "Celeritas"),
|
||||
new Hero(15, "Magneta"),
|
||||
new Hero(16, "RubberMan"),
|
||||
new Hero(17, "Dynama"),
|
||||
new Hero(18, "Dr IQ"),
|
||||
new Hero(19, "Magma"),
|
||||
new Hero(20, "Tornado")
|
||||
new Hero(11, 'Mr. Nice'),
|
||||
new Hero(12, 'Narco'),
|
||||
new Hero(13, 'Bombasto'),
|
||||
new Hero(14, 'Celeritas'),
|
||||
new Hero(15, 'Magneta'),
|
||||
new Hero(16, 'RubberMan'),
|
||||
new Hero(17, 'Dynama'),
|
||||
new Hero(18, 'Dr IQ'),
|
||||
new Hero(19, 'Magma'),
|
||||
new Hero(20, 'Tornado')
|
||||
];
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
|
|
|
@ -2,15 +2,15 @@
|
|||
import 'hero.dart';
|
||||
|
||||
final List<Hero> mockHeroes = [
|
||||
new Hero(11, "Mr. Nice"),
|
||||
new Hero(12, "Narco"),
|
||||
new Hero(13, "Bombasto"),
|
||||
new Hero(14, "Celeritas"),
|
||||
new Hero(15, "Magneta"),
|
||||
new Hero(16, "RubberMan"),
|
||||
new Hero(17, "Dynama"),
|
||||
new Hero(18, "Dr IQ"),
|
||||
new Hero(19, "Magma"),
|
||||
new Hero(20, "Tornado")
|
||||
new Hero(11, 'Mr. Nice'),
|
||||
new Hero(12, 'Narco'),
|
||||
new Hero(13, 'Bombasto'),
|
||||
new Hero(14, 'Celeritas'),
|
||||
new Hero(15, 'Magneta'),
|
||||
new Hero(16, 'RubberMan'),
|
||||
new Hero(17, 'Dynama'),
|
||||
new Hero(18, 'Dr IQ'),
|
||||
new Hero(19, 'Magma'),
|
||||
new Hero(20, 'Tornado')
|
||||
];
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
|
@ -23,8 +23,8 @@ import { HeroService } from './hero.service';
|
|||
</ul>
|
||||
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
|
||||
`,
|
||||
// #enddocregion template
|
||||
styles:[`
|
||||
// #enddocregion template
|
||||
styles: [`
|
||||
.selected {
|
||||
background-color: #CFD8DC !important;
|
||||
color: white;
|
||||
|
|
|
@ -2,15 +2,15 @@
|
|||
import { Hero } from './hero';
|
||||
|
||||
export var HEROES: Hero[] = [
|
||||
{"id": 11, "name": "Mr. Nice"},
|
||||
{"id": 12, "name": "Narco"},
|
||||
{"id": 13, "name": "Bombasto"},
|
||||
{"id": 14, "name": "Celeritas"},
|
||||
{"id": 15, "name": "Magneta"},
|
||||
{"id": 16, "name": "RubberMan"},
|
||||
{"id": 17, "name": "Dynama"},
|
||||
{"id": 18, "name": "Dr IQ"},
|
||||
{"id": 19, "name": "Magma"},
|
||||
{"id": 20, "name": "Tornado"}
|
||||
{id: 11, name: 'Mr. Nice'},
|
||||
{id: 12, name: 'Narco'},
|
||||
{id: 13, name: 'Bombasto'},
|
||||
{id: 14, name: 'Celeritas'},
|
||||
{id: 15, name: 'Magneta'},
|
||||
{id: 16, name: 'RubberMan'},
|
||||
{id: 17, name: 'Dynama'},
|
||||
{id: 18, name: 'Dr IQ'},
|
||||
{id: 19, name: 'Magma'},
|
||||
{id: 20, name: 'Tornado'}
|
||||
];
|
||||
// #enddocregion
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
import 'hero.dart';
|
||||
|
||||
final List<Hero> HEROES = [
|
||||
new Hero(11, "Mr. Nice"),
|
||||
new Hero(12, "Narco"),
|
||||
new Hero(13, "Bombasto"),
|
||||
new Hero(14, "Celeritas"),
|
||||
new Hero(15, "Magneta"),
|
||||
new Hero(16, "RubberMan"),
|
||||
new Hero(17, "Dynama"),
|
||||
new Hero(18, "Dr IQ"),
|
||||
new Hero(19, "Magma"),
|
||||
new Hero(20, "Tornado")
|
||||
];
|
||||
new Hero(11, 'Mr. Nice'),
|
||||
new Hero(12, 'Narco'),
|
||||
new Hero(13, 'Bombasto'),
|
||||
new Hero(14, 'Celeritas'),
|
||||
new Hero(15, 'Magneta'),
|
||||
new Hero(16, 'RubberMan'),
|
||||
new Hero(17, 'Dynama'),
|
||||
new Hero(18, 'Dr IQ'),
|
||||
new Hero(19, 'Magma'),
|
||||
new Hero(20, 'Tornado')
|
||||
];
|
||||
|
|
|
@ -3,12 +3,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { HeroesComponent } from './heroes.component';
|
||||
// #docregion hero-detail-import
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
// #enddocregion hero-detail-import
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
|
|
@ -4,7 +4,6 @@ import { Component, OnInit } from '@angular/core';
|
|||
import { Router } from '@angular/router-deprecated';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
// #docregion metadata
|
||||
|
@ -13,8 +12,7 @@ import { HeroService } from './hero.service';
|
|||
selector: 'my-heroes',
|
||||
// #enddocregion heroes-component-renaming
|
||||
templateUrl: 'app/heroes.component.html',
|
||||
styleUrls: ['app/heroes.component.css'],
|
||||
directives: [HeroDetailComponent]
|
||||
styleUrls: ['app/heroes.component.css']
|
||||
// #docregion heroes-component-renaming
|
||||
})
|
||||
// #enddocregion heroes-component-renaming
|
||||
|
|
|
@ -2,15 +2,15 @@
|
|||
import { Hero } from './hero';
|
||||
|
||||
export var HEROES: Hero[] = [
|
||||
{"id": 11, "name": "Mr. Nice"},
|
||||
{"id": 12, "name": "Narco"},
|
||||
{"id": 13, "name": "Bombasto"},
|
||||
{"id": 14, "name": "Celeritas"},
|
||||
{"id": 15, "name": "Magneta"},
|
||||
{"id": 16, "name": "RubberMan"},
|
||||
{"id": 17, "name": "Dynama"},
|
||||
{"id": 18, "name": "Dr IQ"},
|
||||
{"id": 19, "name": "Magma"},
|
||||
{"id": 20, "name": "Tornado"}
|
||||
{id: 11, name: 'Mr. Nice'},
|
||||
{id: 12, name: 'Narco'},
|
||||
{id: 13, name: 'Bombasto'},
|
||||
{id: 14, name: 'Celeritas'},
|
||||
{id: 15, name: 'Magneta'},
|
||||
{id: 16, name: 'RubberMan'},
|
||||
{id: 17, name: 'Dynama'},
|
||||
{id: 18, name: 'Dr IQ'},
|
||||
{id: 19, name: 'Magma'},
|
||||
{id: 20, name: 'Tornado'}
|
||||
];
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
<!-- #enddocregion css -->
|
||||
<!-- #docregion head -->
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
|
|
|
@ -1,10 +1,9 @@
|
|||
describe('Tutorial', function () {
|
||||
describe('TOH Http Chapter', function () {
|
||||
|
||||
beforeAll(function () {
|
||||
beforeEach(function () {
|
||||
browser.get('');
|
||||
});
|
||||
|
||||
|
||||
function getPageStruct() {
|
||||
hrefEles = element.all(by.css('my-app a'));
|
||||
|
||||
|
@ -16,12 +15,122 @@ describe('Tutorial', function () {
|
|||
|
||||
myHeroesHref: hrefEles.get(1),
|
||||
myHeroesParent: element(by.css('my-app my-heroes')),
|
||||
allHeroes: element.all(by.css('my-app my-heroes li')),
|
||||
allHeroes: element.all(by.css('my-app my-heroes li .hero-element')),
|
||||
|
||||
firstDeleteButton: element.all(by.buttonText('Delete')).get(0),
|
||||
|
||||
addButton: element.all(by.buttonText('Add New Hero')).get(0),
|
||||
|
||||
heroDetail: element(by.css('my-app my-hero-detail'))
|
||||
}
|
||||
}
|
||||
|
||||
it('should be able to add a hero from the "Heroes" view', function(){
|
||||
var page = getPageStruct();
|
||||
var heroCount;
|
||||
|
||||
page.myHeroesHref.click().then(function() {
|
||||
browser.waitForAngular();
|
||||
heroCount = page.allHeroes.count();
|
||||
expect(heroCount).toBe(10, 'should show 10');
|
||||
}).then(function() {
|
||||
return page.addButton.click();
|
||||
}).then(function(){
|
||||
return save(page,'','The New Hero');
|
||||
}).then(function(){
|
||||
browser.waitForAngular();
|
||||
|
||||
heroCount = page.allHeroes.count();
|
||||
expect(heroCount).toBe(11, 'should show 11');
|
||||
|
||||
var newHero = element(by.xpath('//span[@class="hero-element" and contains(text(),"The New Hero")]'));
|
||||
expect(newHero).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to delete hero from "Heroes" view', function(){
|
||||
var page = getPageStruct();
|
||||
var heroCount;
|
||||
|
||||
page.myHeroesHref.click().then(function() {
|
||||
browser.waitForAngular();
|
||||
heroCount = page.allHeroes.count();
|
||||
expect(heroCount).toBe(10, 'should show 10');
|
||||
}).then(function() {
|
||||
return page.firstDeleteButton.click();
|
||||
}).then(function(){
|
||||
browser.waitForAngular();
|
||||
heroCount = page.allHeroes.count();
|
||||
expect(heroCount).toBe(9, 'should show 9');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to save details from "Dashboard" view', function () {
|
||||
var page = getPageStruct();
|
||||
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
|
||||
var heroEle = page.topHeroes.get(2);
|
||||
var heroDescrEle = heroEle.element(by.css('h4'));
|
||||
var heroDescr;
|
||||
|
||||
return heroDescrEle.getText().then(function(text) {
|
||||
heroDescr = text;
|
||||
return heroEle.click();
|
||||
}).then(function() {
|
||||
return save(page, heroDescr, '-foo');
|
||||
})
|
||||
.then(function(){
|
||||
return page.myDashboardHref.click();
|
||||
})
|
||||
.then(function() {
|
||||
expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
|
||||
expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to save details from "Heroes" view', function () {
|
||||
var page = getPageStruct();
|
||||
|
||||
var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
|
||||
var heroEle, heroDescr;
|
||||
|
||||
page.myHeroesHref.click().then(function() {
|
||||
expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
|
||||
expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
|
||||
expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
|
||||
heroEle = page.allHeroes.get(0);
|
||||
return heroEle.getText();
|
||||
}).then(function(text) {
|
||||
// remove leading 'id' from the element
|
||||
heroDescr = text.substr(text.indexOf(' ')+1);
|
||||
return heroEle.click();
|
||||
}).then(function() {
|
||||
expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
|
||||
return viewDetailsButtonEle.click();
|
||||
}).then(function() {
|
||||
return save(page, heroDescr, '-bar');
|
||||
})
|
||||
.then(function(){
|
||||
return page.myHeroesHref.click();
|
||||
})
|
||||
.then(function() {
|
||||
expect(heroEle.getText()).toContain(heroDescr + '-bar');
|
||||
});
|
||||
});
|
||||
|
||||
function save(page, origValue, textToAdd) {
|
||||
var inputEle = page.heroDetail.element(by.css('input'));
|
||||
expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
|
||||
var saveButtonEle = page.heroDetail.element(by.buttonText('Save'));
|
||||
var backButtonEle = page.heroDetail.element(by.buttonText('Back'));
|
||||
expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
|
||||
var detailTextEle = page.heroDetail.element(by.css('div h2'));
|
||||
expect(detailTextEle.getText()).toContain(origValue);
|
||||
return sendKeys(inputEle, textToAdd).then(function () {
|
||||
expect(detailTextEle.getText()).toContain(origValue + textToAdd);
|
||||
return saveButtonEle.click();
|
||||
});
|
||||
}
|
||||
|
||||
it('should be able to see the start screen', function () {
|
||||
var page = getPageStruct();
|
||||
expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
|
||||
|
@ -98,13 +207,16 @@ describe('Tutorial', function () {
|
|||
expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
|
||||
var inputEle = page.heroDetail.element(by.css('input'));
|
||||
expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
|
||||
var backButtonEle = page.heroDetail.element(by.css('button'));
|
||||
var buttons = page.heroDetail.all(by.css('button'));
|
||||
var backButtonEle = buttons.get(0);
|
||||
var saveButtonEle = buttons.get(1);
|
||||
expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
|
||||
expect(saveButtonEle.isDisplayed()).toBe(true, 'should be able to see the save button');
|
||||
var detailTextEle = page.heroDetail.element(by.css('div h2'));
|
||||
expect(detailTextEle.getText()).toContain(origValue);
|
||||
return sendKeys(inputEle, textToAdd).then(function () {
|
||||
expect(detailTextEle.getText()).toContain(origValue + textToAdd);
|
||||
return backButtonEle.click();
|
||||
return saveButtonEle.click();
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
**/*.js
|
|
@ -1,3 +1,15 @@
|
|||
/* #docplaster */
|
||||
/* #docregion css */
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
color: #999;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
nav a {
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
|
@ -16,13 +28,4 @@ nav a:hover {
|
|||
nav a.router-link-active {
|
||||
color: #039be5;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
color: #999;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
/* #enddocregion css */
|
|
@ -0,0 +1,36 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { HeroesComponent } from './heroes.component';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
||||
template: `
|
||||
<h1>{{title}}</h1>
|
||||
<nav>
|
||||
<a [routerLink]="['Dashboard']">Dashboard</a>
|
||||
<a [routerLink]="['Heroes']">Heroes</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
`,
|
||||
styleUrls: ['app/app.component.css'],
|
||||
directives: [ROUTER_DIRECTIVES],
|
||||
providers: [
|
||||
ROUTER_PROVIDERS,
|
||||
HeroService,
|
||||
]
|
||||
})
|
||||
@RouteConfig([
|
||||
{ path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
|
||||
{ path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent },
|
||||
{ path: '/heroes', name: 'Heroes', component: HeroesComponent }
|
||||
])
|
||||
export class AppComponent {
|
||||
title = 'Tour of Heroes';
|
||||
}
|
|
@ -1,3 +1,5 @@
|
|||
/* #docplaster */
|
||||
/* #docregion */
|
||||
[class*='col-'] {
|
||||
float: left;
|
||||
}
|
||||
|
@ -58,3 +60,4 @@ h4 {
|
|||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
/* #enddocregion */
|
|
@ -0,0 +1,11 @@
|
|||
<!-- #docregion -->
|
||||
<h3>Top Heroes</h3>
|
||||
<div class="grid grid-pad">
|
||||
<!-- #docregion click -->
|
||||
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
|
||||
<!-- #enddocregion click -->
|
||||
<div class="module hero">
|
||||
<h4>{{hero.name}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -1,7 +1,9 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router-deprecated';
|
||||
import { Router } from '@angular/router-deprecated';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
|
@ -10,12 +12,17 @@ import { HeroService } from './hero.service';
|
|||
styleUrls: ['app/dashboard.component.css']
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
heroes: Hero[] = [];
|
||||
|
||||
constructor(private heroService: HeroService, private _router: Router) { }
|
||||
constructor(
|
||||
private _router: Router,
|
||||
private _heroService: HeroService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));
|
||||
this._heroService.getHeroes()
|
||||
.then(heroes => this.heroes = heroes.slice(1,5));
|
||||
}
|
||||
|
||||
gotoDetail(hero: Hero) {
|
|
@ -1,3 +1,4 @@
|
|||
/* #docregion */
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 3em;
|
|
@ -0,0 +1,13 @@
|
|||
<!-- #docplaster -->
|
||||
<!-- #docregion -->
|
||||
<div *ngIf="hero">
|
||||
<h2>{{hero.name}} details!</h2>
|
||||
<div>
|
||||
<label>id: </label>{{hero.id}}</div>
|
||||
<div>
|
||||
<label>name: </label>
|
||||
<input [(ngModel)]="hero.name" placeholder="name" />
|
||||
</div>
|
||||
<button (click)="goBack()">Back</button>
|
||||
<button (click)="save()">Save</button>
|
||||
</div>
|
|
@ -0,0 +1,53 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
|
||||
import { RouteParams } from '@angular/router-deprecated';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
@Component({
|
||||
selector: 'my-hero-detail',
|
||||
templateUrl: 'app/hero-detail.component.html',
|
||||
styleUrls: ['app/hero-detail.component.css']
|
||||
})
|
||||
export class HeroDetailComponent implements OnInit {
|
||||
@Input() hero: Hero;
|
||||
@Output() close = new EventEmitter();
|
||||
error: any;
|
||||
navigated = false; // true if navigated here
|
||||
|
||||
constructor(
|
||||
private _heroService: HeroService,
|
||||
private _routeParams: RouteParams) {
|
||||
}
|
||||
|
||||
// #docregion ngOnInit
|
||||
ngOnInit() {
|
||||
if (this._routeParams.get('id') !== null) {
|
||||
let id = +this._routeParams.get('id');
|
||||
this.navigated = true;
|
||||
this._heroService.getHero(id)
|
||||
.then(hero => this.hero = hero);
|
||||
} else {
|
||||
this.navigated = false;
|
||||
this.hero = new Hero();
|
||||
}
|
||||
}
|
||||
// #enddocregion ngOnInit
|
||||
// #docregion save
|
||||
save() {
|
||||
this._heroService
|
||||
.save(this.hero)
|
||||
.then(hero => {
|
||||
this.hero = hero; // saved hero, w/ id if new
|
||||
this.goBack(hero);
|
||||
})
|
||||
.catch(error => this.error = error); // TODO: Display error message
|
||||
}
|
||||
// #enddocregion save
|
||||
goBack(savedHero: Hero = null) {
|
||||
this.close.emit(savedHero);
|
||||
if (this.navigated) { window.history.back(); }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http, Headers } from '@angular/http';
|
||||
|
||||
// #docregion rxjs
|
||||
import 'rxjs/add/operator/toPromise';
|
||||
// #enddocregion rxjs
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
|
||||
private heroesUrl = 'app/heroes'; // URL to web api
|
||||
|
||||
constructor(private http: Http) { }
|
||||
|
||||
// #docregion get-heroes
|
||||
getHeroes(): Promise<Hero[]> {
|
||||
return this.http.get(this.heroesUrl)
|
||||
// #docregion to-promise
|
||||
.toPromise()
|
||||
// #enddocregion to-promise
|
||||
// #docregion to-data
|
||||
.then(response => response.json().data)
|
||||
// #enddocregion to-data
|
||||
// #docregion catch
|
||||
.catch(this.handleError);
|
||||
// #enddocregion catch
|
||||
}
|
||||
// #enddocregion get-heroes
|
||||
|
||||
getHero(id: number) {
|
||||
return this.getHeroes()
|
||||
.then(heroes => heroes.filter(hero => hero.id === id)[0]);
|
||||
}
|
||||
|
||||
// #docregion save
|
||||
save(hero: Hero): Promise<Hero> {
|
||||
if (hero.id) {
|
||||
return this.put(hero);
|
||||
}
|
||||
return this.post(hero);
|
||||
}
|
||||
// #enddocregion save
|
||||
|
||||
// #docregion delete-hero
|
||||
delete(hero: Hero) {
|
||||
let headers = new Headers();
|
||||
headers.append('Content-Type', 'application/json');
|
||||
|
||||
let url = `${this.heroesUrl}/${hero.id}`;
|
||||
|
||||
return this.http
|
||||
.delete(url, headers)
|
||||
.toPromise()
|
||||
.catch(this.handleError);
|
||||
}
|
||||
// #enddocregion delete-hero
|
||||
|
||||
// #docregion post-hero
|
||||
// Add new Hero
|
||||
private post(hero: Hero): Promise<Hero> {
|
||||
let headers = new Headers({
|
||||
'Content-Type': 'application/json'});
|
||||
|
||||
return this.http
|
||||
.post(this.heroesUrl, JSON.stringify(hero), {headers: headers})
|
||||
.toPromise()
|
||||
.then(res => res.json().data)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
// #enddocregion post-hero
|
||||
|
||||
// #docregion put-hero
|
||||
// Update existing Hero
|
||||
private put(hero: Hero) {
|
||||
let headers = new Headers();
|
||||
headers.append('Content-Type', 'application/json');
|
||||
|
||||
let url = `${this.heroesUrl}/${hero.id}`;
|
||||
|
||||
return this.http
|
||||
.put(url, JSON.stringify(hero), {headers: headers})
|
||||
.toPromise()
|
||||
.then(() => hero)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
// #enddocregion put-hero
|
||||
|
||||
// #docregion error-handler
|
||||
private handleError(error: any) {
|
||||
console.error('An error occurred', error);
|
||||
return Promise.reject(error.message || error);
|
||||
}
|
||||
// #enddocregion error-handler
|
||||
}
|
||||
// #enddocregion
|
|
@ -0,0 +1,4 @@
|
|||
export class Hero {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
|
@ -0,0 +1,26 @@
|
|||
<!-- #docregion -->
|
||||
<h2>My Heroes</h2>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
|
||||
<span class="hero-element">
|
||||
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
||||
</span>
|
||||
<!-- #docregion delete-hero -->
|
||||
<button class="delete-button" (click)="delete(hero, $event)">Delete</button>
|
||||
<!-- #enddocregion delete-hero -->
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- #docregion add-hero -->
|
||||
<button (click)="addHero()">Add New Hero</button>
|
||||
<div *ngIf="addingHero">
|
||||
<my-hero-detail (close)="close($event)"></my-hero-detail>
|
||||
</div>
|
||||
<!-- #enddocregion add-hero -->
|
||||
|
||||
<div *ngIf="selectedHero">
|
||||
<h2>
|
||||
{{selectedHero.name | uppercase}} is my hero
|
||||
</h2>
|
||||
<button (click)="gotoDetail()">View Details</button>
|
||||
</div>
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue