Merge remote-tracking branch 'origin/master'
# Conflicts: # public/_data.json # public/_includes/_hero-home.jade # public/docs/ts/latest/_data.json # public/docs/ts/latest/cookbook/component-communication.jade # public/docs/ts/latest/cookbook/dependency-injection.jade # public/docs/ts/latest/guide/_data.json # public/docs/ts/latest/guide/attribute-directives.jade # public/docs/ts/latest/guide/dependency-injection.jade # public/docs/ts/latest/guide/displaying-data.jade # public/docs/ts/latest/guide/forms.jade # public/docs/ts/latest/guide/index.jade # public/docs/ts/latest/guide/style-guide.jade # public/docs/ts/latest/quickstart.jade # public/docs/ts/latest/tutorial/toh-pt4.jade # public/docs/ts/latest/tutorial/toh-pt5.jade # public/news.jade # public/resources/index.jade
This commit is contained in:
commit
5f1f27e09c
|
@ -20,7 +20,7 @@ _.*
|
|||
public/docs/xref-*.*
|
||||
_zip-output
|
||||
www
|
||||
/npm-debug.log
|
||||
npm-debug.log
|
||||
npm-debug.log.*
|
||||
*.plnkr.html
|
||||
plnkr.html
|
||||
|
|
|
@ -62,7 +62,7 @@ For example, all of the TypeScript docs are in `public/docs/ts/latest`, e.g.
|
|||
If you are only going to work on a specific part of the docs, such as the dev guide, then you can use one of the more specific gulp tasks to only watch those parts of the file system:
|
||||
|
||||
* `gulp serve-and-sync` : watch all the local Jade/Sass files, the API source and examples, and the dev guide files
|
||||
* `gulp serve-and-sync-api-docs` : watch only the API source and example files
|
||||
* `gulp serve-and-sync-api` : watch only the API source and example files
|
||||
* `gulp serve-and-sync-devguide` : watch only the dev guide files
|
||||
* `gulp build-and-serve` : watch only the local Jade/Sass files
|
||||
|
||||
|
|
|
@ -57,6 +57,10 @@
|
|||
{
|
||||
"source": "/dart",
|
||||
"destination": "/docs/dart/latest/index.html"
|
||||
},
|
||||
{
|
||||
"source": "/styleguide",
|
||||
"destination": "/docs/ts/latest/guide/style-guide.html"
|
||||
}
|
||||
],
|
||||
"ignore": [
|
||||
|
|
55
gulpfile.js
55
gulpfile.js
|
@ -109,10 +109,12 @@ gulp.task('run-e2e-tests', function() {
|
|||
// with the corresponding apps that they should run under. Then run
|
||||
// each app/spec collection sequentially.
|
||||
function findAndRunE2eTests(filter) {
|
||||
var lang = (argv.lang || '(ts|js)').toLowerCase();
|
||||
if (lang === 'all') { lang = '(ts|js|dart)'; }
|
||||
var startTime = new Date().getTime();
|
||||
// create an output file with header.
|
||||
var outputFile = path.join(process.cwd(), 'protractor-results.txt');
|
||||
var header = "Protractor example results for: " + (new Date()).toLocaleString() + "\n\n";
|
||||
var header = "Protractor example results for " + lang + " on " + (new Date()).toLocaleString() + "\n\n";
|
||||
if (filter) {
|
||||
header += ' Filter: ' + filter.toString() + '\n\n';
|
||||
}
|
||||
|
@ -128,6 +130,10 @@ function findAndRunE2eTests(filter) {
|
|||
fsExtra.copySync(srcConfig, destConfig);
|
||||
// get all of the examples under each dir where a pcFilename is found
|
||||
examplePaths = getExamplePaths(specPath, true);
|
||||
// Filter by language
|
||||
examplePaths = examplePaths.filter(function (fn) {
|
||||
return fn.match('/'+lang+'$') != null;
|
||||
});
|
||||
if (filter) {
|
||||
examplePaths = examplePaths.filter(function (fn) {
|
||||
return fn.match(filter) != null;
|
||||
|
@ -142,7 +148,9 @@ function findAndRunE2eTests(filter) {
|
|||
var status = { passed: [], failed: [] };
|
||||
return exeConfigs.reduce(function (promise, combo) {
|
||||
return promise.then(function () {
|
||||
return runE2eTests(combo.examplePath, combo.protractorConfigFilename, outputFile).then(function(ok) {
|
||||
var isDart = combo.examplePath.indexOf('/dart') > -1;
|
||||
var runTests = isDart ? runE2eDartTests : runE2eTsTests;
|
||||
return runTests(combo.examplePath, combo.protractorConfigFilename, outputFile).then(function(ok) {
|
||||
var arr = ok ? status.passed : status.failed;
|
||||
arr.push(combo.examplePath);
|
||||
})
|
||||
|
@ -158,12 +166,16 @@ function findAndRunE2eTests(filter) {
|
|||
// start the example in appDir; then run protractor with the specified
|
||||
// fileName; then shut down the example. All protractor output is appended
|
||||
// to the outputFile.
|
||||
function runE2eTests(appDir, protractorConfigFilename, outputFile ) {
|
||||
function runE2eTsTests(appDir, protractorConfigFilename, outputFile) {
|
||||
// start the app
|
||||
var appRunSpawnInfo = spawnExt('npm',['run','http-server:e2e', '--', '-s' ], { cwd: appDir });
|
||||
var tscRunSpawnInfo = spawnExt('npm',['run','tsc'], { cwd: appDir });
|
||||
|
||||
return tscRunSpawnInfo.promise.then(function(data) {
|
||||
return runProtractor(tscRunSpawnInfo.promise, appDir, appRunSpawnInfo, protractorConfigFilename, outputFile);
|
||||
}
|
||||
|
||||
function runProtractor(prepPromise, appDir, appRunSpawnInfo, protractorConfigFilename, outputFile) {
|
||||
return prepPromise.then(function (data) {
|
||||
// start protractor
|
||||
var pcFilename = path.resolve(protractorConfigFilename); // need to resolve because we are going to be running from a different dir
|
||||
var exePath = path.join(process.cwd(), "./node_modules/.bin/");
|
||||
|
@ -175,7 +187,7 @@ function runE2eTests(appDir, protractorConfigFilename, outputFile ) {
|
|||
// Ugh... proc.kill does not work properly on windows with child processes.
|
||||
// appRun.proc.kill();
|
||||
treeKill(appRunSpawnInfo.proc.pid);
|
||||
return true;
|
||||
return !data;
|
||||
}).fail(function(err) {
|
||||
// Ugh... proc.kill does not work properly on windows with child processes.
|
||||
// appRun.proc.kill();
|
||||
|
@ -184,19 +196,39 @@ function runE2eTests(appDir, protractorConfigFilename, outputFile ) {
|
|||
});
|
||||
}
|
||||
|
||||
// start the server in appDir/build/web; then run protractor with the specified
|
||||
// fileName; then shut down the example. All protractor output is appended
|
||||
// to the outputFile.
|
||||
function runE2eDartTests(appDir, protractorConfigFilename, outputFile) {
|
||||
var deployDir = path.resolve(path.join(appDir, 'build/web'));
|
||||
gutil.log('AppDir for Dart e2e: ' + appDir);
|
||||
gutil.log('Deploying from: ' + deployDir);
|
||||
|
||||
var appRunSpawnInfo = spawnExt('npm', ['run', 'http-server:e2e', '--', deployDir, '-s'], { cwd: EXAMPLES_PATH });
|
||||
if (!appRunSpawnInfo.proc.pid) {
|
||||
gutil.log('http-server failed to launch over ' + deployDir);
|
||||
return false;
|
||||
}
|
||||
var pubUpgradeSpawnInfo = spawnExt('pub', ['upgrade'], { cwd: appDir });
|
||||
var prepPromise = pubUpgradeSpawnInfo.promise.then(function (data) {
|
||||
return spawnExt('pub', ['build'], { cwd: appDir }).promise;
|
||||
});
|
||||
return runProtractor(prepPromise, appDir, appRunSpawnInfo, protractorConfigFilename, outputFile);
|
||||
}
|
||||
|
||||
function reportStatus(status) {
|
||||
gutil.log('Suites passed:');
|
||||
status.passed.forEach(function(val) {
|
||||
gutil.log(' ' + val);
|
||||
});
|
||||
|
||||
gutil.log('Suites failed:');
|
||||
status.failed.forEach(function(val) {
|
||||
gutil.log(' ' + val);
|
||||
});
|
||||
|
||||
if (status.failed.length == 0) {
|
||||
gutil.log('All tests passed');
|
||||
} else {
|
||||
gutil.log('Suites failed:');
|
||||
status.failed.forEach(function (val) {
|
||||
gutil.log(' ' + val);
|
||||
});
|
||||
}
|
||||
gutil.log('Elapsed time: ' + status.elapsedTime + ' seconds');
|
||||
}
|
||||
|
@ -808,7 +840,8 @@ function devGuideExamplesWatch(shredOptions, postShredAction) {
|
|||
// removed this version because gulp.watch has the same glob issue that dgeni has.
|
||||
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
|
||||
// gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) {
|
||||
var files = globby.sync( [includePattern], { ignore: [ '**/node_modules/**', '**/_fragments/**']});
|
||||
var files = globby.sync( [includePattern], { ignore: [ '**/node_modules/**', '**/_fragments/**',
|
||||
'**/dart/build/**' ]});
|
||||
gulp.watch([files], {readDelay: 500}, function (event, done) {
|
||||
gutil.log('Dev Guide example changed')
|
||||
gutil.log('Event type: ' + event.type); // added, changed, or deleted
|
||||
|
|
|
@ -290,6 +290,7 @@
|
|||
"name": "Stephen Fluin",
|
||||
"picture": "/resources/images/bios/stephenfluin.jpg",
|
||||
"twitter": "stephenfluin",
|
||||
"website": "https://plus.google.com/+stephenfluin",
|
||||
"bio": "Stephen is a Developer Advocate working on the Angular team. Before joining Google, he was a Google Expert. Stephen loves to help enterprises use technology more effectively.",
|
||||
"type": "Google"
|
||||
},
|
||||
|
|
|
@ -17,8 +17,8 @@
|
|||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "Apache",
|
||||
"url": "http://www.apache.org/licenses/LICENSE-2.0.html"
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
|
||||
}
|
||||
],
|
||||
"bugs": {
|
||||
|
@ -34,7 +34,7 @@
|
|||
"codelyzer": "0.0.18",
|
||||
"del": "^1.2.0",
|
||||
"dgeni": "^0.4.0",
|
||||
"dgeni-packages": "^0.11.1",
|
||||
"dgeni-packages": "^0.13.0",
|
||||
"diff": "^2.1.3",
|
||||
"fs-extra": "^0.24.0",
|
||||
"glob": "^5.0.14",
|
||||
|
|
|
@ -47,9 +47,5 @@
|
|||
|
||||
"tooling": {
|
||||
"title": "工具与库"
|
||||
},
|
||||
|
||||
"all-resources": {
|
||||
"title": "资源"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,11 +7,3 @@ header(class="background-sky")
|
|||
|
||||
h2 点击“译文”可显示/隐藏“原文”,点击“原文”可隐藏自身
|
||||
|
||||
.banner.banner-floaty
|
||||
.banner-ng-annoucement
|
||||
div(class="banner-text")
|
||||
p Watch the ng-conf Live Stream May 4th-6th.
|
||||
p 观看 ng-conf 实时视频 May 4th-6th.
|
||||
div(class="banner-button")
|
||||
a(href="https://www.ng-conf.org/#/extended" target="_blank" class="button md-button") View Live Stream
|
||||
a(href="https://www.ng-conf.org/#/extended" target="_blank" class="button md-button") 查看实时视频
|
||||
|
|
|
@ -4,6 +4,12 @@
|
|||
- var capitalize = function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); }
|
||||
- var useBadges = docType || stability;
|
||||
|
||||
// renamer :: String -> String
|
||||
// Renames `Let` and `Var` into `Const`
|
||||
- var renamer = function renamer(docType) {
|
||||
- return (docType === 'Let' || docType === 'Var') ? 'Const' : docType
|
||||
- }
|
||||
|
||||
if current.path[4] && current.path[3] == 'api'
|
||||
- var textFormat = 'is-standard-case'
|
||||
|
||||
|
@ -14,12 +20,15 @@ header(class="hero background-sky")
|
|||
span(class="badges")
|
||||
if docType
|
||||
span(class="status-badge").
|
||||
#{capitalize(docType)}
|
||||
#{renamer(capitalize(docType))}
|
||||
if stability
|
||||
span(layout="row" class="status-badge")
|
||||
// badge circle is filled based on stability by matching a css selector in _hero.scss
|
||||
span(class="status-circle status-#{stability}")
|
||||
span Stability: #{capitalize(stability)}
|
||||
if security
|
||||
span(class="status-badge security-risk-badge").
|
||||
Security Risk
|
||||
|
||||
if subtitle
|
||||
h2.hero-subtitle.text-subhead #{subtitle}
|
||||
|
|
|
@ -12,12 +12,18 @@ script(src="/resources/js/vendor/angular-animate.min.js")
|
|||
script(src="/resources/js/vendor/angular-aria.min.js")
|
||||
script(src="/resources/js/vendor/angular-material.min.js")
|
||||
|
||||
<!-- Firebase -->
|
||||
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
|
||||
|
||||
<!-- AngularFire -->
|
||||
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
|
||||
|
||||
|
||||
<!-- Angular.io Site JS -->
|
||||
script(src="/resources/js/translate.js")
|
||||
script(src="/resources/js/site.js")
|
||||
script(src="/resources/js/controllers/app-controller.js")
|
||||
script(src="/resources/js/controllers/resources-controller.js")
|
||||
script(src="/resources/js/directives/cheatsheet.js")
|
||||
script(src="/resources/js/directives/api-list.js")
|
||||
script(src="/resources/js/directives/bio.js")
|
||||
|
|
|
@ -1,5 +1,56 @@
|
|||
//- Mixins and associated functions
|
||||
|
||||
//- _docsFor: used to identify the language this version of the docs if for;
|
||||
//- Should be one of: 'ts', 'dart' or 'js'. Set in lang specific _util-fns file.
|
||||
- var _docsFor = '';
|
||||
|
||||
//- Should match `_docsFor`, but in this case provides the full capitalized
|
||||
//- name of the language.
|
||||
- var _Lang = 'TypeScript';
|
||||
|
||||
//- Simple "macros" used via interpolation in text:
|
||||
//- e.g., the #{_priv}el variable has an `@Input` #{_decorator}.
|
||||
|
||||
//- Use #{_decorator} whereever the word "decorator" is expected, provided it is not
|
||||
//- preceded by the article "a". (E.g., will be "annotation" for Dart)
|
||||
- var _decorator = 'decorator';
|
||||
|
||||
//- Articles (which toggle between 'a' and 'an'). Used for, e.g.,
|
||||
//- array vs. list; decorator vs. annotation.
|
||||
- var _a = 'a';
|
||||
- var _an = 'an';
|
||||
|
||||
//- TS arrays vs. Dart lists
|
||||
- var _array = 'array';
|
||||
//- Deprecate now that we have the articles _a and _an
|
||||
- var _an_array = 'an array';
|
||||
|
||||
//- Promise vs. Future, etc
|
||||
- var _Promise = 'Promise';
|
||||
- var _Observable = 'Observable';
|
||||
|
||||
//- Location of sample code
|
||||
- var _liveLink = 'live link';
|
||||
|
||||
|
||||
//- Used to prefix identifiers that are private. In Dart this will be '_'.
|
||||
- var _priv = '';
|
||||
|
||||
//- Use to conditionally include the block that follows +ifDocsFor(...).
|
||||
//- Generally favor use of Jade named blocks instead. ifDocsFor is convenient
|
||||
//- for prose that should appear only in one language version.
|
||||
mixin ifDocsFor(lang)
|
||||
if _docsFor.toLowerCase() === lang.toLowerCase()
|
||||
block
|
||||
|
||||
//- Use to map inlined (prose) TS paths into, say, Dart paths via the
|
||||
//- adjustExamplePath transformer function.
|
||||
mixin adjExPath(path)
|
||||
if adjustExamplePath
|
||||
| #{adjustExamplePath(path)}
|
||||
else
|
||||
| #{path}
|
||||
|
||||
mixin includeShared(filePath, region)
|
||||
- var newPath = translatePath(filePath, region);
|
||||
!=partial(newPath)
|
||||
|
@ -11,6 +62,7 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
|
|||
- var frag = getFrag(filePath, region);
|
||||
- var defaultFormat = frag.split('\n').length > 2 ? "linenums" : "";
|
||||
- var format = attributes.format || defaultFormat;
|
||||
- if (attributes.format === '.') format = '';
|
||||
- var avoid = !!attributes.avoid;
|
||||
|
||||
if (title)
|
||||
|
@ -21,10 +73,49 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
|
|||
code-example(language="#{language}" format="#{format}")
|
||||
!= styleString(frag, stylePatterns)
|
||||
|
||||
//- Like makeExample, but the first argument is a path that is
|
||||
//- relative to the project root. Unless title is defined,
|
||||
//- the project relative path will be used.
|
||||
mixin makeProjExample(projRootRelativePath, region, title, stylePatterns)
|
||||
- var relPath = projRootRelativePath.trim();
|
||||
- var filePath = getExampleName() + '/ts/' + relPath;
|
||||
- if (!title) {
|
||||
- // Is path like styles.1.css? Then drop the '.1' qualifier:
|
||||
- var matches = relPath.match(/^(.*)\.\d(\.\w+)$/);
|
||||
- title = matches ? matches[1] + matches[2] : relPath;
|
||||
- }
|
||||
+makeExample(filePath, region, title, stylePatterns)
|
||||
|
||||
//- Like makeExample, but doesn't show line numbers, and the first
|
||||
//- argument is a path that is relative to the example project root.
|
||||
//- Unless title is defined, the project relative path will be used.
|
||||
//- Title will always end with a phrase in parentheses; if no such
|
||||
//- ending is given, then the title will be suffixed with
|
||||
//- either "(excerpt)", or "(#{region})" when region is defined.
|
||||
mixin makeExcerpt(projRootRelativePath, region, title, stylePatterns)
|
||||
- var relPath = projRootRelativePath.trim();
|
||||
- var filePath = getExampleName() + '/ts/' + relPath;
|
||||
- if (!title) {
|
||||
- // Is path like styles.1.css? Then drop the '.1' qualifier:
|
||||
- var matches = relPath.match(/^(.*)\.\d(\.\w+)$/);
|
||||
- title = matches ? matches[1] + matches[2] : relPath;
|
||||
- }
|
||||
- var excerpt = region || 'excerpt';
|
||||
- if (title && !title.match(/\([\w ]+\)$/)) title = title + ' (' + excerpt + ')';
|
||||
+makeExample(filePath, region, title, stylePatterns)(format='.')
|
||||
|
||||
//- Extract the doc example name from `current`.
|
||||
- var getExampleName = function() {
|
||||
- var dir = current.path[current.path.length - 1];
|
||||
- return dir == 'latest' ? current.source : dir;
|
||||
- };
|
||||
|
||||
mixin makeTabs(filePaths, regions, tabNames, stylePatterns)
|
||||
- filePaths = strSplit(filePaths);
|
||||
- if (adjustExamplePath) filePaths = filePaths.map(adjustExamplePath);
|
||||
- regions = strSplit(regions, filePaths.length);
|
||||
- tabNames = strSplit(tabNames, filePaths.length);
|
||||
- if (adjustExampleTitle) tabNames = tabNames.map(adjustExampleTitle);
|
||||
|
||||
code-tabs
|
||||
each filePath,index in filePaths
|
||||
|
@ -77,7 +168,7 @@ script.
|
|||
el.style.display = isVerbose ? 'block' : 'none';
|
||||
var el = document.querySelector('button.verbose.on');
|
||||
el.style.display = isVerbose ? 'none' : 'block';
|
||||
|
||||
|
||||
CCSStylesheetRuleStyle('main','.l-verbose-section', 'display',
|
||||
isVerbose ? 'block' : 'none');
|
||||
}
|
||||
|
|
|
@ -1,200 +0,0 @@
|
|||
div
|
||||
p(class="text-body") Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
|
||||
div(style="display: flex; justify-content: space-between; flex-wrap: wrap;")
|
||||
div
|
||||
h1 Books
|
||||
div(class="resources")
|
||||
h3 Packt Publishing
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/switching-angular-2") Switching to Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/mastering-angular-2-components") Mastering Angular 2 Components
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-blueprints") Angular 2 Blueprints
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-example") Angular 2 By Examples
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/mastering-angular-2-components") Angular 2 Components
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/learning-angular-2-net-developers") Learning Angular 2 for .NET Developers
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-test-driven-development") Angular 2 Test-driven Development
|
||||
|
||||
h3 Manning Publications
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/angular-2-in-action") Angular 2 In Action
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/angular-2-development-with-typescript") Angular 2 Development with TypeScript
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/testing-angular-2-applications") Testing Angular 2 Applications
|
||||
|
||||
h3 O'Reilly Media
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://www.oreilly.com/pub/e/3693") Angular 2 Web Development with TypeScript
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://shop.oreilly.com/product/0636920051824.do") Migrating to Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://shop.oreilly.com/product/9781785886201.do") Switching to Angular 2
|
||||
|
||||
h3 Self-published
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://ngcourse.rangle.io/") Rangle.io: ngCourse 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.ng-book.com/2/") ng-book 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://leanpub.com/angular2-book") Angular 2 Book
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://books.ninja-squad.com/angular2") Become a ninja with Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://leanpub.com/practical-angular-2") Practical Angular 2
|
||||
|
||||
div
|
||||
h1 Training
|
||||
div(class="resources")
|
||||
h3 Rangle.io
|
||||
ul(class="publisher")
|
||||
li(class="course")
|
||||
a(class="title text-body" href="http://rangle.io/services/javascript-training/training-angular1-angular2-with-ngupgrade/") Angular 2 Online Training
|
||||
|
||||
h3 Pluralsight
|
||||
ul(class="publisher")
|
||||
li(class="course")
|
||||
a(class="title text-body" href="https://www.pluralsight.com/courses/angular-2-first-look") Angular 2: First Look
|
||||
li(class="course")
|
||||
a(class="title text-body" href="https://www.pluralsight.com/courses/angular-2-getting-started") Angular 2: Getting Started
|
||||
|
||||
h3 Udemy
|
||||
ul(class="publisher")
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/the-complete-guide-to-angular-2/?utm_content=_._ag_angular%202_._ad_47395956109_._de_c_._dm__._lo_9061189_._&matchtype=b&gclid=CjwKEAjww9O3BRDp1tq0jIP023YSJAB0-j1S4bFN4tudrjzZO_-ABNAfFQJrhrKo7KX1AnV-8yjV-hoCRrDw_wcB&utm_medium=udemyads&k_clickid=dce13cd7-9844-44dc-9967-020275b637c9_408_GOOGLE_NEW-AW-PROS-TECH-Dev-angular-2-EN-ENG_._ci_756150_._sl_ENG_._vi_TECH_._sd_All_._la_EN_.__angular%202_%2Bangular%20%2B2_b_47395956109_c&utm_campaign=NEW-AW-PROS-TECH-Dev-angular-2-EN-ENG_._ci_756150_._sl_ENG_._vi_TECH_._sd_All_._la_EN_._&utm_source=adwords&utm_term=_._pl__._pd__._ti_kwd-68757357257_._kw_%2Bangular%20%2B2_._&pmtag=72bf13dc-329c-411c-b381-a6143735b9dc") The Complete Guide to Angular 2
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/angular-2-tutorial-for-beginners/") Angular 2 With TypeScript for Beginners
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/angular-2-tutorial-for-beginners/") Angular 2 Jumpstart with Typescript
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/angular-2-fundamentals/") Angular 2 Fundamentals
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/angular-2-master-class-with-alejandro-rangel/") Angular 2 Master Class
|
||||
li
|
||||
a(class="title text-body" href="https://www.udemy.com/introduction-to-angular2/") Angular 2 Demystified
|
||||
|
||||
h3 egghead.io
|
||||
ul(class="publisher")
|
||||
li
|
||||
a(class="title text-body" href="https://egghead.io/technologies/angular2") Angular 2 videos
|
||||
|
||||
h3 Workshops & Onsite Training Vendors
|
||||
ul(class="publisher")
|
||||
li
|
||||
a(class="title text-body" href="http://rangle.io/services/javascript-training/angular2-training/") Rangle.io
|
||||
li
|
||||
a(class="title text-body" href="http://oasisdigital.com/training") Oasis Digital
|
||||
li
|
||||
a(class="title text-body" href="http://thoughtram.io/") Thoughtram
|
||||
|
||||
div
|
||||
h1 Tooling and Libraries
|
||||
div(class="resources")
|
||||
h3 Tooling
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="https://augury.rangle.io/") Augury
|
||||
li
|
||||
a(class="text-body" href="https://github.com/angular/universal") Angular Universal
|
||||
li
|
||||
a(class="text-body" href="https://github.com/johnpapa/lite-server") Lite-server
|
||||
li
|
||||
a(class="text-body" href="https://github.com/mgechev/codelyzer") Codelyzer
|
||||
|
||||
h3 IDEs
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="http://code.visualstudio.com/") Visual Studio Code
|
||||
li
|
||||
a(class="text-body" href="https://www.jetbrains.com/webstorm/") WebStorm
|
||||
li
|
||||
a(class="text-body" href="https://www.jetbrains.com/idea/") IntelliJ IDEA
|
||||
|
||||
h3 Data Libraries
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="https://www.firebase.com/") Firebase
|
||||
li
|
||||
a(class="text-body" href="https://www.meteor.com/") Meteor
|
||||
li
|
||||
a(class="text-body" href="http://mean.io/") MEAN
|
||||
|
||||
h3 UI Components
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="https://github.com/angular/material2") Angular Material 2
|
||||
li
|
||||
a(class="text-body" href="http://www.primefaces.org/primeng/") Prime Faces
|
||||
li
|
||||
a(class="text-body" href="http://www.telerik.com/blogs/what-to-expect-in-2016-for-kendo-ui-with-angular-2-and-more") Kendo UI
|
||||
li
|
||||
a(class="text-body" href="http://ng-lightning.github.io/ng-lightning/") ng-lightening
|
||||
li
|
||||
a(class="text-body" href="http://wijmo.com/products/wijmo-5/") Wijmo
|
||||
li
|
||||
a(class="text-body" href="https://angular-ui.github.io/bootstrap/") Bootstrap UI
|
||||
li
|
||||
a(class="text-body" href="https://vaadin.com/home") Vaadin
|
||||
|
||||
h3 Cross-Platform Development
|
||||
ul
|
||||
li
|
||||
a(class="text-body" href="https://github.com/NativeScript/nativescript-angular") NativeScript
|
||||
li
|
||||
a(class="text-body" href="http://angular.github.io/react-native-renderer/") React Native
|
||||
li
|
||||
a(class="text-body" href="http://ionicframework.com/docs/v2/") Ionic
|
||||
li
|
||||
a(class="text-body" href="http://github.com/angular/angular-electron") Electron
|
||||
li
|
||||
a(class="text-body" href="http://github.com/preboot/angular2-universal-windows-app") Windows (UWP)
|
||||
|
||||
div
|
||||
h1 Communities
|
||||
div(class="resources")
|
||||
p(class="text-body") Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
|
||||
|
||||
h3 Podcasts
|
||||
ul(class="podcasts")
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://angularair.com/") AngularAir
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://javascriptair.com/") JavaScript Air
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://devchat.tv/adventures-in-angular") Adventures in Angular
|
||||
|
||||
|
||||
h3 Communities
|
||||
ul(class="communities")
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://angularbeers.org/") Angular Beers
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://angularcamp.org/") Angular Camp
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://www.meetup.com/find/?allMeetups=false&keywords=angularjs&radius=Infinity&userFreeform=94043&gcResults=Mountain+View%2C+CA+94043%2C+USA%3AUS%3ACalifornia%3ASanta+Clara+County%3AMountain+View%3Anull%3A94043%3A37.428434%3A-122.07238159999997&change=yes&sort=default") Angular Meetups
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
div(class="resources")
|
||||
p(class="text-body") Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
|
||||
|
||||
h3 Packt Publishing
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/switching-angular-2") Switching to Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/mastering-angular-2-components") Mastering Angular 2 Components
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-blueprints") Angular 2 Blueprints
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-example") Angular 2 By Examples
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/mastering-angular-2-components") Angular 2 Components
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/learning-angular-2-net-developers") Learning Angular 2 for .NET Developers
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.packtpub.com/web-development/angular-2-test-driven-development") Angular 2 Test-driven Development
|
||||
|
||||
h3 Manning Publications
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/angular-2-in-action") Angular 2 In Action
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/angular-2-development-with-typescript") Angular 2 Development with TypeScript
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.manning.com/books/testing-angular-2-applications") Testing Angular 2 Applications
|
||||
|
||||
h3 O'Reilly Media
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://www.oreilly.com/pub/e/3693") Angular 2 Web Development with TypeScript
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://shop.oreilly.com/product/0636920051824.do") Migrating to Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://shop.oreilly.com/product/9781785886201.do") Switching to Angular 2
|
||||
|
||||
h3 Self-published
|
||||
ul(class="publisher")
|
||||
li(class="book")
|
||||
a(class="title text-body" href="http://ngcourse.rangle.io/") Rangle.io: ngCourse 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://www.ng-book.com/2/") ng-book 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://leanpub.com/angular2-book") Angular 2 Book
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://books.ninja-squad.com/angular2") Become a ninja with Angular 2
|
||||
li(class="book")
|
||||
a(class="title text-body" href="https://leanpub.com/practical-angular-2") Practical Angular 2
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
div(class="resources")
|
||||
p(class="text-body") Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
|
||||
|
||||
h3 Podcasts
|
||||
ul(class="podcasts")
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://angularair.com/") AngularAir
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://javascriptair.com/") JavaScript Air
|
||||
li(class="podcast")
|
||||
a(class="text-body" href="https://devchat.tv/adventures-in-angular") Adventures in Angular
|
||||
|
||||
|
||||
h3 Communities
|
||||
ul(class="communities")
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://angularbeers.org/") Angular Beers
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://angularcamp.org/") Angular Camp
|
||||
li(class="community")
|
||||
a(class="text-body" href="http://www.meetup.com/find/?allMeetups=false&keywords=angularjs&radius=Infinity&userFreeform=94043&gcResults=Mountain+View%2C+CA+94043%2C+USA%3AUS%3ACalifornia%3ASanta+Clara+County%3AMountain+View%3Anull%3A94043%3A37.428434%3A-122.07238159999997&change=yes&sort=default") Angular Meetups
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ _test-output
|
|||
_temp
|
||||
**/ts/**/*.js
|
||||
**/ts-snippets/**/*.js
|
||||
**/ts/**/*.d.ts
|
||||
*.d.ts
|
||||
|
||||
!**/*e2e-spec.js
|
||||
!systemjs.config.1.js
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
// #docregion import
|
||||
import {Component} from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
// #enddocregion import
|
||||
import {HeroListComponent} from './hero-list.component';
|
||||
import {SalesTaxComponent} from './sales-tax.component';
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { SalesTaxComponent } from './sales-tax.component';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import {Injectable, Type} from '@angular/core';
|
||||
import {Logger} from './logger.service';
|
||||
import {Hero} from './hero';
|
||||
import { Injectable, Type } from '@angular/core';
|
||||
|
||||
import { Logger } from './logger.service';
|
||||
import { Hero } from './hero';
|
||||
|
||||
const HEROES = [
|
||||
new Hero('Windstorm', 'Weather mastery'),
|
||||
|
@ -10,7 +11,7 @@ const HEROES = [
|
|||
|
||||
@Injectable()
|
||||
export class BackendService {
|
||||
constructor(private _logger: Logger) {}
|
||||
constructor(private logger: Logger) {}
|
||||
|
||||
getAll(type:Type) : PromiseLike<any[]>{
|
||||
if (type === Hero) {
|
||||
|
@ -18,7 +19,7 @@ export class BackendService {
|
|||
return Promise.resolve<Hero[]>(HEROES);
|
||||
}
|
||||
let err = new Error('Cannot get object of this type');
|
||||
this._logger.error(err);
|
||||
this.logger.error(err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import { Component, Input} from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail',
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
// #docplaster
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {HeroDetailComponent} from './hero-detail.component';
|
||||
import {HeroService} from './hero.service';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
// #docregion metadata
|
||||
// #docregion providers
|
||||
|
@ -24,14 +25,14 @@ export class HeroesComponent { ... }
|
|||
// #docregion class
|
||||
export class HeroListComponent implements OnInit {
|
||||
// #docregion ctor
|
||||
constructor(private _service: HeroService) { }
|
||||
constructor(private service: HeroService) { }
|
||||
// #enddocregion ctor
|
||||
|
||||
heroes: Hero[];
|
||||
selectedHero: Hero;
|
||||
|
||||
ngOnInit() {
|
||||
this.heroes = this._service.getHeroes();
|
||||
this.heroes = this.service.getHeroes();
|
||||
}
|
||||
|
||||
selectHero(hero: Hero) { this.selectedHero = hero; }
|
||||
|
|
|
@ -1,25 +1,26 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {BackendService} from './backend.service';
|
||||
import {Logger} from './logger.service';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { BackendService } from './backend.service';
|
||||
import { Logger } from './logger.service';
|
||||
|
||||
@Injectable()
|
||||
// #docregion class
|
||||
export class HeroService {
|
||||
// #docregion ctor
|
||||
constructor(
|
||||
private _backend: BackendService,
|
||||
private _logger: Logger) { }
|
||||
private backend: BackendService,
|
||||
private logger: Logger) { }
|
||||
// #enddocregion ctor
|
||||
|
||||
private _heroes: Hero[] = [];
|
||||
private heroes: Hero[] = [];
|
||||
|
||||
getHeroes() {
|
||||
this._backend.getAll(Hero).then( (heroes: Hero[]) => {
|
||||
this._logger.log(`Fetched ${heroes.length} heroes.`);
|
||||
this._heroes.push(...heroes); // fill cache
|
||||
this.backend.getAll(Hero).then( (heroes: Hero[]) => {
|
||||
this.logger.log(`Fetched ${heroes.length} heroes.`);
|
||||
this.heroes.push(...heroes); // fill cache
|
||||
});
|
||||
return this._heroes;
|
||||
return this.heroes;
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
// #docregion class
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
// #docregion import
|
||||
import {AppComponent} from './app.component';
|
||||
import { AppComponent } from './app.component';
|
||||
// #enddocregion import
|
||||
import {HeroService} from './hero.service';
|
||||
import {BackendService} from './backend.service';
|
||||
import {Logger} from './logger.service';
|
||||
import { HeroService } from './hero.service';
|
||||
import { BackendService } from './backend.service';
|
||||
import { Logger } from './logger.service';
|
||||
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent, [BackendService, HeroService, Logger]);
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
import {SalesTaxService} from './sales-tax.service';
|
||||
import {TaxRateService} from './tax-rate.service';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { SalesTaxService } from './sales-tax.service';
|
||||
import { TaxRateService } from './tax-rate.service';
|
||||
|
||||
// #docregion metadata
|
||||
// #docregion providers
|
||||
|
@ -12,7 +13,7 @@ import {TaxRateService} from './tax-rate.service';
|
|||
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' }}
|
||||
|
@ -31,11 +32,11 @@ export class SalesTaxComponent { ... }
|
|||
// #docregion class
|
||||
export class SalesTaxComponent {
|
||||
// #docregion ctor
|
||||
constructor(private _salesTaxService: SalesTaxService) { }
|
||||
constructor(private salesTaxService: SalesTaxService) { }
|
||||
// #enddocregion ctor
|
||||
|
||||
getTax(value:string | number){
|
||||
return this._salesTaxService.getVAT(value);
|
||||
return this.salesTaxService.getVAT(value);
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
// #docregion
|
||||
import {Injectable, Inject} from '@angular/core';
|
||||
import {TaxRateService} from './tax-rate.service';
|
||||
import { Inject, Injectable } from '@angular/core';
|
||||
|
||||
import { TaxRateService } from './tax-rate.service';
|
||||
|
||||
// #docregion class
|
||||
@Injectable()
|
||||
export class SalesTaxService {
|
||||
constructor(private _rateService: TaxRateService) { }
|
||||
constructor(private rateService: TaxRateService) { }
|
||||
getVAT(value:string | number){
|
||||
let amount:number;
|
||||
if (typeof value === "string"){
|
||||
|
@ -13,7 +14,7 @@ export class SalesTaxService {
|
|||
} else {
|
||||
amount = value;
|
||||
}
|
||||
return (amount || 0) * this._rateService.getRate('VAT');
|
||||
return (amount || 0) * this.rateService.getRate('VAT');
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion class
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
// #docregion class
|
||||
@Injectable()
|
||||
export class TaxRateService {
|
||||
getRate(rateName:string){return 0.10;} // always 10% everywhere
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion class
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ import 'highlight_directive.dart';
|
|||
@Component(
|
||||
selector: 'my-app',
|
||||
templateUrl: 'app_component.html',
|
||||
directives: const [Highlight])
|
||||
directives: const [HighlightDirective])
|
||||
class AppComponent {
|
||||
String color;
|
||||
}
|
||||
|
|
|
@ -7,14 +7,14 @@
|
|||
<input type="radio" name="colors" (click)="color='yellow'">Yellow
|
||||
<input type="radio" name="colors" (click)="color='cyan'">Cyan
|
||||
</div>
|
||||
<!-- #docregion span -->
|
||||
<p><span [my-highlight]="color">Highlight me!</span></p>
|
||||
<!-- #enddocregion span -->
|
||||
<!-- #docregion pHost -->
|
||||
<p [myHighlight]="color">Highlight me!</p>
|
||||
<!-- #enddocregion pHost -->
|
||||
<!-- #enddocregion v2 -->
|
||||
|
||||
<!-- #docregion defaultColor -->
|
||||
<p><span [my-highlight]="color" [default-color]="'violet'">
|
||||
<p [myHighlight]="color" [defaultColor]="'violet'">
|
||||
Highlight me too!
|
||||
</span></p>
|
||||
</p>
|
||||
<!-- #enddocregion defaultColor -->
|
||||
<!-- #enddocregion -->
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
<!-- #docregion -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<span my-highlight>Highlight me!</span>
|
||||
<p myHighlight>Highlight me!</p>
|
||||
<!-- #enddocregion -->
|
||||
<!-- #docregion p-style-background -->
|
||||
<p [style.background]="'lime'">I am green with envy!</p>
|
||||
<!-- #enddocregion p-style-background -->
|
||||
|
|
|
@ -2,51 +2,42 @@
|
|||
// #docregion full
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[my-highlight]', host: const {
|
||||
@Directive(selector: '[myHighlight]', host: const {
|
||||
'(mouseenter)': 'onMouseEnter()',
|
||||
'(mouseleave)': 'onMouseLeave()'
|
||||
})
|
||||
// #docregion class-1
|
||||
class Highlight {
|
||||
// #enddocregion class-1
|
||||
// #enddocregion full
|
||||
/*
|
||||
// #docregion highlight
|
||||
@Input() myHighlight: string;
|
||||
// #enddocregion highlight
|
||||
*/
|
||||
// #docregion full
|
||||
// #docregion class-1
|
||||
// #docregion color
|
||||
@Input('my-highlight') String highlightColor;
|
||||
// #enddocregion color
|
||||
|
||||
class HighlightDirective {
|
||||
String _defaultColor = 'red';
|
||||
final dynamic _el;
|
||||
|
||||
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
|
||||
// #enddocregion class-1
|
||||
|
||||
// #docregion defaultColor
|
||||
@Input() set defaultColor(String colorName) {
|
||||
_defaultColor = (colorName ?? _defaultColor);
|
||||
}
|
||||
// #enddocregion defaultColor
|
||||
// #docregion class-1
|
||||
// #docregion class-1
|
||||
|
||||
final ElementRef _element;
|
||||
// #docregion color
|
||||
@Input('myHighlight') String highlightColor;
|
||||
// #enddocregion color
|
||||
|
||||
// #docregion mouse-enter
|
||||
void onMouseEnter() { _highlight(highlightColor ?? _defaultColor); }
|
||||
// #enddocregion mouse-enter
|
||||
void onMouseLeave() { _highlight(); }
|
||||
|
||||
// #docregion mouse-enter
|
||||
onMouseEnter() {
|
||||
_highlight(highlightColor ?? _defaultColor);
|
||||
void _highlight([String color]) {
|
||||
if(_el != null) _el.style.backgroundColor = color;
|
||||
}
|
||||
|
||||
// #enddocregion mouse-enter
|
||||
onMouseLeave() {
|
||||
_highlight(null);
|
||||
}
|
||||
|
||||
void _highlight(String color) {
|
||||
_element.nativeElement.style.backgroundColor = color;
|
||||
}
|
||||
|
||||
Highlight(this._element);
|
||||
}
|
||||
// #enddocregion class-1
|
||||
// #enddocregion full
|
||||
/*
|
||||
// #docregion highlight
|
||||
@Input() String myHighlight;
|
||||
// #enddocregion highlight
|
||||
*/
|
||||
|
|
|
@ -3,9 +3,9 @@ library attribute_directives.highlight_directive;
|
|||
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[my-highlight]')
|
||||
class Highlight {
|
||||
Highlight(ElementRef element) {
|
||||
@Directive(selector: '[myHighlight]')
|
||||
class HighlightDirective {
|
||||
HighlightDirective(ElementRef element) {
|
||||
element.nativeElement.style.backgroundColor = 'yellow';
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,32 +1,28 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[my-highlight]',
|
||||
// #docregion host
|
||||
@Directive(selector: '[myHighlight]',
|
||||
// #docregion host
|
||||
host: const {
|
||||
'(mouseenter)': 'onMouseEnter()',
|
||||
'(mouseleave)': 'onMouseLeave()'
|
||||
}
|
||||
// #enddocregion host
|
||||
)
|
||||
class Highlight {
|
||||
final ElementRef _element;
|
||||
// #docregion mouse-methods
|
||||
onMouseEnter() {
|
||||
_highlight("yellow");
|
||||
}
|
||||
// #enddocregion host
|
||||
)
|
||||
class HighlightDirective {
|
||||
// #docregion ctor
|
||||
final dynamic _el;
|
||||
|
||||
onMouseLeave() {
|
||||
_highlight(null);
|
||||
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion mouse-methods
|
||||
void onMouseEnter() { _highlight("yellow"); }
|
||||
void onMouseLeave() { _highlight(); }
|
||||
|
||||
void _highlight([String color]) {
|
||||
if (_el != null) _el.style.backgroundColor = color;
|
||||
}
|
||||
// #enddocregion mouse-methods
|
||||
|
||||
void _highlight(String color) {
|
||||
_element.nativeElement.style.backgroundColor = color;
|
||||
}
|
||||
|
||||
// #docregion ctor
|
||||
Highlight(this._element);
|
||||
// #enddocregion ctor
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
<!-- #docregion -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<span myHighlight>Highlight me!</span>
|
||||
<!-- #enddocregion -->
|
||||
<p myHighlight>Highlight me!</p>
|
||||
<!-- #enddocregion -->
|
||||
<!-- #docregion p-style-background -->
|
||||
<p [style.background]="'lime'">I am green with envy!</p>
|
||||
<!-- #enddocregion p-style-background -->
|
||||
|
|
|
@ -7,10 +7,9 @@
|
|||
<input type="radio" name="colors" (click)="color='yellow'">Yellow
|
||||
<input type="radio" name="colors" (click)="color='cyan'">Cyan
|
||||
</div>
|
||||
|
||||
<!-- #docregion span -->
|
||||
<!-- #docregion pHost -->
|
||||
<p [myHighlight]="color">Highlight me!</p>
|
||||
<!-- #enddocregion span -->
|
||||
<!-- #enddocregion pHost -->
|
||||
<!-- #enddocregion v2 -->
|
||||
|
||||
<!-- #docregion defaultColor -->
|
||||
|
@ -18,5 +17,4 @@
|
|||
Highlight me too!
|
||||
</p>
|
||||
<!-- #enddocregion defaultColor -->
|
||||
|
||||
<!-- #enddocregion -->
|
||||
<!-- #enddocregion -->
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
import {HighlightDirective} from './highlight.directive';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HighlightDirective } from './highlight.directive';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
|
|
@ -1,13 +1,9 @@
|
|||
// #docregion
|
||||
import {Directive, ElementRef, Input} from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]'
|
||||
})
|
||||
import { Directive, ElementRef, Input } from '@angular/core';
|
||||
|
||||
@Directive({ selector: '[myHighlight]' })
|
||||
export class HighlightDirective {
|
||||
constructor(el: ElementRef) {
|
||||
el.nativeElement.style.backgroundColor = 'yellow';
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Directive, ElementRef, Input} from '@angular/core';
|
||||
import { Directive, ElementRef, Input } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]',
|
||||
|
@ -12,20 +12,20 @@ import {Directive, ElementRef, Input} from '@angular/core';
|
|||
})
|
||||
|
||||
export class HighlightDirective {
|
||||
|
||||
|
||||
// #docregion ctor
|
||||
private _el:HTMLElement;
|
||||
constructor(el: ElementRef) { this._el = el.nativeElement; }
|
||||
private el:HTMLElement;
|
||||
constructor(el: ElementRef) { this.el = el.nativeElement; }
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion mouse-methods
|
||||
onMouseEnter() { this._highlight("yellow"); }
|
||||
onMouseLeave() { this._highlight(null); }
|
||||
onMouseEnter() { this.highlight("yellow"); }
|
||||
onMouseLeave() { this.highlight(null); }
|
||||
|
||||
private _highlight(color: string) {
|
||||
this._el.style.backgroundColor = color;
|
||||
private highlight(color: string) {
|
||||
this.el.style.backgroundColor = color;
|
||||
}
|
||||
// #enddocregion mouse-methods
|
||||
|
||||
}
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion full
|
||||
import {Directive, ElementRef, Input} from '@angular/core';
|
||||
import { Directive, ElementRef, Input } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]',
|
||||
|
@ -9,44 +9,38 @@ import {Directive, ElementRef, Input} from '@angular/core';
|
|||
'(mouseleave)': 'onMouseLeave()'
|
||||
}
|
||||
})
|
||||
|
||||
// #docregion class-1
|
||||
export class HighlightDirective {
|
||||
|
||||
private _defaultColor = 'red';
|
||||
private _el:HTMLElement;
|
||||
// #enddocregion class-1
|
||||
// #enddocregion full
|
||||
/*
|
||||
// #docregion highlight
|
||||
@Input() myHighlight: string;
|
||||
// #enddocregion highlight
|
||||
*/
|
||||
// #docregion full
|
||||
private el: HTMLElement;
|
||||
|
||||
constructor(el: ElementRef) { this.el = el.nativeElement; }
|
||||
// #enddocregion class-1
|
||||
|
||||
// #docregion defaultColor
|
||||
// #docregion defaultColor
|
||||
@Input() set defaultColor(colorName:string){
|
||||
this._defaultColor = colorName || this._defaultColor;
|
||||
}
|
||||
// #enddocregion defaultColor
|
||||
// #docregion class-1
|
||||
// #enddocregion defaultColor
|
||||
// #docregion class-1
|
||||
|
||||
// #docregion color
|
||||
// #docregion color
|
||||
@Input('myHighlight') highlightColor: string;
|
||||
// #enddocregion color
|
||||
// #enddocregion color
|
||||
|
||||
// #enddocregion class-1
|
||||
// #docregion class-1
|
||||
constructor(el: ElementRef) { this._el = el.nativeElement; }
|
||||
// #docregion mouse-enter
|
||||
onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
|
||||
// #enddocregion mouse-enter
|
||||
onMouseLeave() { this.highlight(null); }
|
||||
|
||||
// #docregion mouse-enter
|
||||
onMouseEnter() { this._highlight(this.highlightColor || this._defaultColor); }
|
||||
// #enddocregion mouse-enter
|
||||
onMouseLeave() { this._highlight(null); }
|
||||
|
||||
private _highlight(color:string) {
|
||||
this._el.style.backgroundColor = color;
|
||||
private highlight(color:string) {
|
||||
this.el.style.backgroundColor = color;
|
||||
}
|
||||
}
|
||||
// #enddocregion class-1
|
||||
// #enddocregion full
|
||||
// #enddocregion full
|
||||
/*
|
||||
// #docregion highlight
|
||||
@Input() myHighlight: string;
|
||||
// #enddocregion highlight
|
||||
*/
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
// #docregion
|
||||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
import {AppComponent} from './app.component';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
||||
|
|
|
@ -16,13 +16,10 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
||||
<body>
|
||||
<my-app>loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
|
||||
import { Component } from '@angular/core';
|
||||
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
|
||||
|
||||
import {MovieListComponent} from './movie-list.component';
|
||||
import {MovieService} from './movie.service';
|
||||
import {IMovie} from './movie';
|
||||
import {StringSafeDatePipe} from './date.pipe';
|
||||
import { MovieListComponent } from './movie-list.component';
|
||||
import { MovieService } from './movie.service';
|
||||
import { IMovie } from './movie';
|
||||
import { StringSafeDatePipe } from './date.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {Injectable, Pipe} from '@angular/core';
|
||||
import {DatePipe} from '@angular/common';
|
||||
import { Injectable, Pipe } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
|
||||
@Injectable()
|
||||
// #docregion date-pipe
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
import {AppComponent} from './app.component';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
// #docplaster
|
||||
// #docregion import
|
||||
import {Component} from '@angular/core';
|
||||
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
|
||||
import { Component } from '@angular/core';
|
||||
import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
|
||||
// #enddocregion import
|
||||
import {MovieService} from './movie.service';
|
||||
import {IMovie} from './movie';
|
||||
import {StringSafeDatePipe} from './date.pipe';
|
||||
import { MovieService } from './movie.service';
|
||||
import { IMovie } from './movie';
|
||||
import { StringSafeDatePipe } from './date.pipe';
|
||||
|
||||
|
||||
// #docregion component
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {IMovie} from './movie';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { IMovie } from './movie';
|
||||
|
||||
@Injectable()
|
||||
export class MovieService {
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {HeroParentComponent} from './hero-parent.component';
|
||||
import {NameParentComponent} from './name-parent.component';
|
||||
import {VersionParentComponent} from './version-parent.component';
|
||||
import {VoteTakerComponent} from './votetaker.component';
|
||||
import {CountdownLocalVarParentComponent,
|
||||
CountdownViewChildParentComponent} from './countdown-parent.component';
|
||||
import {MissionControlComponent} from './missioncontrol.component';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroParentComponent } from './hero-parent.component';
|
||||
import { NameParentComponent } from './name-parent.component';
|
||||
import { VersionParentComponent } from './version-parent.component';
|
||||
import { VoteTakerComponent } from './votetaker.component';
|
||||
import { CountdownLocalVarParentComponent,
|
||||
CountdownViewChildParentComponent } from './countdown-parent.component';
|
||||
import { MissionControlComponent } from './missioncontrol.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
// #docregion
|
||||
import {Component, Input, OnDestroy} from '@angular/core';
|
||||
import {MissionService} from './mission.service';
|
||||
import {Subscription} from 'rxjs/Subscription';
|
||||
import { Component, Input, OnDestroy } from '@angular/core';
|
||||
|
||||
import { MissionService } from './mission.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
@Component({
|
||||
selector: 'my-astronaut',
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
// #docplaster
|
||||
// #docregion vc
|
||||
import {AfterViewInit, ViewChild} from '@angular/core';
|
||||
import { AfterViewInit, ViewChild } from '@angular/core';
|
||||
// #docregion lv
|
||||
import {Component} from '@angular/core';
|
||||
import {CountdownTimerComponent} from './countdown-timer.component';
|
||||
import { Component } from '@angular/core';
|
||||
import { CountdownTimerComponent } from './countdown-timer.component';
|
||||
|
||||
// #enddocregion lv
|
||||
// #enddocregion vc
|
||||
|
@ -42,7 +42,7 @@ export class CountdownLocalVarParentComponent { }
|
|||
export class CountdownViewChildParentComponent implements AfterViewInit {
|
||||
|
||||
@ViewChild(CountdownTimerComponent)
|
||||
private _timerComponent:CountdownTimerComponent;
|
||||
private timerComponent:CountdownTimerComponent;
|
||||
|
||||
seconds() { return 0; }
|
||||
|
||||
|
@ -50,10 +50,10 @@ export class CountdownViewChildParentComponent implements AfterViewInit {
|
|||
// Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ...
|
||||
// but wait a tick first to avoid one-time devMode
|
||||
// unidirectional-data-flow-violation error
|
||||
setTimeout(() => this.seconds = () => this._timerComponent.seconds, 0)
|
||||
setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0)
|
||||
}
|
||||
|
||||
start(){ this._timerComponent.start(); }
|
||||
stop() { this._timerComponent.stop(); }
|
||||
start(){ this.timerComponent.start(); }
|
||||
stop() { this.timerComponent.stop(); }
|
||||
}
|
||||
// #enddocregion vc
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, OnInit, OnDestroy} from '@angular/core';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector:'countdown-timer',
|
||||
|
@ -16,13 +16,13 @@ export class CountdownTimerComponent implements OnInit, OnDestroy {
|
|||
ngOnInit() { this.start(); }
|
||||
ngOnDestroy() { this.clearTimer(); }
|
||||
|
||||
start() { this._countDown(); }
|
||||
start() { this.countDown(); }
|
||||
stop() {
|
||||
this.clearTimer();
|
||||
this.message = `Holding at T-${this.seconds} seconds`;
|
||||
}
|
||||
|
||||
private _countDown() {
|
||||
private countDown() {
|
||||
this.clearTimer();
|
||||
this.intervalId = setInterval(()=>{
|
||||
this.seconds -= 1;
|
||||
|
@ -34,4 +34,4 @@ export class CountdownTimerComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// #docregion
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-child',
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
import {HeroChildComponent} from './hero-child.component';
|
||||
import {HEROES} from './hero';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroChildComponent } from './hero-child.component';
|
||||
import { HEROES } from './hero';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-parent',
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
import {AppComponent} from './app.component';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
|
@ -1,25 +1,25 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core'
|
||||
import {Subject} from 'rxjs/Subject';
|
||||
import { Injectable } from '@angular/core'
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
|
||||
@Injectable()
|
||||
export class MissionService {
|
||||
|
||||
// Observable string sources
|
||||
private _missionAnnouncedSource = new Subject<string>();
|
||||
private _missionConfirmedSource = new Subject<string>();
|
||||
private missionAnnouncedSource = new Subject<string>();
|
||||
private missionConfirmedSource = new Subject<string>();
|
||||
|
||||
// Observable string streams
|
||||
missionAnnounced$ = this._missionAnnouncedSource.asObservable();
|
||||
missionConfirmed$ = this._missionConfirmedSource.asObservable();
|
||||
missionAnnounced$ = this.missionAnnouncedSource.asObservable();
|
||||
missionConfirmed$ = this.missionConfirmedSource.asObservable();
|
||||
|
||||
// Service message commands
|
||||
announceMission(mission: string) {
|
||||
this._missionAnnouncedSource.next(mission)
|
||||
this.missionAnnouncedSource.next(mission)
|
||||
}
|
||||
|
||||
confirmMission(astronaut: string) {
|
||||
this._missionConfirmedSource.next(astronaut);
|
||||
this.missionConfirmedSource.next(astronaut);
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
import {AstronautComponent} from './astronaut.component';
|
||||
import {MissionService} from './mission.service';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { AstronautComponent } from './astronaut.component';
|
||||
import { MissionService } from './mission.service';
|
||||
|
||||
@Component({
|
||||
selector: 'mission-control',
|
||||
|
@ -41,4 +42,4 @@ export class MissionControlComponent {
|
|||
if (this.nextMission >= this.missions.length) { this.nextMission = 0; }
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, Input} from '@angular/core';
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'name-child',
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
import {NameChildComponent} from './name-child.component';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { NameChildComponent } from './name-child.component';
|
||||
|
||||
@Component({
|
||||
selector: 'name-parent',
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/* tslint:disable:forin */
|
||||
// #docregion
|
||||
import {Component, Input, OnChanges, SimpleChange} from '@angular/core';
|
||||
import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'version-child',
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
import {VersionChildComponent} from './version-child.component';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { VersionChildComponent } from './version-child.component';
|
||||
|
||||
@Component({
|
||||
selector: 'version-parent',
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-voter',
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core';
|
||||
import {VoterComponent} from './voter.component';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { VoterComponent } from './voter.component';
|
||||
|
||||
@Component({
|
||||
selector: 'vote-taker',
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
/* tslint:disable:one-line:check-open-brace*/
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { LoggerService } from './logger.service';
|
||||
|
||||
// #docregion minimal-logger
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
// #docregion
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
|
||||
import {Hero} from './hero';
|
||||
import {HeroCacheService} from './hero-cache.service';
|
||||
import { Hero } from './hero';
|
||||
import { HeroCacheService } from './hero-cache.service';
|
||||
|
||||
// #docregion component
|
||||
@Component({
|
||||
|
@ -20,10 +20,10 @@ export class HeroBioComponent implements OnInit {
|
|||
|
||||
@Input() heroId:number;
|
||||
|
||||
constructor(private _heroCache:HeroCacheService) { }
|
||||
constructor(private heroCache:HeroCacheService) { }
|
||||
|
||||
ngOnInit() { this._heroCache.fetchCachedHero(this.heroId); }
|
||||
ngOnInit() { this.heroCache.fetchCachedHero(this.heroId); }
|
||||
|
||||
get hero() { return this._heroCache.hero; }
|
||||
get hero() { return this.heroCache.hero; }
|
||||
}
|
||||
// #enddocregion component
|
||||
|
|
|
@ -1,17 +1,18 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {HeroService} from './hero.service';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
// #docregion service
|
||||
@Injectable()
|
||||
export class HeroCacheService {
|
||||
hero:Hero;
|
||||
constructor(private _heroService:HeroService){}
|
||||
constructor(private heroService:HeroService){}
|
||||
|
||||
fetchCachedHero(id:number){
|
||||
if (!this.hero) {
|
||||
this.hero = this._heroService.getHeroById(id);
|
||||
this.hero = this.heroService.getHeroById(id);
|
||||
}
|
||||
return this.hero
|
||||
}
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Component, ElementRef, Host, Inject, Optional} from '@angular/core';
|
||||
import {HeroCacheService} from './hero-cache.service';
|
||||
import {LoggerService} from './logger.service';
|
||||
import { Component, ElementRef, Host, Inject, Optional } from '@angular/core';
|
||||
|
||||
import { HeroCacheService } from './hero-cache.service';
|
||||
import { LoggerService } from './logger.service';
|
||||
|
||||
// #docregion component
|
||||
@Component({
|
||||
|
@ -18,22 +19,22 @@ export class HeroContactComponent {
|
|||
constructor(
|
||||
// #docregion ctor-params
|
||||
@Host() // limit to the host component's instance of the HeroCacheService
|
||||
private _heroCache: HeroCacheService,
|
||||
private heroCache: HeroCacheService,
|
||||
|
||||
@Host() // limit search for logger; hides the application-wide logger
|
||||
@Optional() // ok if the logger doesn't exist
|
||||
private _loggerService: LoggerService
|
||||
private loggerService: LoggerService
|
||||
// #enddocregion ctor-params
|
||||
) {
|
||||
if (_loggerService) {
|
||||
if (loggerService) {
|
||||
this.hasLogger = true;
|
||||
_loggerService.logInfo('HeroContactComponent can log!');
|
||||
loggerService.logInfo('HeroContactComponent can log!');
|
||||
}
|
||||
// #docregion ctor
|
||||
}
|
||||
// #enddocregion ctor
|
||||
|
||||
get phoneNumber() { return this._heroCache.hero.phone; }
|
||||
get phoneNumber() { return this.heroCache.hero.phone; }
|
||||
|
||||
}
|
||||
// #enddocregion component
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Hero} from './hero';
|
||||
import { Hero } from './hero';
|
||||
|
||||
export class HeroData {
|
||||
createDb() {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
/* tslint:disable:one-line:check-open-brace*/
|
||||
// #docplaster
|
||||
// #docregion opaque-token
|
||||
import {OpaqueToken} from '@angular/core';
|
||||
import { OpaqueToken } from '@angular/core';
|
||||
|
||||
export const TITLE = new OpaqueToken('title');
|
||||
// #enddocregion opaque-token
|
||||
|
|
|
@ -1,22 +1,22 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
|
||||
//TODO move to database
|
||||
private _heroes:Array<Hero> = [
|
||||
private heroes:Array<Hero> = [
|
||||
new Hero(1, 'RubberMan','Hero of many talents', '123-456-7899'),
|
||||
new Hero(2, 'Magma','Hero of all trades', '555-555-5555'),
|
||||
new Hero(3, 'Mr. Nice','The name says it all','111-222-3333')
|
||||
];
|
||||
|
||||
getHeroById(id:number):Hero{
|
||||
return this._heroes.filter(hero => hero.id === id)[0];
|
||||
return this.heroes.filter(hero => hero.id === id)[0];
|
||||
}
|
||||
|
||||
getAllHeroes():Array<Hero>{
|
||||
return this._heroes;
|
||||
return this.heroes;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Directive, ElementRef, Input} from '@angular/core';
|
||||
import { Directive, ElementRef, Input } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]',
|
||||
|
@ -13,16 +13,16 @@ export class HighlightDirective {
|
|||
|
||||
@Input('myHighlight') highlightColor: string;
|
||||
|
||||
private _el: HTMLElement;
|
||||
private el: HTMLElement;
|
||||
|
||||
constructor(el: ElementRef) {
|
||||
this._el = el.nativeElement;
|
||||
this.el = el.nativeElement;
|
||||
}
|
||||
|
||||
onMouseEnter() { this._highlight(this.highlightColor || 'cyan'); }
|
||||
onMouseLeave() { this._highlight(null); }
|
||||
onMouseEnter() { this.highlight(this.highlightColor || 'cyan'); }
|
||||
onMouseLeave() { this.highlight(null); }
|
||||
|
||||
private _highlight(color: string) {
|
||||
this._el.style.backgroundColor = color;
|
||||
private highlight(color: string) {
|
||||
this.el.style.backgroundColor = color;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class LoggerService {
|
||||
|
|
|
@ -2,9 +2,7 @@
|
|||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { provide } from '@angular/core';
|
||||
import { XHRBackend } from '@angular/http';
|
||||
|
||||
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
|
||||
|
||||
import { LocationStrategy,
|
||||
HashLocationStrategy } from '@angular/common';
|
||||
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {OpaqueToken} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {HeroService} from './hero.service';
|
||||
import { OpaqueToken } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
// #docregion runners-up
|
||||
export const RUNNERS_UP = new OpaqueToken('RunnersUp');
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Hero} from './hero';
|
||||
import {HeroService} from './hero.service';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
/////// HeroesBaseComponent /////
|
||||
// #docregion heroes-base, injection
|
||||
|
@ -12,18 +13,18 @@ import {HeroService} from './hero.service';
|
|||
providers: [HeroService]
|
||||
})
|
||||
export class HeroesBaseComponent implements OnInit {
|
||||
constructor(private _heroService: HeroService) { }
|
||||
constructor(private heroService: HeroService) { }
|
||||
// #enddocregion injection
|
||||
|
||||
heroes: Array<Hero>;
|
||||
|
||||
ngOnInit() {
|
||||
this.heroes = this._heroService.getAllHeroes();
|
||||
this._afterGetHeroes();
|
||||
this.heroes = this.heroService.getAllHeroes();
|
||||
this.afterGetHeroes();
|
||||
}
|
||||
|
||||
// Post-process heroes in derived class override.
|
||||
protected _afterGetHeroes() {}
|
||||
protected afterGetHeroes() {}
|
||||
|
||||
// #docregion injection
|
||||
}
|
||||
|
@ -41,7 +42,7 @@ export class SortedHeroesComponent extends HeroesBaseComponent {
|
|||
super(heroService);
|
||||
}
|
||||
|
||||
protected _afterGetHeroes() {
|
||||
protected afterGetHeroes() {
|
||||
this.heroes = this.heroes.sort((h1, h2) => {
|
||||
return h1.name < h2.name ? -1 :
|
||||
(h1.name > h2.name ? 1 : 0);
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
import {LoggerService} from './logger.service';
|
||||
import {UserService} from './user.service';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { LoggerService } from './logger.service';
|
||||
import { UserService } from './user.service';
|
||||
|
||||
// #docregion injectables, injectable
|
||||
@Injectable()
|
||||
|
@ -13,7 +14,7 @@ export class UserContextService {
|
|||
loggedInSince:Date;
|
||||
|
||||
// #docregion ctor, injectables
|
||||
constructor(private _userService:UserService, private _loggerService:LoggerService){
|
||||
constructor(private userService:UserService, private loggerService:LoggerService){
|
||||
// #enddocregion ctor, injectables
|
||||
this.loggedInSince = new Date();
|
||||
// #docregion ctor, injectables
|
||||
|
@ -21,11 +22,11 @@ export class UserContextService {
|
|||
// #enddocregion ctor, injectables
|
||||
|
||||
loadUser(userId:number){
|
||||
let user = this._userService.getUserById(userId);
|
||||
let user = this.userService.getUserById(userId);
|
||||
this.name = user.name;
|
||||
this.role = user.role;
|
||||
|
||||
this._loggerService.logDebug('loaded User');
|
||||
this.loggerService.logDebug('loaded User');
|
||||
}
|
||||
// #docregion injectables, injectable
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class UserService {
|
||||
|
@ -7,4 +7,4 @@ export class UserService {
|
|||
getUserById(userId:number):any{
|
||||
return {name:'Bombasto',role:'Admin'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
// #docregion
|
||||
import {Component} from '@angular/core'
|
||||
import {DynamicForm} from './dynamic-form.component';
|
||||
import {QuestionService} from './question.service';
|
||||
import { Component } from '@angular/core'
|
||||
|
||||
import { DynamicForm } from './dynamic-form.component';
|
||||
import { QuestionService } from './question.service';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
// #docregion
|
||||
import {Component, Input} from '@angular/core';
|
||||
import {ControlGroup} from '@angular/common';
|
||||
import {QuestionBase} from './question-base';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { ControlGroup } from '@angular/common';
|
||||
|
||||
import { QuestionBase } from './question-base';
|
||||
|
||||
@Component({
|
||||
selector:'df-question',
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
// #docregion
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {ControlGroup} from '@angular/common';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { ControlGroup } from '@angular/common';
|
||||
|
||||
import {QuestionBase} from './question-base';
|
||||
import {QuestionControlService} from './question-control.service';
|
||||
import {DynamicFormQuestionComponent} from './dynamic-form-question.component';
|
||||
import { QuestionBase } from './question-base';
|
||||
import { QuestionControlService } from './question-control.service';
|
||||
import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
|
||||
|
||||
@Component({
|
||||
selector:'dynamic-form',
|
||||
|
@ -18,10 +18,10 @@ export class DynamicForm {
|
|||
form: ControlGroup;
|
||||
payLoad = '';
|
||||
|
||||
constructor(private _qcs: QuestionControlService) { }
|
||||
constructor(private qcs: QuestionControlService) { }
|
||||
|
||||
ngOnInit(){
|
||||
this.form = this._qcs.toControlGroup(this.questions);
|
||||
this.form = this.qcs.toControlGroup(this.questions);
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import {bootstrap} from '@angular/platform-browser-dynamic';
|
||||
import {AppComponent} from './app.component';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent, [])
|
||||
.catch((err:any) => console.error(err));
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
import {ControlGroup, FormBuilder, Validators} from '@angular/common';
|
||||
import {QuestionBase} from './question-base';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ControlGroup, FormBuilder, Validators } from '@angular/common';
|
||||
import { QuestionBase } from './question-base';
|
||||
|
||||
@Injectable()
|
||||
export class QuestionControlService {
|
||||
constructor(private _fb:FormBuilder){ }
|
||||
constructor(private fb:FormBuilder){ }
|
||||
|
||||
toControlGroup(questions:QuestionBase<any>[] ) {
|
||||
let group = {};
|
||||
|
||||
questions.forEach(question => {
|
||||
group[question.key] = question.required ? [question.value || '', Validators.required] : [];
|
||||
group[question.key] = question.required ? [question.value || '', Validators.required] : [question.value || ''];
|
||||
});
|
||||
return this._fb.group(group);
|
||||
return this.fb.group(group);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {QuestionBase} from './question-base';
|
||||
import { QuestionBase } from './question-base';
|
||||
|
||||
export class DropdownQuestion extends QuestionBase<string>{
|
||||
controlType = 'dropdown';
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {QuestionBase} from './question-base';
|
||||
import { QuestionBase } from './question-base';
|
||||
|
||||
export class TextboxQuestion extends QuestionBase<string>{
|
||||
controlType = 'textbox';
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
// #docregion
|
||||
import {Injectable} from '@angular/core';
|
||||
import {QuestionBase} from './question-base';
|
||||
import {DynamicForm} from './dynamic-form.component';
|
||||
import {TextboxQuestion} from './question-textbox';
|
||||
import {DropdownQuestion} from './question-dropdown';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { QuestionBase } from './question-base';
|
||||
import { DynamicForm } from './dynamic-form.component';
|
||||
import { TextboxQuestion } from './question-textbox';
|
||||
import { DropdownQuestion } from './question-dropdown';
|
||||
|
||||
@Injectable()
|
||||
export class QuestionService {
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<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>
|
||||
<body>
|
||||
|
|
|
@ -20,10 +20,10 @@ template:
|
|||
})
|
||||
// #docregion class
|
||||
export class AppComponent {
|
||||
public constructor(private _titleService: Title ) { }
|
||||
public constructor(private titleService: Title ) { }
|
||||
|
||||
public setTitle( newTitle: string) {
|
||||
this._titleService.setTitle( newTitle );
|
||||
this.titleService.setTitle( newTitle );
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
// While Angular supplies a Title service for setting the HTML document title
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class DataService {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, Inject} from '@angular/core';
|
||||
import { Component, Inject } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {DataService} from './data.service';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { DataService } from './data.service';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import {Component, OnInit}
|
||||
import { Component, OnInit }
|
||||
from '@angular/core';
|
||||
// #enddocregion
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// #docplaster
|
||||
// #docregion metadata
|
||||
import {Component} from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-view',
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import {Component, HostBinding, HostListener} from '@angular/core';
|
||||
import { Component, HostBinding, HostListener } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'heroes-bindings',
|
||||
template: `<h1 [class.active]="active">
|
||||
Tour of Heroes
|
||||
Tour ofHeroes
|
||||
</h1>`
|
||||
})
|
||||
export class HeroesComponent {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion ng2import
|
||||
import {provide}
|
||||
import { provide }
|
||||
from '@angular/core';
|
||||
import {bootstrap}
|
||||
import { bootstrap }
|
||||
from '@angular/platform-browser-dynamic';
|
||||
import {
|
||||
} from '@angular/router';
|
||||
|
@ -12,18 +12,18 @@ import {
|
|||
// #enddocregion ng2import
|
||||
|
||||
// #docregion appimport
|
||||
import {HeroComponent}
|
||||
import { HeroComponent }
|
||||
from './hero.component';
|
||||
// #enddocregion appimport
|
||||
import {HeroComponent as HeroLifecycleComponent} from './hero-lifecycle.component';
|
||||
import {HeroComponent as HeroDIComponent} from './hero-di.component';
|
||||
import {HeroComponent as HeroDIInjectComponent} from './hero-di-inject.component';
|
||||
import {AppComponent as AppDIInjectAdditionalComponent} from './hero-di-inject-additional.component';
|
||||
import {AppComponent as AppIOComponent} from './hero-io.component';
|
||||
import {HeroesComponent as HeroesHostBindingsComponent} from './heroes-bindings.component';
|
||||
import {HeroesQueriesComponent} from './heroes-queries.component';
|
||||
import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
|
||||
import { HeroComponent as HeroDIComponent } from './hero-di.component';
|
||||
import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
|
||||
import { AppComponent as AppDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
|
||||
import { AppComponent as AppIOComponent } from './hero-io.component';
|
||||
import { HeroesComponent as HeroesHostBindingsComponent } from './heroes-bindings.component';
|
||||
import { HeroesQueriesComponent } from './heroes-queries.component';
|
||||
|
||||
import {DataService} from './data.service';
|
||||
import { DataService } from './data.service';
|
||||
|
||||
bootstrap(HeroComponent);
|
||||
bootstrap(HeroLifecycleComponent);
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
class Hero {
|
||||
bool active = false;
|
||||
|
||||
final String name;
|
||||
final List<String> team;
|
||||
|
||||
Hero(this.name, this.team);
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
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
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
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;
|
||||
}
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue