chore: delete Dart _examples (#2976)
This commit is contained in:
Patrice Chalin
Kathy Walrath
parent
81bc9feca6
commit
05cdd9aa8a
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"title": "Architecture Overview",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
// #docregion import
|
||||
import 'package:angular2/core.dart';
|
||||
// #enddocregion import
|
||||
|
||||
import 'hero_list_component.dart';
|
||||
import 'sales_tax_component.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
template: '''
|
||||
<hero-list></hero-list>
|
||||
<sales-tax></sales-tax>''',
|
||||
directives: const [HeroListComponent, SalesTaxComponent])
|
||||
// #docregion export
|
||||
class AppComponent { }
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import 'dart:async';
|
||||
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
import 'logger_service.dart';
|
||||
|
||||
@Injectable()
|
||||
class BackendService {
|
||||
static final _mockHeroes = [
|
||||
new Hero('Windstorm', 'Weather mastery'),
|
||||
new Hero('Mr. Nice', 'Killing them with kindness'),
|
||||
new Hero('Magneta', 'Manipulates metalic objects')
|
||||
];
|
||||
|
||||
final Logger _logger;
|
||||
|
||||
BackendService(Logger this._logger);
|
||||
|
||||
Future<List> getAll(type) {
|
||||
// TODO get from the database
|
||||
if (type == Hero) return new Future.value(_mockHeroes);
|
||||
|
||||
var msg = 'Cannot get object of this type';
|
||||
_logger.error(msg);
|
||||
throw new Exception(msg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
class Hero {
|
||||
static int _nextId = 1;
|
||||
final int id;
|
||||
String name, power;
|
||||
|
||||
Hero(this.name, [this.power = '']) : id = _nextId++;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'hero-detail',
|
||||
templateUrl: 'hero_detail_component.html')
|
||||
class HeroDetailComponent {
|
||||
@Input()
|
||||
Hero hero;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<hr>
|
||||
<h4>{{hero.name}} Detail</h4>
|
||||
<div>Id: {{hero.id}}</div>
|
||||
<div>Name:
|
||||
<!-- #docregion ngModel -->
|
||||
<input [(ngModel)]="hero.name">
|
||||
<!-- #enddocregion ngModel -->
|
||||
</div>
|
||||
<div>Power:<input [(ngModel)]="hero.power"></div>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
import 'hero_detail_component.dart';
|
||||
import 'hero_service.dart';
|
||||
|
||||
// #docregion metadata
|
||||
@Component(
|
||||
selector: 'hero-list',
|
||||
templateUrl: 'hero_list_component.html',
|
||||
directives: const [HeroDetailComponent],
|
||||
// #docregion providers
|
||||
providers: const [HeroService]
|
||||
// #enddocregion providers
|
||||
)
|
||||
// #docregion class
|
||||
class HeroListComponent implements OnInit {
|
||||
// #enddocregion metadata
|
||||
List<Hero> heroes;
|
||||
Hero selectedHero;
|
||||
// #docregion ctor
|
||||
final HeroService _heroService;
|
||||
|
||||
HeroListComponent(this._heroService);
|
||||
// #enddocregion ctor
|
||||
|
||||
void ngOnInit() {
|
||||
heroes = _heroService.getHeroes();
|
||||
}
|
||||
|
||||
void selectHero(Hero hero) {
|
||||
selectedHero = hero;
|
||||
}
|
||||
// #docregion metadata
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<h2>Hero List</h2>
|
||||
|
||||
<p><i>Pick a hero from the list</i></p>
|
||||
<ul>
|
||||
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
|
||||
{{hero.name}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hero-detail *ngIf="selectedHero != null" [hero]="selectedHero"></hero-detail>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<!--#docregion binding -->
|
||||
<li>{{hero.name}}</li>
|
||||
<hero-detail [hero]="selectedHero"></hero-detail>
|
||||
<li (click)="selectHero(hero)"></li>
|
||||
<!--#enddocregion binding -->
|
||||
|
||||
<!--#docregion structural -->
|
||||
<li *ngFor="let hero of heroes"></li>
|
||||
<hero-detail *ngIf="selectedHero != null"></hero-detail>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'backend_service.dart';
|
||||
import 'hero.dart';
|
||||
import 'logger_service.dart';
|
||||
|
||||
@Injectable()
|
||||
// #docregion class
|
||||
class HeroService {
|
||||
final BackendService _backendService;
|
||||
final Logger _logger;
|
||||
final List<Hero> heroes = [];
|
||||
|
||||
HeroService(this._logger, this._backendService);
|
||||
|
||||
List<Hero> getHeroes() {
|
||||
_backendService.getAll(Hero).then((heroes) {
|
||||
_logger.log('Fetched ${heroes.length} heroes.');
|
||||
this.heroes.addAll(heroes); // fill cache
|
||||
});
|
||||
return heroes;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import 'dart:html';
|
||||
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Injectable()
|
||||
// #docregion class
|
||||
class Logger {
|
||||
void log(Object msg) => window.console.log(msg);
|
||||
void error(Object msg) => window.console.error(msg);
|
||||
void warn(Object msg) => window.console.warn(msg);
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'sales_tax_service.dart';
|
||||
import 'tax_rate_service.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'sales-tax',
|
||||
template: '''
|
||||
<h2>Sales Tax Calculator</h2>
|
||||
Amount: <input #amountBox (change)="0">
|
||||
|
||||
<div *ngIf="amountBox.value != ''">
|
||||
The sales tax is
|
||||
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
|
||||
</div>
|
||||
''',
|
||||
providers: const [SalesTaxService, TaxRateService])
|
||||
class SalesTaxComponent {
|
||||
SalesTaxService _salesTaxService;
|
||||
|
||||
SalesTaxComponent(this._salesTaxService) {}
|
||||
|
||||
num getTax(dynamic /* String | num */ value) =>
|
||||
this._salesTaxService.getVAT(value);
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'tax_rate_service.dart';
|
||||
|
||||
@Injectable()
|
||||
class SalesTaxService {
|
||||
TaxRateService rateService;
|
||||
|
||||
SalesTaxService(this.rateService);
|
||||
|
||||
num getVAT(dynamic /* String | num */ value) =>
|
||||
rateService.getRate('VAT') *
|
||||
(value is num ? value : num.parse(value, (_) => 0));
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
@Injectable()
|
||||
class TaxRateService {
|
||||
getRate(String rateName) => 0.10;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
# #docregion
|
||||
name: developer_guide_intro
|
||||
description: Developer Guide Intro
|
||||
version: 0.0.1
|
||||
environment:
|
||||
sdk: '>=1.19.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: ^2.2.0
|
||||
dev_dependencies:
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
- angular2:
|
||||
platform_directives:
|
||||
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
|
||||
platform_pipes:
|
||||
- 'package:angular2/common.dart#COMMON_PIPES'
|
||||
entry_points: web/main.dart
|
||||
- dart_to_js_script_rewriter
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Architecture of Angular</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<script defer src="main.dart" type="application/dart"></script>
|
||||
<script defer src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
// #docregion import
|
||||
import 'package:developer_guide_intro/app_component.dart';
|
||||
// #enddocregion import
|
||||
import 'package:developer_guide_intro/backend_service.dart';
|
||||
import 'package:developer_guide_intro/hero_service.dart';
|
||||
import 'package:developer_guide_intro/logger_service.dart';
|
||||
|
||||
void main() {
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent, [BackendService, HeroService, Logger]);
|
||||
// #enddocregion bootstrap
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"title": "Attribute Directives",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'highlight_directive.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
templateUrl: 'app_component.html',
|
||||
directives: const [HighlightDirective])
|
||||
class AppComponent {
|
||||
String color;
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<!-- #docregion v2 -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<h4>Pick a highlight color</h4>
|
||||
<div>
|
||||
<input type="radio" name="colors" (click)="color='lightgreen'">Green
|
||||
<input type="radio" name="colors" (click)="color='yellow'">Yellow
|
||||
<input type="radio" name="colors" (click)="color='cyan'">Cyan
|
||||
</div>
|
||||
<!-- #docregion pHost -->
|
||||
<p [myHighlight]="color">Highlight me!</p>
|
||||
<!-- #enddocregion pHost -->
|
||||
<!-- #enddocregion v2 -->
|
||||
|
||||
<!-- #docregion defaultColor -->
|
||||
<p [myHighlight]="color" [defaultColor]="'violet'">
|
||||
Highlight me too!
|
||||
</p>
|
||||
<!-- #enddocregion defaultColor -->
|
||||
<!-- #enddocregion -->
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<p myHighlight>Highlight me!</p>
|
||||
<!-- #enddocregion -->
|
||||
<!-- #docregion p-style-background -->
|
||||
<p [style.background]="'lime'">I am green with envy!</p>
|
||||
<!-- #enddocregion p-style-background -->
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion full
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[myHighlight]')
|
||||
// #docregion class
|
||||
class HighlightDirective {
|
||||
String _defaultColor = 'red';
|
||||
final dynamic _el;
|
||||
|
||||
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
|
||||
// #enddocregion class
|
||||
|
||||
// #docregion defaultColor
|
||||
@Input()
|
||||
set defaultColor(String colorName) {
|
||||
_defaultColor = (colorName ?? _defaultColor);
|
||||
}
|
||||
// #enddocregion defaultColor
|
||||
// #docregion class
|
||||
|
||||
// #docregion color
|
||||
@Input('myHighlight')
|
||||
String highlightColor;
|
||||
// #enddocregion color
|
||||
|
||||
// #docregion mouse-enter
|
||||
@HostListener('mouseenter')
|
||||
void onMouseEnter() => _highlight(highlightColor ?? _defaultColor);
|
||||
|
||||
// #enddocregion mouse-enter
|
||||
@HostListener('mouseleave')
|
||||
void onMouseLeave() => _highlight();
|
||||
|
||||
void _highlight([String color]) {
|
||||
if (_el != null) _el.style.backgroundColor = color;
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion full
|
||||
/*
|
||||
// #docregion highlight
|
||||
@Input() String myHighlight;
|
||||
// #enddocregion highlight
|
||||
*/
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// #docregion
|
||||
library attribute_directives.highlight_directive;
|
||||
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[myHighlight]')
|
||||
class HighlightDirective {
|
||||
HighlightDirective(ElementRef element) {
|
||||
element.nativeElement.style.backgroundColor = 'yellow';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[myHighlight]')
|
||||
class HighlightDirective {
|
||||
// #docregion ctor
|
||||
final dynamic _el;
|
||||
|
||||
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion mouse-methods, host
|
||||
@HostListener('mouseenter')
|
||||
void onMouseEnter() {
|
||||
// #enddocregion host
|
||||
_highlight('yellow');
|
||||
// #docregion host
|
||||
}
|
||||
|
||||
@HostListener('mouseleave')
|
||||
void onMouseLeave() {
|
||||
// #enddocregion host
|
||||
_highlight();
|
||||
// #docregion host
|
||||
}
|
||||
// #enddocregion host
|
||||
|
||||
void _highlight([String color]) {
|
||||
if (_el != null) _el.style.backgroundColor = color;
|
||||
}
|
||||
// #enddocregion mouse-methods
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
# #docregion
|
||||
name: attribute_directives
|
||||
description: Attribute directives example
|
||||
version: 0.0.1
|
||||
environment:
|
||||
sdk: '>=1.19.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: ^2.2.0
|
||||
dev_dependencies:
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
- angular2:
|
||||
platform_directives:
|
||||
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
|
||||
platform_pipes:
|
||||
- 'package:angular2/common.dart#COMMON_PIPES'
|
||||
entry_points: web/main.dart
|
||||
- dart_to_js_script_rewriter
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Attribute Directives</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script defer src="main.dart" type="application/dart"></script>
|
||||
<script defer src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
|
||||
import 'package:attribute_directives/app_component.dart';
|
||||
|
||||
main() {
|
||||
bootstrap(AppComponent);
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"title": "Component Styles",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
class Hero {
|
||||
bool active = false;
|
||||
|
||||
final String name;
|
||||
final List<String> team;
|
||||
|
||||
Hero(this.name, this.team);
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
import 'hero.dart';
|
||||
import 'hero_app_main_component.dart';
|
||||
|
||||
// #docregion
|
||||
@Component(
|
||||
selector: 'hero-app',
|
||||
template: '''
|
||||
<h1>Tour of Heroes</h1>
|
||||
<hero-app-main [hero]="hero"></hero-app-main>''',
|
||||
styles: const ['h1 { font-weight: normal; }'],
|
||||
directives: const [HeroAppMainComponent])
|
||||
class HeroAppComponent {
|
||||
// #enddocregion
|
||||
Hero hero =
|
||||
new Hero('Human Torch', ['Mister Fantastic', 'Invisible Woman', 'Thing']);
|
||||
|
||||
@HostBinding('class')
|
||||
String get themeClass => 'theme-light';
|
||||
// #docregion
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
import 'hero_details_component.dart';
|
||||
import 'hero_controls_component.dart';
|
||||
import 'quest_summary_component.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'hero-app-main',
|
||||
template: '''
|
||||
<quest-summary></quest-summary>
|
||||
<hero-details [hero]="hero" [class.active]="hero.active">
|
||||
<hero-controls [hero]="hero"></hero-controls>
|
||||
</hero-details>''',
|
||||
directives: const [
|
||||
HeroDetailsComponent,
|
||||
HeroControlsComponent,
|
||||
QuestSummaryComponent
|
||||
])
|
||||
class HeroAppMainComponent {
|
||||
@Input() Hero hero;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
import 'hero.dart';
|
||||
|
||||
// #docregion inlinestyles
|
||||
@Component(
|
||||
selector: 'hero-controls',
|
||||
template: '''
|
||||
<style>
|
||||
button {
|
||||
background-color: white;
|
||||
border: 1px solid #777;
|
||||
}
|
||||
</style>
|
||||
<h3>Controls</h3>
|
||||
<button (click)="activate()">Activate</button>''')
|
||||
class HeroControlsComponent {
|
||||
@Input()
|
||||
Hero hero;
|
||||
|
||||
void activate() {
|
||||
hero.active = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
:host {
|
||||
padding: 10px;
|
||||
}
|
||||
h3 {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
/* #docregion import */
|
||||
/* pub build fails on
|
||||
@ import 'hero_details_box.css';
|
||||
See https://github.com/angular/angular/issues/8518 */
|
||||
|
||||
@import '/packages/component_styles/hero_details_box.css';
|
||||
/* #enddocregion import */
|
||||
|
||||
/* #docregion host */
|
||||
:host {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
}
|
||||
/* #enddocregion host */
|
||||
|
||||
/* #docregion hostfunction */
|
||||
:host(.active) {
|
||||
border-width: 3px;
|
||||
}
|
||||
/* #enddocregion hostfunction */
|
||||
|
||||
/* #docregion hostcontext */
|
||||
:host-context(.theme-light) h2 {
|
||||
background-color: #eef;
|
||||
}
|
||||
/* #enddocregion hostcontext */
|
||||
|
||||
/* #docregion deep */
|
||||
:host /deep/ h3 {
|
||||
font-style: italic;
|
||||
}
|
||||
/* #enddocregion deep */
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
import 'hero.dart';
|
||||
import 'hero_team_component.dart';
|
||||
|
||||
// #docregion styleurls
|
||||
@Component(
|
||||
selector: 'hero-details',
|
||||
template: '''
|
||||
<h2>{{hero.name}}</h2>
|
||||
<hero-team [hero]=hero></hero-team>
|
||||
<ng-content></ng-content>''',
|
||||
styleUrls: const ['hero_details_component.css'],
|
||||
directives: const [HeroTeamComponent])
|
||||
class HeroDetailsComponent {
|
||||
// #enddocregion styleurls
|
||||
@Input() Hero hero;
|
||||
// #docregion styleurls
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
li {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
import 'hero.dart';
|
||||
|
||||
// #docregion stylelink
|
||||
@Component(
|
||||
selector: 'hero-team',
|
||||
template: '''
|
||||
<link rel="stylesheet" href="hero_team_component.css">
|
||||
<h3>Team</h3>
|
||||
<ul>
|
||||
<li *ngFor="let member of hero.team">
|
||||
{{member}}
|
||||
</li>
|
||||
</ul>''')
|
||||
class HeroTeamComponent {
|
||||
@Input() Hero hero;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
:host {
|
||||
display: block;
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
// #docplaster
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
// #docregion
|
||||
@Component(
|
||||
selector: 'quest-summary',
|
||||
// #docregion urls
|
||||
templateUrl: 'quest_summary_component.html',
|
||||
styleUrls: const ['quest_summary_component.css'])
|
||||
// #enddocregion urls
|
||||
class QuestSummaryComponent {}
|
||||
// #enddocregion
|
||||
/*
|
||||
// #docregion encapsulation.native
|
||||
// warning: few browsers support shadow DOM encapsulation at this time
|
||||
encapsulation: ViewEncapsulation.Native
|
||||
// #enddocregion encapsulation.native
|
||||
*/
|
||||
|
|
@ -1 +0,0 @@
|
|||
<p>No quests in progress</p>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
# #docregion
|
||||
name: component_styles
|
||||
description: Component Styles example
|
||||
version: 0.0.1
|
||||
environment:
|
||||
sdk: '>=1.19.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: ^2.2.0
|
||||
dev_dependencies:
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
- angular2:
|
||||
platform_directives:
|
||||
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
|
||||
platform_pipes:
|
||||
- 'package:angular2/common.dart#COMMON_PIPES'
|
||||
entry_points: web/main.dart
|
||||
- dart_to_js_script_rewriter
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Component Styles</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<script defer src="main.dart" type="application/dart"></script>
|
||||
<script defer src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
|
||||
<hero-app></hero-app>
|
||||
<button style="visibility: hidden;">External button for E2E test</button>
|
||||
<ul style="visibility: hidden;">
|
||||
<li>External list for E2E test</li>
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import 'package:angular2/platform/browser.dart';
|
||||
import 'package:component_styles/hero_app_component.dart';
|
||||
|
||||
main() {
|
||||
bootstrap(HeroAppComponent);
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
# Supported lint rules and documentation: http://dart-lang.github.io/linter/lints/
|
||||
linter:
|
||||
rules:
|
||||
- always_declare_return_types
|
||||
- camel_case_types
|
||||
- empty_constructor_bodies
|
||||
- annotate_overrides
|
||||
- avoid_init_to_null
|
||||
- constant_identifier_names
|
||||
- one_member_abstracts
|
||||
- slash_for_doc_comments
|
||||
- sort_constructors_first
|
||||
- unnecessary_brace_in_string_interp
|
||||
|
||||
analyzer:
|
||||
# strong-mode: true
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"title": "Dependency Injection",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'app_config.dart';
|
||||
import 'car/car_component.dart';
|
||||
import 'heroes/heroes_component.dart';
|
||||
import 'logger_service.dart';
|
||||
import 'user_service.dart';
|
||||
import 'injector_component.dart';
|
||||
import 'test_component.dart';
|
||||
import 'providers_component.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
template: '''
|
||||
<h1>{{title}}</h1>
|
||||
<my-car></my-car>
|
||||
<my-injectors></my-injectors>
|
||||
<my-tests></my-tests>
|
||||
<h2>User</h2>
|
||||
<p id="user">
|
||||
{{userInfo}}
|
||||
<button (click)="nextUser()">Next User</button>
|
||||
<p>
|
||||
<my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
|
||||
<my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
|
||||
<my-providers></my-providers>
|
||||
''',
|
||||
directives: const [
|
||||
CarComponent,
|
||||
HeroesComponent,
|
||||
InjectorComponent,
|
||||
TestComponent,
|
||||
ProvidersComponent
|
||||
],
|
||||
// #docregion providers
|
||||
providers: const [
|
||||
Logger, UserService,
|
||||
const Provider(APP_CONFIG, useFactory: heroDiConfigFactory)]
|
||||
// #enddocregion providers
|
||||
)
|
||||
class AppComponent {
|
||||
final UserService _userService;
|
||||
final String title;
|
||||
|
||||
// #docregion ctor
|
||||
AppComponent(@Inject(APP_CONFIG) AppConfig config, this._userService)
|
||||
: title = config.title;
|
||||
// #enddocregion ctor
|
||||
|
||||
bool get isAuthorized {
|
||||
return user.isAuthorized;
|
||||
}
|
||||
|
||||
void nextUser() {
|
||||
_userService.getNewUser();
|
||||
}
|
||||
|
||||
User get user {
|
||||
return _userService.user;
|
||||
}
|
||||
|
||||
String get userInfo => 'Current user, ${user.name}, is' +
|
||||
(isAuthorized ? '' : ' not') + ' authorized. ';
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
// Early versions
|
||||
|
||||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'car/car_component.dart';
|
||||
import 'heroes/heroes_component_1.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
template: '''
|
||||
<h1>{{title}}</h1>
|
||||
<my-car></my-car>
|
||||
<my-heroes></my-heroes>''',
|
||||
directives: const [CarComponent, HeroesComponent])
|
||||
class AppComponent {
|
||||
final String title = 'Dependency Injection';
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
// #docregion
|
||||
|
||||
// #docregion imports
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'app_config.dart';
|
||||
import 'car/car_component.dart';
|
||||
import 'heroes/heroes_component_1.dart';
|
||||
import 'logger_service.dart';
|
||||
// #enddocregion imports
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
template: '''
|
||||
<h1>{{title}}</h1>
|
||||
<my-car></my-car>
|
||||
<my-heroes></my-heroes>''',
|
||||
directives: const [
|
||||
CarComponent,
|
||||
HeroesComponent
|
||||
],
|
||||
providers: const [
|
||||
Logger,
|
||||
// #docregion providers
|
||||
const Provider(APP_CONFIG, useValue: heroDiConfig)
|
||||
// #enddocregion providers
|
||||
]
|
||||
)
|
||||
class AppComponent {
|
||||
final String title;
|
||||
|
||||
// #docregion ctor
|
||||
AppComponent(@Inject(APP_CONFIG) Map config)
|
||||
: title = config['title'];
|
||||
// #enddocregion ctor
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// #docregion token
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
const APP_CONFIG = const OpaqueToken('app.config');
|
||||
// #enddocregion token
|
||||
|
||||
// #docregion config
|
||||
const Map heroDiConfig = const <String,String>{
|
||||
'apiEndpoint' : 'api.heroes.com',
|
||||
'title' : 'Dependency Injection'
|
||||
};
|
||||
// #enddocregion config
|
||||
|
||||
// #docregion config-alt
|
||||
class AppConfig {
|
||||
String apiEndpoint;
|
||||
String title;
|
||||
}
|
||||
|
||||
AppConfig heroDiConfigFactory() => new AppConfig()
|
||||
..apiEndpoint = 'api.heroes.com'
|
||||
..title = 'Dependency Injection';
|
||||
// #enddocregion config-alt
|
||||
|
||||
const appConfigProvider = const Provider(APP_CONFIG,
|
||||
useFactory: heroDiConfigFactory,
|
||||
deps: const []);
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
@Injectable()
|
||||
class Engine {
|
||||
final int cylinders;
|
||||
|
||||
Engine() : cylinders = 4;
|
||||
Engine.withCylinders(this.cylinders);
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
class Tires {
|
||||
String make = 'Flintstone';
|
||||
String model = 'Square';
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
class Car {
|
||||
//#docregion car-ctor
|
||||
final Engine engine;
|
||||
final Tires tires;
|
||||
String description = 'DI';
|
||||
|
||||
Car(this.engine, this.tires);
|
||||
// #enddocregion car-ctor
|
||||
|
||||
// Method using the engine and tires
|
||||
String drive() => '$description car with '
|
||||
'${engine.cylinders} cylinders and '
|
||||
'${tires.make} tires.';
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'car.dart';
|
||||
import 'car_creations.dart' as carCreations;
|
||||
import 'car_factory.dart';
|
||||
import 'car_injector.dart';
|
||||
import 'car_no_di.dart' as carNoDi;
|
||||
|
||||
@Component(
|
||||
selector: 'my-car',
|
||||
template: '''
|
||||
<h2>Cars</h2>
|
||||
<div id="di">{{car.drive()}}</div>
|
||||
<div id="nodi">{{noDiCar.drive()}}</div>
|
||||
<div id="injector">{{injectorCar.drive()}}</div>
|
||||
<div id="factory">{{factoryCar.drive()}}</div>
|
||||
<div id="simple">{{simpleCar.drive()}}</div>
|
||||
<div id="super">{{superCar.drive()}}</div>
|
||||
<div id="test">{{testCar.drive()}}</div>''',
|
||||
providers: const [Car, Engine, Tires])
|
||||
class CarComponent {
|
||||
final Car car;
|
||||
|
||||
CarComponent(this.car);
|
||||
|
||||
Car factoryCar = (new CarFactory()).createCar();
|
||||
Car injectorCar = useInjector();
|
||||
carNoDi.Car noDiCar = new carNoDi.Car();
|
||||
Car simpleCar = carCreations.simpleCar();
|
||||
Car superCar = carCreations.superCar();
|
||||
Car testCar = carCreations.testCar();
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
// #docplaster
|
||||
// Examples with car and engine variations
|
||||
import 'car.dart';
|
||||
|
||||
///////// example 1 ////////////
|
||||
Car simpleCar() =>
|
||||
// #docregion car-ctor-instantiation
|
||||
// Simple car with 4 cylinders and Flintstone tires.
|
||||
new Car(new Engine(), new Tires())
|
||||
// #enddocregion car-ctor-instantiation
|
||||
..description = 'Simple';
|
||||
|
||||
///////// example 2 ////////////
|
||||
|
||||
// #docregion car-ctor-instantiation-with-param
|
||||
class Engine2 extends Engine {
|
||||
Engine2(cylinders) : super.withCylinders(cylinders);
|
||||
}
|
||||
|
||||
Car superCar() =>
|
||||
// Super car with 12 cylinders and Flintstone tires.
|
||||
new Car(new Engine2(12), new Tires())
|
||||
..description = 'Super';
|
||||
// #enddocregion car-ctor-instantiation-with-param
|
||||
|
||||
/////////// example 3 //////////
|
||||
|
||||
// #docregion car-ctor-instantiation-with-mocks
|
||||
class MockEngine extends Engine {
|
||||
MockEngine() : super.withCylinders(8);
|
||||
}
|
||||
|
||||
class MockTires extends Tires {
|
||||
MockTires() { make = 'YokoGoodStone'; }
|
||||
}
|
||||
|
||||
Car testCar() =>
|
||||
// Test car with 8 cylinders and YokoGoodStone tires.
|
||||
new Car(new MockEngine(), new MockTires())
|
||||
..description = 'Test';
|
||||
// #enddocregion car-ctor-instantiation-with-mocks
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// #docregion
|
||||
import 'car.dart';
|
||||
|
||||
// BAD pattern!
|
||||
class CarFactory {
|
||||
Car createCar() =>
|
||||
new Car(createEngine(), createTires())
|
||||
..description = 'Factory';
|
||||
|
||||
Engine createEngine() => new Engine();
|
||||
Tires createTires() => new Tires();
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import '../logger_service.dart';
|
||||
import 'car.dart';
|
||||
|
||||
// #docregion injector
|
||||
Car useInjector() {
|
||||
ReflectiveInjector injector;
|
||||
// #enddocregion injector
|
||||
/*
|
||||
// #docregion injector-no-new
|
||||
// Cannot instantiate an ReflectiveInjector like this!
|
||||
var injector = new ReflectiveInjector([Car, Engine, Tires]);
|
||||
// #enddocregion injector-no-new
|
||||
*/
|
||||
// #docregion injector, injector-create-and-call
|
||||
injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Tires]);
|
||||
// #docregion injector-call
|
||||
var car = injector.get(Car);
|
||||
// #enddocregion injector-call, injector-create-and-call
|
||||
car.description = 'Injector';
|
||||
|
||||
injector = ReflectiveInjector.resolveAndCreate([Logger]);
|
||||
var logger = injector.get(Logger);
|
||||
logger.log('Injector car.drive() said: ' + car.drive());
|
||||
return car;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// Car without DI
|
||||
|
||||
import 'car.dart';
|
||||
|
||||
//#docregion car
|
||||
class Car {
|
||||
//#docregion car-ctor
|
||||
Engine engine;
|
||||
Tires tires;
|
||||
var description = 'No DI';
|
||||
|
||||
Car() {
|
||||
engine = new Engine();
|
||||
tires = new Tires();
|
||||
}
|
||||
//#enddocregion car-ctor
|
||||
|
||||
// Method using the engine and tires
|
||||
String drive() => '$description car with '
|
||||
'${engine.cylinders} cylinders and '
|
||||
'${tires.make} tires.';
|
||||
}
|
||||
//#enddocregion car
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// #docregion
|
||||
class Hero {
|
||||
final int id;
|
||||
final String name;
|
||||
final bool isSecret;
|
||||
|
||||
Hero(this.id, this.name, [this.isSecret = false]);
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
import 'hero_service.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'hero-list',
|
||||
template: '''
|
||||
<div *ngFor="let hero of heroes">
|
||||
{{hero.id}} - {{hero.name}}
|
||||
({{hero.isSecret ? 'secret' : 'public'}})
|
||||
</div>''')
|
||||
class HeroListComponent {
|
||||
final List<Hero> heroes;
|
||||
|
||||
// #docregion ctor-signature
|
||||
HeroListComponent(HeroService heroService)
|
||||
// #enddocregion ctor-signature
|
||||
: heroes = heroService.getHeroes();
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
import 'mock_heroes.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'hero-list',
|
||||
template: '''
|
||||
<div *ngFor="let hero of heroes">
|
||||
{{hero.id}} - {{hero.name}}
|
||||
</div>''')
|
||||
class HeroListComponent {
|
||||
final List<Hero> heroes = HEROES;
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
// #enddocregion
|
||||
import 'hero_service_1.dart';
|
||||
/*
|
||||
// #docregion
|
||||
import 'hero_service.dart';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
|
||||
@Component(
|
||||
selector: 'hero-list',
|
||||
template: '''
|
||||
<div *ngFor="let hero of heroes">
|
||||
{{hero.id}} - {{hero.name}}
|
||||
</div>''')
|
||||
class HeroListComponent {
|
||||
final List<Hero> heroes;
|
||||
|
||||
// #docregion ctor
|
||||
HeroListComponent(HeroService heroService)
|
||||
: heroes = heroService.getHeroes();
|
||||
// #enddocregion ctor
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import '../logger_service.dart';
|
||||
import 'hero.dart';
|
||||
import 'mock_heroes.dart';
|
||||
|
||||
@Injectable()
|
||||
class HeroService {
|
||||
// #docregion internals
|
||||
final Logger _logger;
|
||||
final bool _isAuthorized;
|
||||
|
||||
HeroService(this._logger, this._isAuthorized);
|
||||
|
||||
List<Hero> getHeroes() {
|
||||
var auth = _isAuthorized ? 'authorized' : 'unauthorized';
|
||||
_logger.log('Getting heroes for $auth user.');
|
||||
return HEROES
|
||||
.where((hero) => _isAuthorized || !hero.isSecret)
|
||||
.toList();
|
||||
}
|
||||
// #enddocregion internals
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
import 'mock_heroes.dart';
|
||||
|
||||
@Injectable()
|
||||
class HeroService {
|
||||
List<Hero> getHeroes() => HEROES;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import '../logger_service.dart';
|
||||
import 'hero.dart';
|
||||
import 'mock_heroes.dart';
|
||||
|
||||
@Injectable()
|
||||
class HeroService {
|
||||
final Logger _logger;
|
||||
|
||||
//#docregion ctor
|
||||
HeroService(this._logger);
|
||||
//#enddocregion ctor
|
||||
List<Hero> getHeroes() {
|
||||
_logger.log('Getting heroes ...');
|
||||
return HEROES;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import '../logger_service.dart';
|
||||
import '../user_service.dart';
|
||||
import 'hero_service.dart';
|
||||
|
||||
// #docregion factory
|
||||
HeroService heroServiceFactory(Logger logger, UserService userService) =>
|
||||
new HeroService(logger, userService.user.isAuthorized);
|
||||
// #enddocregion factory
|
||||
|
||||
// #docregion provider
|
||||
const heroServiceProvider = const Provider(HeroService,
|
||||
useFactory: heroServiceFactory,
|
||||
deps: const [Logger, UserService]);
|
||||
// #enddocregion provider
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero_list_component.dart';
|
||||
import 'hero_service_provider.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-heroes',
|
||||
template: '''
|
||||
<h2>Heroes</h2>
|
||||
<hero-list></hero-list>''',
|
||||
providers: const [heroServiceProvider],
|
||||
directives: const [HeroListComponent])
|
||||
class HeroesComponent {}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion full, v1
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
// #enddocregion full, v1
|
||||
import 'hero_list_component_2.dart';
|
||||
import 'hero_service_1.dart';
|
||||
/*
|
||||
// #docregion full, v1
|
||||
import 'hero_list_component.dart';
|
||||
// #enddocregion v1
|
||||
import 'hero_service.dart';
|
||||
// #enddocregion full
|
||||
*/
|
||||
// #docregion full, v1
|
||||
|
||||
@Component(
|
||||
selector: 'my-heroes',
|
||||
template: '''
|
||||
<h2>Heroes</h2>
|
||||
<hero-list></hero-list>''',
|
||||
// #enddocregion v1
|
||||
providers: const [HeroService],
|
||||
// #docregion v1
|
||||
directives: const [HeroListComponent])
|
||||
class HeroesComponent {}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
// #docregion
|
||||
import 'hero.dart';
|
||||
|
||||
List<Hero> HEROES = <Map>[
|
||||
{'id': 11, 'isSecret': false, 'name': 'Mr. Nice'},
|
||||
{'id': 12, 'isSecret': false, 'name': 'Narco'},
|
||||
{'id': 13, 'isSecret': false, 'name': 'Bombasto'},
|
||||
{'id': 14, 'isSecret': false, 'name': 'Celeritas'},
|
||||
{'id': 15, 'isSecret': false, 'name': 'Magneta'},
|
||||
{'id': 16, 'isSecret': false, 'name': 'RubberMan'},
|
||||
{'id': 17, 'isSecret': false, 'name': 'Dynama'},
|
||||
{'id': 18, 'isSecret': true, 'name': 'Dr IQ'},
|
||||
{'id': 19, 'isSecret': true, 'name': 'Magma'},
|
||||
{'id': 20, 'isSecret': true, 'name': 'Tornado'}
|
||||
].map(_initHero).toList();
|
||||
|
||||
Hero _initHero(Map heroProperties) => new Hero(
|
||||
heroProperties['id'], heroProperties['name'], heroProperties['isSecret']);
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
// #docplaster
|
||||
|
||||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'car/car.dart';
|
||||
import 'heroes/hero.dart';
|
||||
import 'heroes/hero_service.dart';
|
||||
import 'heroes/hero_service_provider.dart';
|
||||
import 'logger_service.dart';
|
||||
|
||||
// #docregion injector
|
||||
@Component(
|
||||
selector: 'my-injectors',
|
||||
template: '''
|
||||
<h2>Other Injections</h2>
|
||||
<div id="car">{{car.drive()}}</div>
|
||||
<div id="hero">{{hero.name}}</div>
|
||||
<div id="rodent">{{rodent}}</div>''',
|
||||
providers: const [
|
||||
Car, Engine, Tires, heroServiceProvider, Logger])
|
||||
class InjectorComponent {
|
||||
final Injector _injector;
|
||||
Car car;
|
||||
HeroService heroService;
|
||||
Hero hero;
|
||||
|
||||
InjectorComponent(this._injector) {
|
||||
car = _injector.get(Car);
|
||||
// #docregion get-hero-service
|
||||
heroService = _injector.get(HeroService);
|
||||
// #enddocregion get-hero-service
|
||||
hero = heroService.getHeroes()[0];
|
||||
}
|
||||
|
||||
String get rodent =>
|
||||
_injector.get(ROUS, "R.O.U.S.'s? I don't think they exist!");
|
||||
}
|
||||
// #enddocregion injector
|
||||
|
||||
/// R.O.U.S. - Rodents Of Unusual Size
|
||||
/// https://www.youtube.com/watch?v=BOv5ZjAOpC8
|
||||
class ROUS {}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Injectable()
|
||||
class Logger {
|
||||
List<String> _logs = [];
|
||||
List<String> get logs => _logs;
|
||||
|
||||
void log(String message) {
|
||||
_logs.add(message);
|
||||
print(message);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,280 +0,0 @@
|
|||
// Examples of provider arrays
|
||||
// #docplaster
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'app_config.dart';
|
||||
import 'heroes/hero_service_provider.dart';
|
||||
import 'heroes/hero_service.dart';
|
||||
import 'logger_service.dart';
|
||||
import 'user_service.dart';
|
||||
|
||||
// TODO file an issue: cannot use the following const in metadata.
|
||||
const template = '{{log}}';
|
||||
|
||||
@Component(
|
||||
selector: 'provider-1',
|
||||
template: '{{log}}',
|
||||
// #docregion providers-1, providers-logger
|
||||
providers: const [Logger]
|
||||
// #enddocregion providers-1, providers-logger
|
||||
)
|
||||
class Provider1Component {
|
||||
String log;
|
||||
|
||||
Provider1Component(Logger logger) {
|
||||
logger.log('Hello from logger provided with Logger class');
|
||||
log = logger.logs[0];
|
||||
}
|
||||
}
|
||||
|
||||
/// Component just used to ensure that shared E2E tests pass.
|
||||
@Component(
|
||||
selector: 'provider-3',
|
||||
template: '{{log}}',
|
||||
providers:
|
||||
// #docregion providers-3
|
||||
const [const Provider(Logger, useClass: Logger)]
|
||||
// #enddocregion providers-3
|
||||
)
|
||||
class Provider3Component {
|
||||
String log;
|
||||
|
||||
Provider3Component(Logger logger) {
|
||||
logger.log('Hello from logger provided with useClass:Logger');
|
||||
log = logger.logs[0];
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
class BetterLogger extends Logger {}
|
||||
|
||||
@Component(
|
||||
selector: 'provider-4',
|
||||
template: '{{log}}',
|
||||
providers:
|
||||
// #docregion providers-4
|
||||
const [const Provider(Logger, useClass: BetterLogger)]
|
||||
// #enddocregion providers-4
|
||||
)
|
||||
class Provider4Component {
|
||||
String log;
|
||||
|
||||
Provider4Component(Logger logger) {
|
||||
logger.log('Hello from logger provided with useClass:BetterLogger');
|
||||
log = logger.logs[0];
|
||||
}
|
||||
}
|
||||
|
||||
// #docregion EvenBetterLogger
|
||||
@Injectable()
|
||||
class EvenBetterLogger extends Logger {
|
||||
final UserService _userService;
|
||||
|
||||
EvenBetterLogger(this._userService);
|
||||
|
||||
@override void log(String message) {
|
||||
var name = _userService.user.name;
|
||||
super.log('Message to $name: $message');
|
||||
}
|
||||
}
|
||||
// #enddocregion EvenBetterLogger
|
||||
|
||||
@Component(
|
||||
selector: 'provider-5',
|
||||
template: '{{log}}',
|
||||
providers:
|
||||
// #docregion providers-5
|
||||
const [UserService, const Provider(Logger, useClass: EvenBetterLogger)]
|
||||
// #enddocregion providers-5
|
||||
)
|
||||
class Provider5Component {
|
||||
String log;
|
||||
|
||||
Provider5Component(Logger logger) {
|
||||
logger.log('Hello from EvenBetterlogger');
|
||||
log = logger.logs[0];
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
class NewLogger extends Logger implements OldLogger {}
|
||||
|
||||
class OldLogger extends Logger {
|
||||
@override
|
||||
void log(String message) {
|
||||
throw new Exception('Should not call the old logger!');
|
||||
}
|
||||
}
|
||||
|
||||
@Component(
|
||||
selector: 'provider-6a',
|
||||
template: '{{log}}',
|
||||
providers:
|
||||
// #docregion providers-6a
|
||||
const [NewLogger,
|
||||
// Not aliased! Creates two instances of `NewLogger`
|
||||
const Provider(OldLogger, useClass: NewLogger)]
|
||||
// #enddocregion providers-6a
|
||||
)
|
||||
class Provider6aComponent {
|
||||
String log;
|
||||
|
||||
Provider6aComponent(NewLogger newLogger, OldLogger oldLogger) {
|
||||
if (newLogger == oldLogger) {
|
||||
throw new Exception('expected the two loggers to be different instances');
|
||||
}
|
||||
oldLogger.log('Hello OldLogger (but we want NewLogger)');
|
||||
// The newLogger wasn't called so no logs[]
|
||||
// display the logs of the oldLogger.
|
||||
log = newLogger.logs.isEmpty ? oldLogger.logs[0] : newLogger.logs[0];
|
||||
}
|
||||
}
|
||||
|
||||
@Component(
|
||||
selector: 'provider-6b',
|
||||
template: '{{log}}',
|
||||
providers:
|
||||
// #docregion providers-6b
|
||||
const [NewLogger,
|
||||
// Alias OldLogger with reference to NewLogger
|
||||
const Provider(OldLogger, useExisting: NewLogger)]
|
||||
// #enddocregion providers-6b
|
||||
)
|
||||
class Provider6bComponent {
|
||||
String log;
|
||||
|
||||
Provider6bComponent(NewLogger newLogger, OldLogger oldLogger) {
|
||||
if (newLogger != oldLogger) {
|
||||
throw new Exception('expected the two loggers to be the same instance');
|
||||
}
|
||||
oldLogger.log('Hello from NewLogger (via aliased OldLogger)');
|
||||
log = newLogger.logs[0];
|
||||
}
|
||||
}
|
||||
|
||||
// #docregion silent-logger
|
||||
// #docregion const-class
|
||||
class SilentLogger implements Logger {
|
||||
@override
|
||||
final List<String> logs = const ['Silent logger says "Shhhhh!". Provided via "useValue"'];
|
||||
|
||||
const SilentLogger();
|
||||
|
||||
@override
|
||||
void log(String message) { }
|
||||
}
|
||||
// #enddocregion const-class
|
||||
// #docregion const-object
|
||||
|
||||
const silentLogger = const SilentLogger();
|
||||
// #enddocregion const-object
|
||||
// #enddocregion silent-logger
|
||||
|
||||
@Component(
|
||||
selector: 'provider-7',
|
||||
template: '{{log}}',
|
||||
providers:
|
||||
// #docregion providers-7
|
||||
const [const Provider(Logger, useValue: silentLogger)]
|
||||
// #enddocregion providers-7
|
||||
)
|
||||
class Provider7Component {
|
||||
String log;
|
||||
|
||||
Provider7Component(Logger logger) {
|
||||
logger.log('Hello from logger provided with useValue');
|
||||
log = logger.logs[0];
|
||||
}
|
||||
}
|
||||
|
||||
@Component(
|
||||
selector: 'provider-8',
|
||||
template: '{{log}}',
|
||||
providers: const [heroServiceProvider, Logger, UserService])
|
||||
class Provider8Component {
|
||||
// must be true else this component would have blown up at runtime
|
||||
var log = 'Hero service injected successfully via heroServiceProvider';
|
||||
|
||||
// #docregion provider-8-ctor
|
||||
Provider8Component(HeroService heroService);
|
||||
// #enddocregion provider-8-ctor
|
||||
}
|
||||
|
||||
@Component(
|
||||
selector: 'provider-9',
|
||||
template: '{{log}}',
|
||||
// #docregion providers-9
|
||||
providers: const [
|
||||
const Provider(APP_CONFIG, useValue: heroDiConfig)]
|
||||
// #enddocregion providers-9
|
||||
)
|
||||
class Provider9Component implements OnInit {
|
||||
Map _config;
|
||||
String log;
|
||||
|
||||
// #docregion provider-9-ctor
|
||||
Provider9Component(@Inject(APP_CONFIG) this._config);
|
||||
// #enddocregion provider-9-ctor
|
||||
|
||||
@override
|
||||
void ngOnInit() {
|
||||
log = 'APP_CONFIG Application title is ${_config['title']}';
|
||||
}
|
||||
}
|
||||
|
||||
// Sample providers 1 to 7 illustrate a required logger dependency.
|
||||
// Optional logger, can be null.
|
||||
@Component(
|
||||
selector: 'provider-10',
|
||||
template: '{{log}}',
|
||||
providers: const [const Provider(Logger, useValue: null)]
|
||||
)
|
||||
class Provider10Component implements OnInit {
|
||||
final Logger _logger;
|
||||
String log;
|
||||
|
||||
/*
|
||||
// #docregion provider-10-ctor
|
||||
HeroService(@Optional() this._logger) {
|
||||
// #enddocregion provider-10-ctor
|
||||
*/
|
||||
Provider10Component(@Optional() this._logger) {
|
||||
const someMessage = 'Hello from the injected logger';
|
||||
// #docregion provider-10-ctor
|
||||
_logger?.log(someMessage);
|
||||
}
|
||||
// #enddocregion provider-10-ctor
|
||||
|
||||
@override
|
||||
void ngOnInit() {
|
||||
log = _logger == null ? 'Optional logger was not available' : _logger.logs[0];
|
||||
}
|
||||
}
|
||||
|
||||
@Component(
|
||||
selector: 'my-providers',
|
||||
template: '''
|
||||
<h2>Provider variations</h2>
|
||||
<div id="p1"><provider-1></provider-1></div>
|
||||
<div id="p3"><provider-3></provider-3></div>
|
||||
<div id="p4"><provider-4></provider-4></div>
|
||||
<div id="p5"><provider-5></provider-5></div>
|
||||
<div id="p6a"><provider-6a></provider-6a></div>
|
||||
<div id="p6b"><provider-6b></provider-6b></div>
|
||||
<div id="p7"><provider-7></provider-7></div>
|
||||
<div id="p8"><provider-8></provider-8></div>
|
||||
<div id="p9"><provider-9></provider-9></div>
|
||||
<div id="p10"><provider-10></provider-10></div>''',
|
||||
directives: const [
|
||||
Provider1Component,
|
||||
Provider3Component,
|
||||
Provider4Component,
|
||||
Provider5Component,
|
||||
Provider6aComponent,
|
||||
Provider6bComponent,
|
||||
Provider7Component,
|
||||
Provider8Component,
|
||||
Provider9Component,
|
||||
Provider10Component
|
||||
])
|
||||
class ProvidersComponent {}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
// Simulate a simple test
|
||||
// Reader should look to the testing chapter for the real thing
|
||||
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'heroes/hero.dart';
|
||||
import 'heroes/hero_list_component.dart';
|
||||
import 'heroes/hero_service.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-tests',
|
||||
template: '''
|
||||
<h2>Tests</h2>
|
||||
<p id="tests">Tests {{results['pass']}}: {{results['message']}}</p>
|
||||
''')
|
||||
class TestComponent {
|
||||
var results = runTests();
|
||||
}
|
||||
|
||||
class MockHeroService implements HeroService {
|
||||
final List<Hero> _heroes;
|
||||
MockHeroService(this._heroes);
|
||||
|
||||
@override
|
||||
List<Hero> getHeroes() => _heroes;
|
||||
}
|
||||
|
||||
/////////////////////////////////////
|
||||
dynamic runTests() {
|
||||
//#docregion spec
|
||||
var expectedHeroes = [new Hero(0, 'A'), new Hero(1, 'B')];
|
||||
var mockService = new MockHeroService(expectedHeroes);
|
||||
it('should have heroes when HeroListComponent created', () {
|
||||
var hlc = new HeroListComponent(mockService);
|
||||
expect(hlc.heroes.length).toEqual(expectedHeroes.length);
|
||||
});
|
||||
//#enddocregion spec
|
||||
return testResults;
|
||||
}
|
||||
//////////////////////////////////
|
||||
|
||||
// Fake Jasmine infrastructure
|
||||
String testName;
|
||||
dynamic testResults;
|
||||
dynamic expect(dynamic actual) => new ExpectResult(actual);
|
||||
|
||||
class ExpectResult {
|
||||
final actual;
|
||||
ExpectResult(this.actual);
|
||||
|
||||
void toEqual(dynamic expected) {
|
||||
testResults = actual == expected
|
||||
? {'pass': 'passed', 'message': testName}
|
||||
: {
|
||||
'pass': 'failed',
|
||||
'message': '$testName; expected $actual to equal $expected.'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
void it(String label, void test()) {
|
||||
testName = label;
|
||||
test();
|
||||
}
|
||||
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
class User {
|
||||
final String name;
|
||||
final bool isAuthorized;
|
||||
|
||||
User(this.name, [this.isAuthorized = false]);
|
||||
}
|
||||
|
||||
// Todo: get the user; don't 'new' it.
|
||||
final User _alice = new User('Alice', true);
|
||||
final User _bob = new User('Bob', false);
|
||||
|
||||
@Injectable()
|
||||
class UserService {
|
||||
User user;
|
||||
|
||||
UserService() : user = _bob;
|
||||
|
||||
// swap users
|
||||
User getNewUser() => user = user == _bob ? _alice : _bob;
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
# #docregion
|
||||
name: dependency_injection
|
||||
description: Dependency injection sample
|
||||
version: 0.0.1
|
||||
environment:
|
||||
sdk: '>=1.19.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: ^2.2.0
|
||||
dev_dependencies:
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
test: any
|
||||
transformers:
|
||||
- angular2:
|
||||
platform_directives:
|
||||
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
|
||||
platform_pipes:
|
||||
- 'package:angular2/common.dart#COMMON_PIPES'
|
||||
entry_points: web/main.dart
|
||||
- dart_to_js_script_rewriter
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
// A simple test
|
||||
// More details will be in the testing chapter.
|
||||
import 'package:angular2/core.dart';
|
||||
import 'package:dependency_injection/heroes/hero.dart';
|
||||
import 'package:dependency_injection/heroes/hero_list_component.dart';
|
||||
import 'package:dependency_injection/heroes/hero_service.dart';
|
||||
import 'package:test/test.dart';
|
||||
|
||||
///////////////////////////////////////
|
||||
////#docregion spec
|
||||
List<Hero> expectedHeroes = [
|
||||
new Hero(1, 'hero1'),
|
||||
new Hero(2, 'hero2', true)
|
||||
];
|
||||
|
||||
class HeroServiceMock implements HeroService {
|
||||
@override
|
||||
List<Hero> getHeroes() => expectedHeroes;
|
||||
}
|
||||
|
||||
var mockService = new HeroServiceMock();
|
||||
|
||||
void main() {
|
||||
test('should have heroes when HeroListComponent created', () {
|
||||
var hlc = new HeroListComponent(mockService);
|
||||
expect(hlc.heroes.length, expectedHeroes.length);
|
||||
});
|
||||
}
|
||||
//#enddocregion spec
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!--#docregion-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dependency Injection</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<script defer src="main.dart" type="application/dart"></script>
|
||||
<script defer src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import 'package:angular2/platform/browser.dart';
|
||||
|
||||
import 'package:dependency_injection/app_component.dart';
|
||||
|
||||
void main() {
|
||||
//#docregion bootstrap
|
||||
bootstrap(AppComponent);
|
||||
//#enddocregion bootstrap
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
// **WARNING**
|
||||
// To try out this version of the app, ensure that you update:
|
||||
// - web/index.html
|
||||
// - pubspec.yaml
|
||||
// to refer to this file instead of main.dart
|
||||
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
|
||||
import 'package:dependency_injection/app_component_1.dart';
|
||||
import 'package:dependency_injection/heroes/hero_service_1.dart';
|
||||
|
||||
void main() {
|
||||
bootstrap(AppComponent);
|
||||
}
|
||||
|
||||
void main_alt() {
|
||||
// #docregion bootstrap-discouraged
|
||||
bootstrap(AppComponent,
|
||||
[HeroService]); // DISCOURAGED (but works)
|
||||
// #enddocregion bootstrap-discouraged
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"title": "Displaying Data",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
template: '''
|
||||
<h1>{{title}}</h1>
|
||||
<h2>My favorite hero is: {{myHero.name}}</h2>
|
||||
<p>Heroes:</p>
|
||||
<ul>
|
||||
<li *ngFor="let hero of heroes">
|
||||
{{ hero.name }}
|
||||
</li>
|
||||
</ul>
|
||||
// #docregion message
|
||||
<p *ngIf="heroes.length > 3">There are many heroes!</p>
|
||||
// #enddocregion message
|
||||
''')
|
||||
class AppComponent {
|
||||
String title = 'Tour of Heroes';
|
||||
List<Hero> heroes = [
|
||||
new Hero(1, 'Windstorm'),
|
||||
new Hero(13, 'Bombasto'),
|
||||
new Hero(15, 'Magneta'),
|
||||
new Hero(20, 'Tornado')
|
||||
];
|
||||
Hero get myHero => heroes.first;
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
// #docregion template
|
||||
template: '''
|
||||
<h1>{{title}}</h1>
|
||||
<h2>My favorite hero is: {{myHero}}</h2>
|
||||
'''
|
||||
// #enddocregion template
|
||||
)
|
||||
class AppComponent {
|
||||
String title = 'Tour of Heroes';
|
||||
String myHero = 'Windstorm';
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
// #docregion template
|
||||
template: '''
|
||||
<h1>{{title}}</h1>
|
||||
<h2>My favorite hero is: {{myHero}}</h2>
|
||||
<p>Heroes:</p>
|
||||
<ul>
|
||||
// #docregion li
|
||||
<li *ngFor="let hero of heroes">
|
||||
{{ hero }}
|
||||
</li>
|
||||
// #enddocregion li
|
||||
</ul>
|
||||
'''
|
||||
// #enddocregion template
|
||||
)
|
||||
// #docregion class
|
||||
class AppComponent {
|
||||
String title = 'Tour of Heroes';
|
||||
List<String> heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
|
||||
String get myHero => heroes.first;
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
// #docregion import
|
||||
import 'hero.dart';
|
||||
// #enddocregion import
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
// #docregion template
|
||||
template: '''
|
||||
<h1>{{title}}</h1>
|
||||
<h2>My favorite hero is: {{myHero.name}}</h2>
|
||||
<p>Heroes:</p>
|
||||
<ul>
|
||||
<li *ngFor="let hero of heroes">
|
||||
{{ hero.name }}
|
||||
</li>
|
||||
</ul>
|
||||
'''
|
||||
// #enddocregion template
|
||||
)
|
||||
// #docregion class
|
||||
class AppComponent {
|
||||
String title = 'Tour of Heroes';
|
||||
// #docregion heroes
|
||||
List<Hero> heroes = [
|
||||
new Hero(1, 'Windstorm'),
|
||||
new Hero(13, 'Bombasto'),
|
||||
new Hero(15, 'Magneta'),
|
||||
new Hero(20, 'Tornado')
|
||||
];
|
||||
Hero get myHero => heroes.first;
|
||||
// #enddocregion heroes
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// #docregion
|
||||
class Hero {
|
||||
final int id;
|
||||
String name;
|
||||
|
||||
Hero(this.id, this.name);
|
||||
|
||||
String toString() => '$id: $name';
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
# #docregion
|
||||
name: displaying_data
|
||||
description: Displaying Data
|
||||
version: 0.0.1
|
||||
environment:
|
||||
sdk: '>=1.19.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: ^2.2.0
|
||||
dev_dependencies:
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
- angular2:
|
||||
platform_directives:
|
||||
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
|
||||
platform_pipes:
|
||||
- 'package:angular2/common.dart#COMMON_PIPES'
|
||||
entry_points: web/main.dart
|
||||
- dart_to_js_script_rewriter
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!--#docregion-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Displaying Data</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<script defer src="main.dart" type="application/dart"></script>
|
||||
<script defer src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<!-- #docregion body -->
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
<!-- #enddocregion body -->
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion final
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
// #enddocregion final
|
||||
|
||||
//import 'package:displaying_data/app_component_1.dart' as v1;
|
||||
//import 'package:displaying_data/app_component_2.dart' as v2;
|
||||
//import 'package:displaying_data/app_component_3.dart' as v3;
|
||||
// #docregion final
|
||||
import 'package:displaying_data/app_component.dart';
|
||||
|
||||
void main() {
|
||||
// #enddocregion final
|
||||
// pick one
|
||||
// bootstrap(v1.AppComponent);
|
||||
// bootstrap(v2.AppComponent);
|
||||
// bootstrap(v3.AppComponent);
|
||||
// #docregion final
|
||||
bootstrap(AppComponent);
|
||||
}
|
||||
// #enddocregion final
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"title": "Forms",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
// #docregion all
|
||||
class Hero {
|
||||
int number;
|
||||
String name;
|
||||
String power;
|
||||
String alterEgo;
|
||||
|
||||
Hero(this.number, this.name, this.power, [this.alterEgo]);
|
||||
|
||||
String toString() => '$number: $name ($alterEgo). Super power: $power';
|
||||
}
|
||||
// #enddocregion all
|
||||
|
||||
main() {
|
||||
// #docregion newhero
|
||||
var myHero = new Hero(
|
||||
42, 'SkyDog', 'Fetch any object at any distance', 'Leslie Rollover');
|
||||
print('My hero is ${myHero.name}.'); // "My hero is SkyDog."
|
||||
// #enddocregion newhero
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion no-todo
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
|
||||
const List<String> _powers = const [
|
||||
'Really Smart',
|
||||
'Super Flexible',
|
||||
'Super Hot',
|
||||
'Weather Changer'
|
||||
];
|
||||
|
||||
@Component(
|
||||
selector: 'hero-form',
|
||||
templateUrl: 'hero_form_component.html')
|
||||
class HeroFormComponent {
|
||||
List<String> get powers => _powers;
|
||||
// #docregion submitted
|
||||
bool submitted = false;
|
||||
// #enddocregion submitted
|
||||
Hero model = new Hero(18, 'Dr IQ', _powers[0], 'Chuck Overstreet');
|
||||
// #enddocregion no-todo
|
||||
// TODO: Remove this when we're done
|
||||
String get diagnostic => 'DIAGNOSTIC: $model';
|
||||
// #docregion no-todo
|
||||
|
||||
// #docregion submitted
|
||||
onSubmit() {
|
||||
submitted = true;
|
||||
}
|
||||
// #enddocregion submitted
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!-- #docplaster ... -->
|
||||
<!-- #docregion -->
|
||||
<div class="container">
|
||||
<!-- #docregion edit-div -->
|
||||
<div [hidden]="submitted">
|
||||
<h1>Hero Form</h1>
|
||||
<!-- #docregion ngSubmit -->
|
||||
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
|
||||
<!-- #enddocregion ngSubmit -->
|
||||
<!-- #enddocregion edit-div -->
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<!-- #docregion name-with-error-msg -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name"
|
||||
ngControl="name" #name="ngForm" >
|
||||
<div [hidden]="name.valid" class="alert alert-danger">
|
||||
Name is required
|
||||
</div>
|
||||
<!-- #enddocregion name-with-error-msg -->
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control"
|
||||
[(ngModel)]="model.alterEgo"
|
||||
ngControl="alterEgo" >
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required
|
||||
[(ngModel)]="model.power"
|
||||
ngControl="power" >
|
||||
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- #docregion submit-button -->
|
||||
<button type="submit" class="btn btn-default"
|
||||
[disabled]="!heroForm.form.valid">Submit</button>
|
||||
<!-- #enddocregion submit-button -->
|
||||
<!-- #docregion edit-div -->
|
||||
</form>
|
||||
</div>
|
||||
<!-- #enddocregion edit-div -->
|
||||
|
||||
<!-- #docregion submitted -->
|
||||
<div [hidden]="!submitted">
|
||||
<h2>You submitted the following:</h2>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Name</div>
|
||||
<div class="col-xs-9 pull-left">{{ model.name }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Alter Ego</div>
|
||||
<div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-3">Power</div>
|
||||
<div class="col-xs-9 pull-left">{{ model.power }}</div>
|
||||
</div>
|
||||
<br>
|
||||
<button class="btn btn-default" (click)="submitted=false">Edit</button>
|
||||
</div>
|
||||
<!-- #enddocregion submitted -->
|
||||
</div>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Component(selector: 'hero-form', template: 'Hero form will go here')
|
||||
class HeroFormComponent {}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<div class="container">
|
||||
<h1>Hero Form</h1>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<div class="container">
|
||||
<h1>Hero Form</h1>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<!-- #docregion ngControl-1 -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name"
|
||||
ngControl="name" >
|
||||
<!-- #enddocregion ngControl-1 -->
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control"
|
||||
[(ngModel)]="model.alterEgo"
|
||||
ngControl="alterEgo" >
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required
|
||||
[(ngModel)]="model.power"
|
||||
ngControl="power" >
|
||||
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<div class="container">
|
||||
<h1>Hero Form</h1>
|
||||
<form>
|
||||
<!-- #docregion ngModel-2 -->
|
||||
{{diagnostic}}
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name" >
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control"
|
||||
[(ngModel)]="model.alterEgo">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required
|
||||
[(ngModel)]="model.power">
|
||||
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- #enddocregion ngModel-2 -->
|
||||
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<div class="container">
|
||||
<h1>Hero Form</h1>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<!-- #docregion ngModel-1 -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="model.name" >
|
||||
TODO: remove this: {{model.name}}
|
||||
<!-- #enddocregion ngModel-1 -->
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- #docregion powers -->
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required>
|
||||
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- #enddocregion powers -->
|
||||
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<div class="container">
|
||||
<h1>Hero Form</h1>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<!-- #docregion ngModel-3 -->
|
||||
<input type="text" class="form-control" required
|
||||
[ngModel]="model.name"
|
||||
(ngModelChange)="model.name = $event" >
|
||||
TODO: remove this: {{model.name}}
|
||||
<!-- #enddocregion ngModel-3 -->
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="alterEgo">Alter Ego</label>
|
||||
<input type="text" class="form-control"
|
||||
[(ngModel)]="model.alterEgo">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="power">Hero Power</label>
|
||||
<select class="form-control" required
|
||||
[(ngModel)]="model.power">
|
||||
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue