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:
Zhicheng Wang
2016-05-20 15:27:42 +08:00
164 changed files with 2199 additions and 1417 deletions
@@ -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>
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>
+4 -2
View File
@@ -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": {
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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')
];
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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