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:
Zhicheng Wang
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": [
|
||||
|
|
|
|||
51
gulpfile.js
51
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);
|
||||
});
|
||||
|
||||
if (status.failed.length == 0) {
|
||||
gutil.log('All tests passed');
|
||||
} else {
|
||||
gutil.log('Suites failed:');
|
||||
status.failed.forEach(function (val) {
|
||||
gutil.log(' ' + val);
|
||||
});
|
||||
|
||||
if (status.failed.length == 0) {
|
||||
gutil.log('All tests passed');
|
||||
}
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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,4 +1,5 @@
|
|||
import { Injectable, Type } from '@angular/core';
|
||||
|
||||
import { Logger } from './logger.service';
|
||||
import { Hero } from './hero';
|
||||
|
||||
|
|
@ -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,4 +1,5 @@
|
|||
import { Component, Input} from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docplaster
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
import { HeroService } from './hero.service';
|
||||
|
|
@ -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,4 +1,5 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { BackendService } from './backend.service';
|
||||
import { Logger } from './logger.service';
|
||||
|
|
@ -8,18 +9,18 @@ import {Logger} from './logger.service';
|
|||
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,6 +1,7 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { SalesTaxService } from './sales-tax.service';
|
||||
import { TaxRateService } from './tax-rate.service';
|
||||
|
||||
|
|
@ -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 { 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
|
||||
|
|
@ -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,27 +2,18 @@
|
|||
// #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);
|
||||
|
|
@ -30,23 +21,23 @@ class Highlight {
|
|||
// #enddocregion defaultColor
|
||||
// #docregion class-1
|
||||
|
||||
final ElementRef _element;
|
||||
// #docregion color
|
||||
@Input('myHighlight') String highlightColor;
|
||||
// #enddocregion color
|
||||
|
||||
// #docregion mouse-enter
|
||||
onMouseEnter() {
|
||||
_highlight(highlightColor ?? _defaultColor);
|
||||
}
|
||||
|
||||
void onMouseEnter() { _highlight(highlightColor ?? _defaultColor); }
|
||||
// #enddocregion mouse-enter
|
||||
onMouseLeave() {
|
||||
_highlight(null);
|
||||
}
|
||||
void onMouseLeave() { _highlight(); }
|
||||
|
||||
void _highlight(String color) {
|
||||
_element.nativeElement.style.backgroundColor = color;
|
||||
void _highlight([String color]) {
|
||||
if(_el != null) _el.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,7 +1,7 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[my-highlight]',
|
||||
@Directive(selector: '[myHighlight]',
|
||||
// #docregion host
|
||||
host: const {
|
||||
'(mouseenter)': 'onMouseEnter()',
|
||||
|
|
@ -9,24 +9,20 @@ import 'package:angular2/core.dart';
|
|||
}
|
||||
// #enddocregion host
|
||||
)
|
||||
class Highlight {
|
||||
final ElementRef _element;
|
||||
// #docregion mouse-methods
|
||||
onMouseEnter() {
|
||||
_highlight("yellow");
|
||||
}
|
||||
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>
|
||||
<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 -->
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HighlightDirective } from './highlight.directive';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
// #docregion
|
||||
import { Directive, ElementRef, Input } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]'
|
||||
})
|
||||
|
||||
@Directive({ selector: '[myHighlight]' })
|
||||
export class HighlightDirective {
|
||||
constructor(el: ElementRef) {
|
||||
el.nativeElement.style.backgroundColor = 'yellow';
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -14,16 +14,16 @@ 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
|
||||
|
||||
|
|
|
|||
|
|
@ -9,20 +9,13 @@ import {Directive, ElementRef, Input} from '@angular/core';
|
|||
'(mouseleave)': 'onMouseLeave()'
|
||||
}
|
||||
})
|
||||
|
||||
// #docregion class-1
|
||||
export class HighlightDirective {
|
||||
|
||||
private _defaultColor = 'red';
|
||||
private _el:HTMLElement;
|
||||
private el: HTMLElement;
|
||||
|
||||
constructor(el: ElementRef) { this.el = el.nativeElement; }
|
||||
// #enddocregion class-1
|
||||
// #enddocregion full
|
||||
/*
|
||||
// #docregion highlight
|
||||
@Input() myHighlight: string;
|
||||
// #enddocregion highlight
|
||||
*/
|
||||
// #docregion full
|
||||
|
||||
// #docregion defaultColor
|
||||
@Input() set defaultColor(colorName:string){
|
||||
|
|
@ -35,18 +28,19 @@ export class HighlightDirective {
|
|||
@Input('myHighlight') highlightColor: string;
|
||||
// #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); }
|
||||
onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
|
||||
// #enddocregion mouse-enter
|
||||
onMouseLeave() { this._highlight(null); }
|
||||
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
|
||||
/*
|
||||
// #docregion highlight
|
||||
@Input() myHighlight: string;
|
||||
// #enddocregion highlight
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
||||
|
|
|
|||
|
|
@ -19,10 +19,7 @@
|
|||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<my-app>loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { IMovie } from './movie';
|
||||
|
||||
@Injectable()
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroParentComponent } from './hero-parent.component';
|
||||
import { NameParentComponent } from './name-parent.component';
|
||||
import { VersionParentComponent } from './version-parent.component';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component, Input, OnDestroy } from '@angular/core';
|
||||
|
||||
import { MissionService } from './mission.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroChildComponent } from './hero-child.component';
|
||||
import { HEROES } from './hero';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
|
@ -6,20 +6,20 @@ import {Subject} from 'rxjs/Subject';
|
|||
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,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { AstronautComponent } from './astronaut.component';
|
||||
import { MissionService } from './mission.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { NameChildComponent } from './name-child.component';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { VersionChildComponent } from './version-child.component';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { VoterComponent } from './voter.component';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
|
|
@ -7,11 +8,11 @@ import {HeroService} from './hero.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,6 +1,7 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, ElementRef, Host, Inject, Optional } from '@angular/core';
|
||||
|
||||
import { HeroCacheService } from './hero-cache.service';
|
||||
import { LoggerService } from './logger.service';
|
||||
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@ import {Hero} from './hero';
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,6 +1,7 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { OpaqueToken } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
|
|
@ -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,6 +1,7 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { LoggerService } from './logger.service';
|
||||
import { UserService } from './user.service';
|
||||
|
||||
|
|
@ -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,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core'
|
||||
|
||||
import { DynamicForm } from './dynamic-form.component';
|
||||
import { QuestionService } from './question.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// #docregion
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { ControlGroup } from '@angular/common';
|
||||
|
||||
import { QuestionBase } from './question-base';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -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,4 +1,5 @@
|
|||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
bootstrap(AppComponent, [])
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@ 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,6 @@
|
|||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { QuestionBase } from './question-base';
|
||||
import { DynamicForm } from './dynamic-form.component';
|
||||
import { TextboxQuestion } from './question-textbox';
|
||||
|
|
|
|||
|
|
@ -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,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { DataService } from './data.service';
|
||||
|
||||
// #docregion
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
:host {
|
||||
padding: 10px;
|
||||
}
|
||||
h3 {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/* #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 */
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
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
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
li {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
:host {
|
||||
display: block;
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
// #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
|
||||
*/
|
||||
|
|
@ -0,0 +1 @@
|
|||
<p>No quests in progress</p>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
# #docregion
|
||||
name: component_styles
|
||||
description: Component Styles example
|
||||
version: 0.0.1
|
||||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
- angular2:
|
||||
platform_directives: 'package:angular2/common.dart#COMMON_DIRECTIVES'
|
||||
entry_points: web/main.dart
|
||||
- dart_to_js_script_rewriter
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import 'package:angular2/platform/browser.dart';
|
||||
import 'package:component_styles/hero_app_component.dart';
|
||||
|
||||
main() {
|
||||
bootstrap(HeroAppComponent);
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroDetailsComponent } from './hero-details.component';
|
||||
import { HeroControlsComponent } from './hero-controls.component';
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ import {HeroAppMainComponent} from './hero-app-main.component';
|
|||
styles: ['h1 { font-weight: normal; }'],
|
||||
directives: [HeroAppMainComponent]
|
||||
})
|
||||
// #enddocregion
|
||||
export class HeroAppComponent {
|
||||
// #enddocregion
|
||||
hero = new Hero(
|
||||
'Human Torch',
|
||||
['Mister Fantastic', 'Invisible Woman', 'Thing']
|
||||
|
|
@ -21,5 +21,6 @@ export class HeroAppComponent {
|
|||
@HostBinding('class') get themeClass() {
|
||||
return 'theme-light';
|
||||
}
|
||||
|
||||
// #docregion
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ import {Hero} from './hero';
|
|||
})
|
||||
// #enddocregion inlinestyles
|
||||
export class HeroControlsComponent {
|
||||
|
||||
@Input() hero: Hero;
|
||||
|
||||
activate() {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@ import {HeroTeamComponent} from './hero-team.component';
|
|||
})
|
||||
export class HeroDetailsComponent {
|
||||
// #enddocregion styleurls
|
||||
|
||||
@Input() hero: Hero;
|
||||
// #docregion styleurls
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
No quests in progress
|
||||
<p>No quests in progress</p>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
// #docregion
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'quest-summary',
|
||||
|
|
@ -11,6 +10,8 @@ import {Component, ViewEncapsulation} from '@angular/core';
|
|||
templateUrl: 'quest-summary.component.html',
|
||||
styleUrls: ['quest-summary.component.css']
|
||||
// #enddocregion urls
|
||||
})
|
||||
export class QuestSummaryComponent { }
|
||||
// #enddocregion
|
||||
/*
|
||||
// #docregion encapsulation.native
|
||||
|
|
@ -18,7 +19,3 @@ import {Component, ViewEncapsulation} from '@angular/core';
|
|||
encapsulation: ViewEncapsulation.Native
|
||||
// #enddocregion encapsulation.native
|
||||
*/
|
||||
// #docregion
|
||||
})
|
||||
export class QuestSummaryComponent { }
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { CarComponent } from './car/car.component';
|
||||
import { HeroesComponent } from './heroes/heroes.component.1';
|
||||
|
||||
|
|
|
|||
|
|
@ -47,15 +47,15 @@ export class AppComponent {
|
|||
//#docregion ctor
|
||||
constructor(
|
||||
@Inject(APP_CONFIG) config:Config,
|
||||
private _userService: UserService) {
|
||||
private userService: UserService) {
|
||||
|
||||
this.title = config.title;
|
||||
}
|
||||
// #enddocregion ctor
|
||||
|
||||
get isAuthorized() { return this.user.isAuthorized;}
|
||||
nextUser() { this._userService.getNewUser(); }
|
||||
get user() { return this._userService.user; }
|
||||
nextUser() { this.userService.getNewUser(); }
|
||||
get user() { return this.userService.user; }
|
||||
|
||||
get userInfo() {
|
||||
return `Current user, ${this.user.name}, is `+
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component, Injector } from '@angular/core';
|
||||
|
||||
import { Car, Engine, Tires } from './car';
|
||||
import { Car as CarNoDi } from './car-no-di';
|
||||
import { CarFactory } from './car-factory';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HEROES } from './mock-heroes';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HEROES } from './mock-heroes';
|
||||
import { Logger } from '../logger.service';
|
||||
|
|
@ -8,11 +9,11 @@ import {Logger} from '../logger.service';
|
|||
export class HeroService {
|
||||
|
||||
//#docregion ctor
|
||||
constructor(private _logger: Logger) { }
|
||||
constructor(private logger: Logger) { }
|
||||
//#enddocregion ctor
|
||||
|
||||
getHeroes() {
|
||||
this._logger.log('Getting heroes ...')
|
||||
this.logger.log('Getting heroes ...')
|
||||
return HEROES;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { provide } from '@angular/core';
|
||||
|
||||
import { HeroService } from './hero.service';
|
||||
import { Logger } from '../logger.service';
|
||||
import { UserService } from '../user.service';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HEROES } from './mock-heroes';
|
||||
import { Logger } from '../logger.service';
|
||||
|
|
@ -10,13 +11,13 @@ export class HeroService {
|
|||
|
||||
// #docregion internals
|
||||
constructor(
|
||||
private _logger: Logger,
|
||||
private _isAuthorized: boolean) { }
|
||||
private logger: Logger,
|
||||
private isAuthorized: boolean) { }
|
||||
|
||||
getHeroes() {
|
||||
let auth = this._isAuthorized ? 'authorized ': 'unauthorized';
|
||||
this._logger.log(`Getting heroes for ${auth} user.`);
|
||||
return HEROES.filter(hero => this._isAuthorized || !hero.isSecret);
|
||||
let auth = this.isAuthorized ? 'authorized ': 'unauthorized';
|
||||
this.logger.log(`Getting heroes for ${auth} user.`);
|
||||
return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
|
||||
}
|
||||
// #enddocregion internals
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
// #docregion
|
||||
// #docregion v1
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
// #enddocregion v1
|
||||
import { HeroService } from './hero.service';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { heroServiceProvider} from './hero.service.provider';
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue