Merge remote-tracking branch 'origin/master'

# Conflicts:
#	README.md
#	public/_includes/_hero-home.jade
#	public/_includes/_scripts-include.jade
#	public/docs/dart/latest/_data.json
#	public/docs/ts/latest/_data.json
#	public/docs/ts/latest/cookbook/_data.json
#	public/docs/ts/latest/cookbook/ajs-quick-reference.jade
#	public/docs/ts/latest/cookbook/aot-compiler.jade
#	public/docs/ts/latest/cookbook/component-communication.jade
#	public/docs/ts/latest/cookbook/component-relative-paths.jade
#	public/docs/ts/latest/cookbook/dependency-injection.jade
#	public/docs/ts/latest/cookbook/dynamic-form.jade
#	public/docs/ts/latest/cookbook/form-validation.jade
#	public/docs/ts/latest/cookbook/i18n.jade
#	public/docs/ts/latest/cookbook/ngmodule-faq.jade
#	public/docs/ts/latest/cookbook/set-document-title.jade
#	public/docs/ts/latest/cookbook/ts-to-js.jade
#	public/docs/ts/latest/glossary.jade
#	public/docs/ts/latest/guide/_data.json
#	public/docs/ts/latest/guide/animations.jade
#	public/docs/ts/latest/guide/appmodule.jade
#	public/docs/ts/latest/guide/architecture.jade
#	public/docs/ts/latest/guide/attribute-directives.jade
#	public/docs/ts/latest/guide/browser-support.jade
#	public/docs/ts/latest/guide/change-log.jade
#	public/docs/ts/latest/guide/component-styles.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/hierarchical-dependency-injection.jade
#	public/docs/ts/latest/guide/index.jade
#	public/docs/ts/latest/guide/lifecycle-hooks.jade
#	public/docs/ts/latest/guide/ngmodule.jade
#	public/docs/ts/latest/guide/npm-packages.jade
#	public/docs/ts/latest/guide/pipes.jade
#	public/docs/ts/latest/guide/router.jade
#	public/docs/ts/latest/guide/security.jade
#	public/docs/ts/latest/guide/server-communication.jade
#	public/docs/ts/latest/guide/setup-systemjs-anatomy.jade
#	public/docs/ts/latest/guide/setup.jade
#	public/docs/ts/latest/guide/structural-directives.jade
#	public/docs/ts/latest/guide/style-guide.jade
#	public/docs/ts/latest/guide/template-syntax.jade
#	public/docs/ts/latest/guide/testing.jade
#	public/docs/ts/latest/guide/typescript-configuration.jade
#	public/docs/ts/latest/guide/upgrade.jade
#	public/docs/ts/latest/guide/user-input.jade
#	public/docs/ts/latest/guide/webpack.jade
#	public/docs/ts/latest/index.jade
#	public/docs/ts/latest/quickstart.jade
#	public/docs/ts/latest/tutorial/toh-pt1.jade
#	public/docs/ts/latest/tutorial/toh-pt2.jade
#	public/docs/ts/latest/tutorial/toh-pt3.jade
#	public/docs/ts/latest/tutorial/toh-pt4.jade
#	public/docs/ts/latest/tutorial/toh-pt5.jade
#	public/docs/ts/latest/tutorial/toh-pt6.jade
#	public/events.jade
#	public/presskit.jade
#	public/resources/js/directives/cheatsheet.js
This commit is contained in:
Zhicheng Wang 2017-02-26 15:04:21 +08:00
commit 6af595d7bd
1910 changed files with 19515 additions and 34279 deletions

4
.gitignore vendored
View File

@ -31,5 +31,7 @@ eplnkr.html
#public/docs/*/latest/guide/cheatsheet.json
protractor-results.txt
link-checker-results.txt
*a2docs.css
/dist
/public/docs/dart
/public/docs/ts/_cache
/public/docs/_examples/*/dart

View File

@ -10,19 +10,29 @@ env:
- DBUS_SESSION_BUS_ADDRESS=/dev/null
- DISPLAY=:99.0
- CHROME_BIN=chromium-browser
- LATEST_RELEASE=2.2.3
- LATEST_RELEASE=2.4.0
- LATEST_RELEASE_BRANCH=2.4.x
- TASK_FLAGS="--dgeni-log=warn"
matrix:
# current angular release jobs
- TASK=lint
- TASK="run-e2e-tests --fast" SCRIPT=examples-install.sh
- TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh
- TASK=build-compile SCRIPT=deploy-install.sh WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
- TASK=build-compile SCRIPT=deploy-install-preview.sh WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
# current angular release branch jobs
- TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH
- TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
# angular master jobs
- TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=master
- TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=master WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
matrix:
fast_finish: true
allow_failures:
- env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh
- env: TASK=build-compile SCRIPT=deploy-install-preview.sh WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
# allow current angular release branch and master to fail
# these should be moved to a daily task instead of being ran on every PR
- env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH
- env: TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
- env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=master
- env: TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=master WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
before_install:
- source ./scripts/env-set.sh
- ./scripts/before-install.sh

View File

@ -1,6 +1,6 @@
The MIT License
Copyright (c) 2016 Google, Inc.
Copyright (c) 2017 Google, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

View File

@ -1,15 +1,54 @@
{
"hosting": {
"public": "www",
"rewrites": [
"redirects": [
{
"source": "/docs/dart/latest/testing",
"destination": "/docs/dart/latest/guide/testing.html"
"source": "/docs/dart/latest/quickstart.html",
"destination": "https://webdev.dartlang.org/angular/quickstart?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
"type": 301
},
{
"source": "/docs/dart/latest/tutorial/toh-pt5.html",
"destination": "https://webdev.dartlang.org/angular/tutorial/toh-pt5?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
"type": 301
},
{
"source": "/docs/dart/latest/tutorial",
"destination": "/docs/dart/latest/index.html"
"destination": "https://webdev.dartlang.org/angular/tutorial?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
"type": 301
},
{
"source": "/docs/dart/latest/tutorial/**",
"destination": "https://webdev.dartlang.org/angular/tutorial?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
"type": 301
},
{
"source": "/docs/dart/latest/api",
"destination": "https://webdev.dartlang.org/angular/api?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
"type": 301
},
{
"source": "/docs/dart/latest/api/**",
"destination": "https://webdev.dartlang.org/angular/api?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
"type": 301
},
{
"source": "/docs/dart/latest/guide/**",
"destination": "https://webdev.dartlang.org/angular/guide?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
"type": 301
},
{
"source": "/**/dart",
"destination": "https://webdev.dartlang.org/angular?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
"type": 301
},
{
"source": "/**/dart/**",
"destination": "https://webdev.dartlang.org/angular?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
"type": 301
}
],
"rewrites": [
{
"source": "/docs/js/latest/testing",
"destination": "/docs/js/latest/guide/testing.html"
@ -18,6 +57,10 @@
"source": "/docs/js/latest/tutorial",
"destination": "/docs/js/latest/index.html"
},
{
"source": "/docs/ts/latest/cookbook/a1-a2-quick-reference.html",
"destination": "/docs/ts/latest/cookbook/ajs-quick-reference.html"
},
{
"source": "/docs/ts/latest/guide/setup.html",
"destination": "/docs/ts/latest/index.html"
@ -58,10 +101,6 @@
"source": "/survey",
"destination": "/survey.html"
},
{
"source": "/dart",
"destination": "/docs/dart/latest/index.html"
},
{
"source": "/styleguide",
"destination": "/docs/ts/latest/guide/style-guide.html"
@ -70,7 +109,8 @@
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
"**/node_modules/**",
"docs/dart/**"
]
}
}

View File

@ -77,15 +77,6 @@ var _apiShredOptions = {
logLevel: _dgeniLogLevel
};
const relDartDocApiDir = path.join('doc', 'api');
var _apiShredOptionsForDart = {
lang: 'dart',
examplesDir: path.resolve(ANGULAR_PROJECT_PATH + '2_api_examples'),
fragmentsDir: path.join(DOCS_PATH, '_fragments/_api'),
zipDir: path.join(RESOURCES_PATH, 'zips/api'),
logLevel: _dgeniLogLevel
};
var _excludePatterns = ['**/node_modules/**', '**/packages/**'];
var _excludeMatchers = _excludePatterns.map(function(excludePattern){
@ -93,25 +84,23 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
});
var _exampleBoilerplateFiles = [
'a2docs.css',
'src/styles.css',
'src/systemjs.config.js',
'src/tsconfig.json',
'bs-config.json',
'bs-config.e2e.json',
'package.json',
'styles.css',
'systemjs.config.js',
'tsconfig.json',
'tslint.json'
];
var _exampleDartWebBoilerPlateFiles = ['a2docs.css', 'styles.css'];
var _exampleUnitTestingBoilerplateFiles = [
'src/browser-test-shim.js',
'karma-test-shim.js',
'karma.conf.js'
];
var _exampleConfigFilename = 'example-config.json';
var _styleLessName = 'a2docs.less';
// Gulp flags:
//
// --lang=[all | ts | js | dart | 'ts|js' | 'ts|js|dart' | ...]
@ -127,7 +116,7 @@ function configLangs(langOption) {
const fullSiteBuildTasks = ['build-compile', 'check-deploy', 'harp-compile'];
const buildAllDocs = argv['_'] &&
fullSiteBuildTasks.some((task) => argv['_'].indexOf(task) >= 0);
const langDefault = buildAllDocs ? 'all' : 'ts|js';
const langDefault = /*buildAllDocs ? 'all' :*/ 'ts|js';
if (langOption === '') {
lang = '';
langs = [];
@ -190,21 +179,12 @@ function runE2e() {
// fast; skip all setup
promise = Promise.resolve(true);
} else {
/*
// Not 'fast'; do full setup
var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH});
promise = spawnInfo.promise.then(function() {
copyExampleBoilerplate();
spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PATH});
return spawnInfo.promise;
});
*/
// Not 'fast'; do full setup
gutil.log('runE2e: install _examples stuff');
var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH});
promise = spawnInfo.promise
.then(copyExampleBoilerplate)
.then(function() {
buildStyles(copyExampleBoilerplate, _.noop);
gutil.log('runE2e: update webdriver');
spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PATH});
return spawnInfo.promise;
@ -291,8 +271,8 @@ function runE2eTsTests(appDir, outputFile) {
}
var config = {
build: exampleConfig.build || 'tsc',
run: exampleConfig.run || 'http-server:e2e'
build: exampleConfig.build || 'build',
run: exampleConfig.run || 'serve:e2e'
};
var appBuildSpawnInfo = spawnExt('npm', ['run', config.build], { cwd: appDir });
@ -358,7 +338,7 @@ function runProtractorAoT(appDir, outputFile) {
promise = promise.then(() =>
spawnExt('node', [copyFileCmd], { cwd: appDir }).promise );
}
var aotRunSpawnInfo = spawnExt('npm', ['run', 'http-server:e2e', 'aot', '--', '-s'], { cwd: appDir });
var aotRunSpawnInfo = spawnExt('npm', ['run', 'serve:aot'], { cwd: appDir });
return runProtractor(promise, appDir, aotRunSpawnInfo, outputFile);
}
@ -372,7 +352,7 @@ function runE2eDartTests(appDir, outputFile) {
gutil.log('AppDir for Dart e2e: ' + appDir);
gutil.log('Deploying from: ' + deployDir);
var appRunSpawnInfo = spawnExt('npm', ['run', 'http-server:e2e', '--', deployDir, '-s'], { cwd: httpLaunchDir });
var appRunSpawnInfo = spawnExt('npm', ['run', 'serve:e2e', '--', deployDir, '-s'], { cwd: httpLaunchDir });
if (!appRunSpawnInfo.proc.pid) {
gutil.log('http-server failed to launch over ' + deployDir);
return false;
@ -456,7 +436,7 @@ gulp.task('help', taskListing.withFilters(function(taskName) {
}));
// requires admin access because it adds symlinks
gulp.task('add-example-boilerplate', function(done) {
gulp.task('add-example-boilerplate', function() {
var realPath = path.join(EXAMPLES_PATH, '/node_modules');
var nodeModulesPaths = excludeDartPaths(getNodeModulesPaths(EXAMPLES_PATH));
@ -465,55 +445,31 @@ gulp.task('add-example-boilerplate', function(done) {
fsUtils.addSymlink(realPath, linkPath);
});
return buildStyles(copyExampleBoilerplate, done);
return copyExampleBoilerplate();
});
// copies boilerplate files to locations
// where an example app is found
gulp.task('_copy-example-boilerplate', function (done) {
return argv.fast ? done() : buildStyles(copyExampleBoilerplate, done);
return argv.fast ? done() : copyExampleBoilerplate();
});
//Builds Angular Docs CSS file from Bootstrap npm LESS source
//and copies the result to the _examples folder to be included as
//part of the example boilerplate.
function buildStyles(cb, done){
gulp.src(path.join(STYLES_SOURCE_PATH, _styleLessName))
.pipe(less())
.pipe(gulp.dest(BOILERPLATE_PATH)).on('end', function(){
cb().then(function() { done(); });
});
}
// copies boilerplate files to locations
// where an example app is found
// also copies certain web files (e.g., styles.css) to ~/_examples/**/dart/**/web
function copyExampleBoilerplate() {
gutil.log('Copying example boilerplate files');
var sourceFiles = _exampleBoilerplateFiles.map(function(fn) {
return path.join(BOILERPLATE_PATH, fn);
});
var examplePaths = excludeDartPaths(getExamplePaths(EXAMPLES_PATH));
var dartWebSourceFiles = _exampleDartWebBoilerPlateFiles.map(function(fn){
return path.join(BOILERPLATE_PATH, fn);
});
var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
// Make boilerplate files read-only to avoid that they be edited by mistake.
var destFileMode = '444';
return copyFiles(sourceFiles, examplePaths, destFileMode)
.then(function() {
return copyFiles(dartWebSourceFiles, dartExampleWebPaths, destFileMode);
})
return copyFiles(_exampleBoilerplateFiles, BOILERPLATE_PATH, examplePaths, destFileMode)
// copy the unit test boilerplate
.then(function() {
var unittestSourceFiles =
_exampleUnitTestingBoilerplateFiles
.map(function(name) { return path.join(EXAMPLES_TESTING_PATH, name); });
var unittestPaths = getUnitTestingPaths(EXAMPLES_PATH);
return copyFiles(unittestSourceFiles, unittestPaths, destFileMode);
return copyFiles(_exampleUnitTestingBoilerplateFiles,
EXAMPLES_TESTING_PATH, unittestPaths, destFileMode);
})
.catch(function(err) {
gutil.log(err);
@ -587,10 +543,11 @@ function deleteExampleBoilerPlate() {
gutil.log('Deleting example boilerplate files');
var examplePaths = getExamplePaths(EXAMPLES_PATH);
var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
var unittestPaths = getUnitTestingPaths(EXAMPLES_PATH);
return deleteFiles(_exampleBoilerplateFiles, examplePaths)
.then(function() {
return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths);
return deleteFiles(_exampleUnitTestingBoilerplateFiles, unittestPaths);
});
}
@ -619,8 +576,7 @@ gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunker
// Stop zipping examples Feb 28, 2016
//gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers', '_zip-examples']);
gulp.task('build-api-docs', ['build-js-api-docs', 'build-ts-api-docs']
.concat(buildDartApiDocs ? ['build-dart-api-docs', 'build-dart-cheatsheet'] : []));
gulp.task('build-api-docs', ['build-js-api-docs', 'build-ts-api-docs']);
gulp.task('build-devguide-docs', ['_shred-devguide-examples', '_shred-devguide-shared-jade'], function() {
return buildShredMaps(true);
@ -634,50 +590,12 @@ gulp.task('build-js-api-docs', ['_shred-api-examples'], function() {
return buildApiDocs('js');
});
gulp.task('build-dart-api-docs', ['_shred-api-examples', 'dartdoc'], function() {
return buildApiDocsForDart();
});
// Using the --build flag will use systemjs.config.web.build.js (for preview builds)
gulp.task('build-plunkers', ['_copy-example-boilerplate'], function() {
regularPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build });
return embeddedPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build, targetSelf: argv.targetSelf });
});
gulp.task('build-dart-cheatsheet', [], function() {
return buildDartCheatsheet();
});
gulp.task('dartdoc', ['pub upgrade'], function() {
const ngRepoPath = ngPathFor('dart');
if (argv.fast && fs.existsSync(path.resolve(ngRepoPath, relDartDocApiDir))) {
gutil.log(`Skipping dartdoc: --fast flag enabled and api dir exists (${relDartDocApiDir})`);
return true;
}
checkAngularProjectPath(ngRepoPath);
const topLevelLibFilePath = path.resolve(ngRepoPath, 'lib', 'angular2.dart');
const tmpPath = topLevelLibFilePath + '.disabled';
renameIfExistsSync(topLevelLibFilePath, tmpPath);
gutil.log(`Hiding top-level angular2 library: ${topLevelLibFilePath}`);
// Remove dartdoc '--add-crossdart' flag while we are fixing links to API pages.
const dartdoc = spawnExt('dartdoc', ['--output', relDartDocApiDir], { cwd: ngRepoPath});
return dartdoc.promise.finally(() => {
gutil.log(`Restoring top-level angular2 library: ${topLevelLibFilePath}`);
renameIfExistsSync(tmpPath, topLevelLibFilePath);
})
});
gulp.task('pub upgrade', [], function() {
const ngRepoPath = ngPathFor('dart');
if (argv.fast && fs.existsSync(path.resolve(ngRepoPath, 'packages'))) {
gutil.log('Skipping pub upgrade: --fast flag enabled and "packages" dir exists');
return true;
}
checkAngularProjectPath(ngRepoPath);
const pubUpgrade = spawnExt('pub', ['upgrade'], { cwd: ngRepoPath});
return pubUpgrade.promise;
});
gulp.task('git-changed-examples', ['_shred-devguide-examples'], function(){
var after, sha, messageSuffix;
if (argv.after) {
@ -858,8 +776,7 @@ gulp.task('_shred-api-examples', ['_shred-clean-api'], function() {
langs.forEach(lang => {
if (lang === 'js') return; // JS is handled via TS.
checkAngularProjectPath(ngPathFor(lang));
const options = lang == 'dart' ? _apiShredOptionsForDart : _apiShredOptions;
promises.push(docShredder.shred(options));
promises.push(docShredder.shred(_apiShredOptions));
});
return Q.all(promises);
});
@ -909,7 +826,7 @@ function harpCompile() {
if(skipLangs && fs.existsSync(WWW) && backupApiHtmlFilesExist(WWW)) {
gutil.log(`Harp site recompile: skipping recompilation of API docs for [${skipLangs}]`);
gutil.log(`API docs will be copied from existing ${WWW} folder.`)
gutil.log(`API docs will be copied from existing ${WWW} folder (if they exist).`)
del.sync(`${WWW}-backup`); // remove existing backup if it exists
renameIfExistsSync(WWW, `${WWW}-backup`);
} else {
@ -1064,7 +981,7 @@ function restoreApiHtml() {
const relApiDir = path.join('docs', lang, vers, 'api');
const apiSubdir = path.join(WWW, relApiDir);
const backupApiSubdir = path.join(`${WWW}-backup`, relApiDir);
if (fs.existsSync(backupApiSubdir) || argv.forceSkipApi !== true) {
if (fs.existsSync(backupApiSubdir)) {
gutil.log(`cp ${backupApiSubdir} ${apiSubdir}`)
fs.copySync(backupApiSubdir, apiSubdir);
}
@ -1076,6 +993,7 @@ function backupApiHtmlFilesExist(folderName) {
const vers = 'latest';
var result = 1;
skipLangs.forEach(lang => {
if (lang === 'dart') return true;
const relApiDir = path.join('docs', lang, vers, 'api');
const backupApiSubdir = path.join(folderName, relApiDir);
if (!fs.existsSync(backupApiSubdir)) {
@ -1096,15 +1014,15 @@ function harpJsonSetJade2NgTo(v) {
// Copies fileNames into destPaths, setting the mode of the
// files at the destination as optional_destFileMode if given.
// returns a promise
function copyFiles(fileNames, destPaths, optional_destFileMode) {
function copyFiles(fileNames, originPath, destPaths, optional_destFileMode) {
var copy = Q.denodeify(fsExtra.copy);
var chmod = Q.denodeify(fsExtra.chmod);
var copyPromises = [];
destPaths.forEach(function(destPath) {
fileNames.forEach(function(fileName) {
var baseName = path.basename(fileName);
var destName = path.join(destPath, baseName);
var p = copy(fileName, destName, { clobber: true});
var originName = path.join(originPath, fileName);
var destName = path.join(destPath, fileName);
var p = copy(originName, destName, { clobber: true});
if(optional_destFileMode !== undefined) {
p = p.then(function () {
return chmod(destName, optional_destFileMode);
@ -1345,72 +1263,6 @@ function buildApiDocs(targetLanguage) {
}
}
function buildDartCheatsheet() {
'use strict';
const ALLOWED_LANGUAGES = ['ts', 'js', 'dart'];
const lang = 'dart';
const vers = 'latest';
checkAngularProjectPath(ngPathFor(lang));
try {
const pkg = new Package('dartApiDocs', [require(path.resolve(TOOLS_PATH, 'dart-api-builder'))]);
pkg.config(function(log, targetEnvironments, writeFilesProcessor) {
log.level = _dgeniLogLevel;
ALLOWED_LANGUAGES.forEach(function(target) { targetEnvironments.addAllowed(target); });
targetEnvironments.activate(lang);
const outputPath = path.join(lang, vers, 'can-be-any-name-read-comment-below');
// Note: cheatsheet data gets written to: outputPath + '/../guide';
writeFilesProcessor.outputFolder = outputPath;
});
var dgeni = new Dgeni([pkg]);
return dgeni.generate();
} catch(err) {
console.error(err);
console.error(err.stack);
throw err;
}
}
function buildApiDocsForDart() {
const vers = 'latest';
const dab = require('./tools/dart-api-builder/dab')(ANGULAR_IO_PROJECT_PATH);
const log = dab.log;
log.level = _dgeniLogLevel;
const dabInfo = dab.dartPkgConfigInfo;
dabInfo.ngIoDartApiDocPath = path.join(DOCS_PATH, 'dart', vers, 'api');
dabInfo.ngDartDocPath = path.join(ngPathFor('dart'), relDartDocApiDir);
// Exclude API entries for developer/internal libraries. Also exclude entries for
// the top-level catch all "angular2" library (otherwise every entry appears twice).
dabInfo.excludeLibRegExp = new RegExp(/^(?!angular2)|testing|_|codegen|^angular2$/);
try {
checkAngularProjectPath(ngPathFor('dart'));
var destPath = dabInfo.ngIoDartApiDocPath;
var sourceDirs = fs.readdirSync(dabInfo.ngDartDocPath)
.filter(name => !name.match(/^index|^(?!angular2)|testing|codegen/))
.map(name => path.join(dabInfo.ngDartDocPath, name));
log.info(`Building Dart API pages for ${sourceDirs.length} libraries`);
return copyFiles(sourceDirs, [destPath]).then(() => {
log.debug('Finished copying', sourceDirs.length, 'directories from', dabInfo.ngDartDocPath, 'to', destPath);
const apiEntries = dab.loadApiDataAndSaveToApiListFile();
const tmpDocsPath = path.resolve(path.join(process.env.HOME, 'tmp/docs.json'));
if (argv.dumpDocsJson) fs.writeFileSync(tmpDocsPath, JSON.stringify(apiEntries, null, 2));
dab.createApiDataAndJadeFiles(apiEntries);
}).catch((err) => {
console.error(err);
});
} catch(err) {
console.error(err);
console.error(err.stack);
throw err;
}
}
function buildShredMaps(shouldWrite) {
var options = {
devguideExamplesDir: _devguideShredOptions.examplesDir,

159
harp.json
View File

@ -31,7 +31,7 @@
"picture": "/resources/images/bios/naomi.jpg",
"twitter": "naomitraveller",
"website": "http://google.com/+NaomiBlack",
"bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular's global programs (including localization), supports Angular's internal Google users, and acts as webmaster for angular.io and angular.cn. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
"bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She supports Angular's internal Google users and solves hard-to-define problems. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
"type": "Lead"
},
@ -53,12 +53,21 @@
"type": "Lead"
},
"jelbourn": {
"name": "Jeremy Elbourn",
"picture": "/resources/images/bios/jelbourn.jpg",
"twitter": "jelbourn",
"website": "https://plus.google.com/+JeremyElbourn/",
"bio": "Angular Material Team Lead. FE Engineer @ Google specializing in AngularJS, component design, and the cleanest of code.",
"type": "Lead"
},
"pete": {
"name": "Pete Bacon Darwin",
"picture": "/resources/images/bios/pete.jpg",
"twitter": "petebd",
"website": "http://www.bacondarwin.com",
"bio": "Angular 1 for JS Team Lead. Pete has been working on the core team since 2012 and became the team lead for the Angular 1 for JS branch in November 2014. He has co-authored a book on AngularJS and regularly talks about and teaches Angular.",
"bio": "AngularJS for JS Team Lead. Pete has been working on the core team since 2012 and became the team lead for the AngularJS for JS branch in November 2014. He has co-authored a book on AngularJS and regularly talks about and teaches Angular.",
"type": "Lead"
},
@ -67,19 +76,33 @@
"picture": "/resources/images/bios/thomas.jpg",
"twitter": "ThomasBurleson",
"website": "http://www.solutionOptimist.com",
"bio": "Angular Material 1.x Team Lead. Thomas works with the Angular core teams and helps deliver the Angular-native UX framework (v1.x and v2) based on Google's Material Design.",
"bio": "AngularJS Material and @angular/flex-layout Team Lead. Thomas joined the core team in 2014. He leads a team of developers working on UX components for AngularJS.",
"type": "Lead"
},
"victorsavkin": {
"name": "Victor Savkin",
"picture": "/resources/images/bios/victor.jpg",
"twitter": "victorsavkin",
"website": "http://victorsavkin.com/",
"bio": "Victor works on Angular at Google. He is interested in functional programming and client-side applications. Being a language nerd he spends a lot of his time playing with TypeScript, Dart, Elm, Haskell, and Clojure.",
"stephenfluin": {
"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"
},
"robwormald": {
"name": "Rob Wormald",
"picture": "/resources/images/bios/rob-wormald.jpg",
"twitter": "robwormald",
"website": "http://github.com/robwormald",
"bio": "Rob is a Developer Advocate on the Angular team at Google. He's the Angular team's resident reactive programming geek and founded the Reactive Extensions for Angular project, ngrx.",
"type": "Google"
},
"aaronzhang": {
"name": "Aaron Zhang (章小飞)",
"picture": "/resources/images/bios/xiaofei.jpg",
"twitter": "",
"website": "http://github.com/damoqiongqiu",
"bio": "Aaron is Angular's developer PM in China. He is the lead for angular.cn and social channels in China, and helps developers in China's enterprise and open source communities to be successful with Angular. One of the earliest Angular developers in China since Angular 2012, he translated the first books on Angular into Chinese. Aaron joined the Google team in 2016.",
"type": "Google"
},
"tobias": {
"name": "Tobias Bosch",
"picture": "/resources/images/bios/tobias.jpg",
@ -106,16 +129,6 @@
"bio": "David East is a Developer Programs Engineer at Google. He works full-time on the Firebase team and part-time on the Angular core team.",
"type": "Google"
},
"jeffcross": {
"name": "Jeff Cross",
"picture": "/resources/images/bios/jeff-cross.jpg",
"twitter": "jeffbcross",
"website": "https://twitter.com/jeffbcross",
"bio": "Jeff is a member of the Angular core team at Google, focusing on data access and application performance. Jeff has an extensive background in open source software, marketing, and user experience design. When not in front of a computer, he spends his time doing whatever his kids tell him to do, which usually involves playing music or making gadgets.",
"type": "Google"
},
"alexeagle": {
"name": "Alex Eagle",
"picture": "/resources/images/bios/alex-eagle.jpg",
@ -148,16 +161,7 @@
"picture": "/resources/images/bios/alex-rickabaugh.jpg",
"twitter": "synalx",
"website": "https://plus.google.com/+AlexRickabaugh/about",
"bio": "I am a new member of the Angular team, solving challenges of data access and RPC for applications of any scale.",
"type": "Google"
},
"jelbourn": {
"name": "Jeremy Elbourn",
"picture": "/resources/images/bios/jelbourn.jpg",
"twitter": "jelbourn",
"website": "https://plus.google.com/+JeremyElbourn/",
"bio": "FE Engineer @ Google specializing in AngularJS, component design, and the cleanest of code.",
"bio": "Core team member working to optimize the Angular platform for the next generation of applications, including mobile. Before joining the Angular team, Alex worked in the Google sales organization where he helped build the first large Angular application within Google.",
"type": "Google"
},
@ -188,6 +192,22 @@
"type": "Google"
},
"victorsavkin": {
"name": "Victor Savkin",
"picture": "/resources/images/bios/victor.jpg",
"twitter": "victorsavkin",
"website": "http://victorsavkin.com/",
"bio": "Victor has been on the Angular team since the inception of Angular. While at Google, Victor developed dependency injection, change detection, forms, and the router. Today he is a co-founder at nrwl.io.",
"type": "Community"
},
"jeffcross": {
"name": "Jeff Cross",
"picture": "/resources/images/bios/jeff-cross.jpg",
"twitter": "jeffbcross",
"website": "https://twitter.com/jeffbcross",
"bio": "Jeff was one of the earliest core team members on AngularJS. He developed the Angular http and AngularFire modules, contributed to RxJS 5, and was most recently the Tech Lead of the Angular Mobile team at Google. Jeff is a former Googler and co-founder at nrwl.io.",
"type": "Community"
},
"alexwolfe": {
"name": "Alex Wolfe",
"picture": "/resources/images/bios/alex-wolfe.jpg",
@ -202,7 +222,7 @@
"picture": "/resources/images/bios/marcy.jpg",
"twitter": "marcysutton",
"website": "http://marcysutton.com",
"bio": "Marcy Sutton is a senior front-end engineer at Deque Systems, where she works on the axe-core team focusing on accessibility test integrations. Marcy is passionate about making the web accessible for everyone. She is a core team member to ngMaterial 1 and 2, where she regularly brings her accessibility expertise to the tableshe is also a primary contributor to the ngAria module as well as an accessibility plugin for Protractor. She's in love with riding bicycles and snowboards and can often be found outside.",
"bio": "Marcy Sutton is a senior front-end engineer at Deque Systems, where she works on the axe-core team focusing on accessibility test integrations. Marcy is passionate about making the web accessible for everyone. She is a core team member to Angular Material, where she regularly brings her accessibility expertise to the tableshe is also a primary contributor to the ngAria module as well as an accessibility plugin for Protractor. She's in love with riding bicycles and snowboards and can often be found outside.",
"type": "Community"
},
@ -224,33 +244,6 @@
"type": "Google"
},
"tonyc": {
"name": "Tony Childs",
"picture": "/resources/images/bios/tonyc.jpg",
"twitter": "javatricks",
"website": "http://www.stupidjavatricks.com",
"bio": "Tony Childs is a consultant working for Google. He is a contributor to the Angular Material project and is responsible for the md-icon component.",
"type": "Google"
},
"ryan": {
"name": "Ryan Schmukler",
"picture": "/resources/images/bios/ryan.jpg",
"twitter": "rschmukler",
"website": "http://slingingcode.com",
"bio": "Developer on ngMaterial. Full-stack JavaScript hacker. Open-source contributor with libraries totaling over 225K downloads.",
"type": "Community"
},
"rmesserle": {
"name": "Robert Messerle",
"picture": "/resources/images/bios/rmesserle.jpg",
"twitter": "Bobbo_O",
"website": "https://github.com/robertmesserle",
"bio": "Robert is a software engineer on the Angular team at Google, working primarily on the Angular Material project.",
"type": "Google"
},
"kathy": {
"name": "Kathy Walrath",
"picture": "/resources/images/bios/kathy.jpg",
@ -259,14 +252,6 @@
"bio": "Kathy writes and edits docs about Dart and related technologies. Before Google, she worked at Sun, NeXT, and HP. Long ago, Kathy co-created and maintained The Java Tutorial.",
"type": "Google"
},
"scott": {
"name": "Scott Hyndman",
"picture": "/resources/images/bios/scott.jpg",
"twitter": "scotthyndman",
"website": "https://github.com/shyndman",
"bio": "Scott works for Google on the Material Design team, where he brings designers' dreams to life on the web.",
"type": "Google"
},
"kara": {
"name": "Kara Erickson",
@ -285,22 +270,6 @@
"bio": "Chuck is a Software Engineer on the Angular team at Google. He is a programming language geek, UI framework and component library veteran, and has a passion for simplifying the task of programming. Before Google, he worked at Microsoft and Borland.",
"type": "Google"
},
"stephenfluin": {
"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"
},
"robwormald": {
"name": "Rob Wormald",
"picture": "/resources/images/bios/rob-wormald.jpg",
"twitter": "robwormald",
"website": "http://github.com/robwormald",
"bio": "Rob is a Developer Advocate on the Angular team at Google. He's the Angular team's resident reactive programming geek and founded the Reactive Extensions for Angular project, ngrx.",
"type": "Google"
},
"vikram": {
"name": "Vikram Subramanian",
"picture": "/resources/images/bios/vikram.jpg",
@ -336,7 +305,7 @@
"picture": "/resources/images/bios/michal.jpg",
"twitter": "m_gol",
"website": "https://plus.google.com/u/0/103101124310040612163/",
"bio": "Front-end developer at Laboratorium EE, core contributor to Angular & jQuery. Makes sure Angular 1 & jQuery work fine together. Interested in new JavaScript standards.",
"bio": "Front-end developer at Laboratorium EE, core contributor to Angular & jQuery. Makes sure AngularJS & jQuery work fine together. Interested in new JavaScript standards.",
"type": "Community"
},
@ -378,7 +347,7 @@
"picture": "/resources/images/bios/patrick-stapleton.jpg",
"twitter": "gdi2290",
"website": "https://angularclass.com",
"bio": "Also know as PatrickJS where JS stands for his middle and last names. Patrick is very active in Open-Source with over 4,300+ contributions in the last year alone on projects such as Angular2, AngularJS, FalcorJS, Docker, Bootstrap, gulp, and redis to name a few. He is also working on the development of Angular server-side rendering as Universal Angular and teaching Modern Web Development at AngularClass. He was previously the CTO of Keychain Logistics, a HackReactor Instructor and Alum.",
"bio": "Also know as PatrickJS where JS stands for his middle and last names. Patrick is very active in Open-Source with over 4,300+ contributions in the last year alone on projects such as Angular, AngularJS, FalcorJS, Docker, Bootstrap, gulp, and redis to name a few. He is also working on the development of Angular server-side rendering as Universal Angular and teaching Modern Web Development at AngularClass. He was previously the CTO of Keychain Logistics, a HackReactor Instructor and Alum.",
"type": "Community"
},
@ -411,7 +380,7 @@
"name": "Martin Staffa",
"picture": "/resources/images/bios/martinstaffa.jpg",
"twitter": "Narretz",
"bio": "Martin is an English major turned web developer who loves frontend stuff. He's been part of the Angular 1 team since 2014. If you can't find him roaming the Github issue queues, he's probably out with his camera somewhere.",
"bio": "Martin is an English major turned web developer who loves frontend stuff. He's been part of the AngularJS team since 2014. If you can't find him roaming the Github issue queues, he's probably out with his camera somewhere.",
"type": "Community"
},
@ -532,16 +501,34 @@
"gkalpak": {
"name": "Georgios Kalpakas",
"picture": "/resources/images/bios/gkalpak.jpg",
"twitter": "gkalpakas",
"website": "https://github.com/gkalpak",
"bio": "George is a Software Engineer with a passion for chess, robotics and automating stuff. He has a strong need to know how things work (so if you already know, he'd love to have a talk with you). He has been a member of the AngularJS team since 2014. When not doing geeky stuff, he is probably trying to convince his wife and kids to apply programming principles in real life. (Or is it the other way around?)",
"type": "Community"
},
"kapunahelewong": {
"name": "Kapunahele Wong",
"picture": "/resources/images/bios/kapunahelewong.jpg",
"website": " https://github.com/kapunahelewong",
"bio": "Kapunahele is a front-end developer at Capital One. She loves just about anything to do with JavaScript, Angular and electronics. She enjoys mapping Hawaiian star names and constellations to Western ones and loves dancing native Hawaiian hula.",
"type": "Community"
},
"devversion": {
"name": "Paul Gschwendtner",
"picture": "/resources/images/bios/devversion.jpg",
"website": "http://github.com/DevVersion/",
"twitter": "DevVersion",
"bio": "Paul is an aspiring 16-year-old developer living in Germany. While attending school, Paul works as a core team member on the Angular Material projects. He is a prolific contributor to all aspects of AngularJS and Angular and hopes to work at Google during his college studies!",
"type": "Community"
},
"mmalerba": {
"name": "Miles Malerba",
"picture": "/resources/images/bios/mmalerba.jpg",
"bio": "Miles is a software engineer on the Angular Material team at Google. In addition to Javascripting he enjoys eating food and ogling cute puppies.",
"type": "Google"
}
}
}

View File

@ -66,7 +66,7 @@
"q": "^1.4.1",
"tree-kill": "^1.0.0",
"tslint": "^3.15.1",
"typescript": "^2.0.3",
"typescript": "~2.0.10",
"yargs": "^4.7.1"
},
"dependencies": {

View File

@ -71,7 +71,7 @@ div(class="main-footer" data-swiftype-index="false")
li <a href="https://angular.io/">英文版</a>
footer(class="background-midnight")
small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license">MIT-style License</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
small.text-caption Powered by Google ©2010-2017. Code licensed under an <a href="/license">MIT-style License</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger")
span.icon-favorite
a(aria-label="查看风格指南" href="/docs/ts/latest/styleguide.html" title="风格指南" class="styleguide-trigger text-snow translated-cn" md-button)

View File

@ -7,6 +7,7 @@ header(class="background-sky l-relative")
announcement-bar
.announcement-bar-slide.clearfix
img(src="/translate/cn/gdd.svg" width="64")
p <strong>2016 Google 开发者大会来啦!(北京 & 上海)</strong>
a(href="http://www.google.cn/intl/zh-CN/events/developerday2016/" target="_blank" class="button md-button") 立即报名
img(src="/resources/images/logos/angular2/angular-banner-logo-grey.png" width="64")
p Test-drive <strong>@angular/material</strong>: 22 components 进入beta阶段啦
a(href="https://material.angular.io/" target="_blank" class="button md-button") 试试看!

View File

@ -13,8 +13,12 @@
if current.path[4] && current.path[3] == 'api'
- var textFormat = 'is-standard-case'
if current.path.indexOf('cheatsheet') > 0 || current.path[current.path.length-2] === 'api'
- var base = current.path[4] ? '../guide' : './guide';
- var ngVersion = '(v<ngio-cheatsheet src="' + base + '/cheatsheet.json" version-only>2.X.Y</ngio-cheatsheet>)';
header.hero.background-sky
h1(class="hero-title #{textFormat}") #{headerTitle}
h1(class="hero-title #{textFormat}") #{headerTitle} !{ngVersion}
if useBadges
if stability

View File

@ -47,8 +47,8 @@
//- NgModule related
- var _AppModuleVsAppComp = 'AppModule'
- var _appModuleTsVsAppCompTs = 'app/app.module.ts'
- var _appModuleTsVsMainTs = 'app/app.module.ts'
- var _appModuleTsVsAppCompTs = 'src/app/app.module.ts'
- var _appModuleTsVsMainTs = 'src/app/app.module.ts'
- var _bootstrapModule = 'bootstrapModule'
- var _declsVsDirectives = 'declarations'
- var _moduleVsComp = 'module'
@ -57,7 +57,7 @@
//- Other
- var _truthy = 'truthy';
- var _falsey = 'falsey';
- var _falsy = 'falsy';
//- Used to prefix identifiers that are private. In Dart this will be '_'.
- var _priv = '';

View File

@ -72,5 +72,6 @@ if current.path[4] !== 'change-log'
mixin tree(public.docs.ts, "/docs/ts", "Angular for TypeScript")
mixin tree(public.docs.js, "/docs/js", "Angular for JavaScript")
//- Disable cross-language link for API entry pages (but keep for top API search page):
if ! (current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]])
- var isApiEntryPage = current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]
if public.docs.dart && !isApiEntryPage
mixin tree(public.docs.dart, "/docs/dart", "Angular for Dart")

View File

@ -26,7 +26,7 @@
for person, name in bios
if person.type == type
.c3
md-card(biocard class="bio-card" website="#{person.website}" twitter="#{person.twitter}" pic="#{person.picture}" bio="#{person.bio}" name="#{person.name}")
md-card(biocard class="bio-card" website=person.website twitter=person.twitter pic=person.picture bio=person.bio name=person.name)
header
image(src="#{person.picture}" alt="#person.name")

View File

@ -30,7 +30,7 @@ style(rel='stylesheet').
li.
Best Technology Demonstration
<br>
<small>Huge hint: Angular 2 scores points</small>
<small>Huge hint: Angular scores points</small>
p Dont have Cardboard and want one? Check out:
p.text-center

View File

@ -1,22 +1,18 @@
# _exampleBoilerplateFiles
.editorconfig
karma.conf.js
karma-test-shim.js
package.json
*/**/styles.css
systemjs.config.js
tsconfig.json
tslint.json
wallaby.js
# _boilerplate files
!_boilerplate/*
*/*/src/styles.css
*/*/src/systemjs.config.js
*/*/src/tsconfig.json
*/*/bs-config.e2e.json
*/*/bs-config.json
*/*/package.json
*/*/tslint.json
# example files
_test-output
protractor-helpers.js
*/e2e-spec.js
**/ts/**/*.js
**/js-es6*/**/*.js
**/ts-snippets/**/*.js
*.d.ts
!**/*e2e-spec.js
!systemjs.config.1.js
!**/systemjs.config.extras.js
!_boilerplate/*
_boilerplate/a2docs.css

View File

@ -0,0 +1,14 @@
{
"open": false,
"logLevel": "silent",
"port": 8080,
"server": {
"baseDir": "src",
"routes": {
"/node_modules": "node_modules"
},
"middleware": {
"0": null
}
}
}

View File

@ -0,0 +1,8 @@
{
"server": {
"baseDir": "src",
"routes": {
"/node_modules": "node_modules"
}
}
}

View File

@ -0,0 +1,4 @@
{
"build": "build",
"run": "serve"
}

View File

@ -4,22 +4,32 @@
"private": true,
"description": "Example package.json, only contains needed scripts for examples. See _examples/package.json for master package.json.",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
"http-server": "tsc && http-server",
"http-server:e2e": "http-server",
"http-server:cli": "http-server dist/",
"lite": "lite-server",
"lite:aot": "lite-server -c aot/bs-config.json",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"tsc": "tsc",
"tsc:w": "tsc -w",
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "webdriver-manager update && npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose",
"build:upgrade": "tsc",
"serve:upgrade": "http-server",
"build:cli": "ng build --no-progress",
"serve:cli": "http-server dist/",
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
"serve:aot": "lite-server -c bs-config.aot.json",
"start:webpack": "webpack-dev-server --inline --progress --port 8080",
"test:webpack": "karma start karma.webpack.conf.js",
"build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
"build:cli": "ng build",
"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
"build:babel": "babel app -d app --extensions \".es6\" --source-maps",
"build:babel": "babel src -d src --extensions \".es6\" --source-maps",
"copy-dist-files": "node ./copy-dist-files.js",
"i18n": "ng-xi18n"
},
@ -27,6 +37,8 @@
"author": "",
"license": "MIT",
"dependencies": {},
"devDependencies": {},
"devDependencies": {
"angular-cli": "^1.0.0-beta.26"
},
"repository": {}
}

View File

@ -0,0 +1,10 @@
{
"description": "QuickStart",
"basePath": "src/",
"files": [
"app/app.component.ts",
"index.html"
],
"open": "app/app.component.ts",
"tags": ["quickstart"]
}

View File

@ -45,6 +45,7 @@ button:disabled {
nav a {
padding: 5px 10px;
text-decoration: none;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: #eee;

View File

@ -18,6 +18,7 @@
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
@ -60,10 +61,10 @@
'@angular/forms/testing': 'ng:forms-builds/master/bundles/forms-testing.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'rxjs': 'npm:rxjs@5.0.1',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.3/lib/typescript.js',
'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.0.10/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension

View File

@ -16,6 +16,7 @@
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
@ -47,10 +48,10 @@
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'rxjs': 'npm:rxjs@5.0.1',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.3/lib/typescript.js',
'ts': 'npm:plugin-typescript@5.2.7/lib/plugin.js',
'typescript': 'npm:typescript@2.0.10/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension

View File

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"../../../node_modules/@types/"
]
},
"compileOnSave": true,
"exclude": [
"node_modules/*",
"**/*-aot.ts"
]
}

View File

@ -296,7 +296,7 @@ describe('Animation Tests', () => {
it('fires a callback on start and done', () => {
addActiveHero();
browser.manage().logs().get(logging.Type.BROWSER)
.then((logs: webdriver.logging.Entry[]) => {
.then((logs: logging.Entry[]) => {
const animationMessages = logs.filter((log) => {
return log.message.indexOf('Animation') !== -1 ? true : false;
});

View File

@ -1,5 +1,6 @@
{
"description": "Angular Animations",
"basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js"

View File

@ -23,7 +23,7 @@ import { Heroes } from './hero.service';
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
/* When the element leaves (transition "in => void" occurs),
* get the element's current computed height and animate

View File

@ -34,7 +34,7 @@ import { Heroes } from './hero.service';
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
// #enddocregion
/**
* Define two states, "inactive" and "active", and the end

View File

@ -27,7 +27,7 @@ import { Heroes } from './hero.service';
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
/*
* Define two states, "inactive" and "active", and the end
* styles that apply whenever the element is in those states.

View File

@ -24,7 +24,7 @@ import { Heroes } from './hero.service';
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
/* The elements here have two possible states based
* on the hero state, "active", or "inactive". We animate
* six transitions: Between the two states in both directions,

View File

@ -23,7 +23,7 @@ import { Heroes } from './hero.service';
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
/* The element here always has the state "in" when it
* is present. We animate two transitions: From void
* to in and from in to void, to achieve an animated

View File

@ -22,7 +22,7 @@ import { Heroes } from './hero.service';
</li>
</ul>
`,
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
styles: [`
li {
padding: 0 !important;

View File

@ -26,7 +26,7 @@ import { Heroes } from './hero.service';
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
/**
* Define two states, "inactive" and "active", and the end
* styles that apply whenever the element is in those states.

View File

@ -27,7 +27,7 @@ import { Heroes } from './hero.service';
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
/* The element here always has the state "in" when it
* is present. We animate two transitions: From void
* to in and from in to void, to achieve an animated

View File

@ -22,7 +22,7 @@ import { Heroes } from './hero.service';
</li>
</ul>
`,
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
/* The element here always has the state "in" when it
* is present. We animate two transitions: From void
* to in and from in to void, to achieve an animated

View File

@ -27,7 +27,7 @@ import { Heroes } from './hero.service';
</ul>
`,
// #enddocregion template
styleUrls: ['hero-list.component.css'],
styleUrls: ['./hero-list.component.css'],
/*
* Define two states, "inactive" and "active", and the end
* styles that apply whenever the element is in those states.

View File

@ -3,22 +3,22 @@
<head>
<meta charset="UTF-8">
<title>Animations</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill for Web Animations -->
<script src="https://unpkg.com/web-animations-js@2.2.1"></script>
<!-- Polyfills for older browsers -->
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>

View File

@ -1,4 +1,4 @@
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

View File

@ -1,4 +0,0 @@
{
"title": "Architecture Overview",
"docPart": "guide"
}

View File

@ -1,15 +0,0 @@
// #docregion import
import 'package:angular2/core.dart';
// #enddocregion import
import 'hero_list_component.dart';
import 'sales_tax_component.dart';
@Component(
selector: 'my-app',
template: '''
<hero-list></hero-list>
<sales-tax></sales-tax>''',
directives: const [HeroListComponent, SalesTaxComponent])
// #docregion export
class AppComponent { }

View File

@ -1,28 +0,0 @@
import 'dart:async';
import 'package:angular2/core.dart';
import 'hero.dart';
import 'logger_service.dart';
@Injectable()
class BackendService {
static final _mockHeroes = [
new Hero('Windstorm', 'Weather mastery'),
new Hero('Mr. Nice', 'Killing them with kindness'),
new Hero('Magneta', 'Manipulates metalic objects')
];
final Logger _logger;
BackendService(Logger this._logger);
Future<List> getAll(type) {
// TODO get from the database
if (type == Hero) return new Future.value(_mockHeroes);
var msg = 'Cannot get object of this type';
_logger.error(msg);
throw new Exception(msg);
}
}

View File

@ -1,7 +0,0 @@
class Hero {
static int _nextId = 1;
final int id;
String name, power;
Hero(this.name, [this.power = '']) : id = _nextId++;
}

View File

@ -1,11 +0,0 @@
import 'package:angular2/core.dart';
import 'hero.dart';
@Component(
selector: 'hero-detail',
templateUrl: 'hero_detail_component.html')
class HeroDetailComponent {
@Input()
Hero hero;
}

View File

@ -1,9 +0,0 @@
<hr>
<h4>{{hero.name}} Detail</h4>
<div>Id: {{hero.id}}</div>
<div>Name:
<!-- #docregion ngModel -->
<input [(ngModel)]="hero.name">
<!-- #enddocregion ngModel -->
</div>
<div>Power:<input [(ngModel)]="hero.power"></div>

View File

@ -1,35 +0,0 @@
import 'package:angular2/core.dart';
import 'hero.dart';
import 'hero_detail_component.dart';
import 'hero_service.dart';
// #docregion metadata
@Component(
selector: 'hero-list',
templateUrl: 'hero_list_component.html',
directives: const [HeroDetailComponent],
// #docregion providers
providers: const [HeroService]
// #enddocregion providers
)
// #docregion class
class HeroListComponent implements OnInit {
// #enddocregion metadata
List<Hero> heroes;
Hero selectedHero;
// #docregion ctor
final HeroService _heroService;
HeroListComponent(this._heroService);
// #enddocregion ctor
void ngOnInit() {
heroes = _heroService.getHeroes();
}
void selectHero(Hero hero) {
selectedHero = hero;
}
// #docregion metadata
}

View File

@ -1,11 +0,0 @@
<!-- #docregion -->
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<hero-detail *ngIf="selectedHero != null" [hero]="selectedHero"></hero-detail>

View File

@ -1,9 +0,0 @@
<!--#docregion binding -->
<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>
<!--#enddocregion binding -->
<!--#docregion structural -->
<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero != null"></hero-detail>

View File

@ -1,23 +0,0 @@
import 'package:angular2/core.dart';
import 'backend_service.dart';
import 'hero.dart';
import 'logger_service.dart';
@Injectable()
// #docregion class
class HeroService {
final BackendService _backendService;
final Logger _logger;
final List<Hero> heroes = [];
HeroService(this._logger, this._backendService);
List<Hero> getHeroes() {
_backendService.getAll(Hero).then((heroes) {
_logger.log('Fetched ${heroes.length} heroes.');
this.heroes.addAll(heroes); // fill cache
});
return heroes;
}
}

View File

@ -1,11 +0,0 @@
import 'dart:html';
import 'package:angular2/core.dart';
@Injectable()
// #docregion class
class Logger {
void log(Object msg) => window.console.log(msg);
void error(Object msg) => window.console.error(msg);
void warn(Object msg) => window.console.warn(msg);
}

View File

@ -1,25 +0,0 @@
import 'package:angular2/core.dart';
import 'sales_tax_service.dart';
import 'tax_rate_service.dart';
@Component(
selector: 'sales-tax',
template: '''
<h2>Sales Tax Calculator</h2>
Amount: <input #amountBox (change)="0">
<div *ngIf="amountBox.value != ''">
The sales tax is
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
</div>
''',
providers: const [SalesTaxService, TaxRateService])
class SalesTaxComponent {
SalesTaxService _salesTaxService;
SalesTaxComponent(this._salesTaxService) {}
num getTax(dynamic /* String | num */ value) =>
this._salesTaxService.getVAT(value);
}

View File

@ -1,14 +0,0 @@
import 'package:angular2/core.dart';
import 'tax_rate_service.dart';
@Injectable()
class SalesTaxService {
TaxRateService rateService;
SalesTaxService(this.rateService);
num getVAT(dynamic /* String | num */ value) =>
rateService.getRate('VAT') *
(value is num ? value : num.parse(value, (_) => 0));
}

View File

@ -1,6 +0,0 @@
import 'package:angular2/core.dart';
@Injectable()
class TaxRateService {
getRate(String rateName) => 0.10;
}

View File

@ -1,19 +0,0 @@
# #docregion
name: developer_guide_intro
description: Developer Guide Intro
version: 0.0.1
environment:
sdk: '>=1.19.0 <2.0.0'
dependencies:
angular2: ^2.0.0
dev_dependencies:
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: web/main.dart
- dart_to_js_script_rewriter

View File

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Architecture of Angular</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

View File

@ -1,14 +0,0 @@
// #docregion
import 'package:angular2/platform/browser.dart';
// #docregion import
import 'package:developer_guide_intro/app_component.dart';
// #enddocregion import
import 'package:developer_guide_intro/backend_service.dart';
import 'package:developer_guide_intro/hero_service.dart';
import 'package:developer_guide_intro/logger_service.dart';
void main() {
// #docregion bootstrap
bootstrap(AppComponent, [BackendService, HeroService, Logger]);
// #enddocregion bootstrap
}

View File

@ -1,5 +1,6 @@
{
"description": "Intro to Angular",
"basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",

View File

@ -5,7 +5,7 @@ import { Hero } from './hero';
@Component({
moduleId: module.id,
selector: 'hero-detail',
templateUrl: 'hero-detail.component.html'
templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent {
@Input() hero: Hero;

View File

@ -7,7 +7,7 @@ import { HeroService } from './hero.service';
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: 'hero-list.component.html',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
// #enddocregion providers

View File

@ -4,18 +4,18 @@
<title>Architecture of Angular</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="stylesheet" href="styles.css">
<!-- Polyfills for older browsers -->
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>

View File

@ -1,5 +1,5 @@
// #docregion
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

View File

@ -1,4 +0,0 @@
{
"title": "Attribute Directives",
"docPart": "guide"
}

View File

@ -1,12 +0,0 @@
// #docregion
import 'package:angular2/core.dart';
import 'highlight_directive.dart';
@Component(
selector: 'my-app',
templateUrl: 'app_component.html',
directives: const [HighlightDirective])
class AppComponent {
String color;
}

View File

@ -1,20 +0,0 @@
<!-- #docregion -->
<!-- #docregion v2 -->
<h1>My First Attribute Directive</h1>
<h4>Pick a highlight color</h4>
<div>
<input type="radio" name="colors" (click)="color='lightgreen'">Green
<input type="radio" name="colors" (click)="color='yellow'">Yellow
<input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<!-- #docregion pHost -->
<p [myHighlight]="color">Highlight me!</p>
<!-- #enddocregion pHost -->
<!-- #enddocregion v2 -->
<!-- #docregion defaultColor -->
<p [myHighlight]="color" [defaultColor]="'violet'">
Highlight me too!
</p>
<!-- #enddocregion defaultColor -->
<!-- #enddocregion -->

View File

@ -1,7 +0,0 @@
<!-- #docregion -->
<h1>My First Attribute Directive</h1>
<p myHighlight>Highlight me!</p>
<!-- #enddocregion -->
<!-- #docregion p-style-background -->
<p [style.background]="'lime'">I am green with envy!</p>
<!-- #enddocregion p-style-background -->

View File

@ -1,45 +0,0 @@
// #docplaster
// #docregion full
import 'package:angular2/core.dart';
@Directive(selector: '[myHighlight]')
// #docregion class
class HighlightDirective {
String _defaultColor = 'red';
final dynamic _el;
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
// #enddocregion class
// #docregion defaultColor
@Input()
set defaultColor(String colorName) {
_defaultColor = (colorName ?? _defaultColor);
}
// #enddocregion defaultColor
// #docregion class
// #docregion color
@Input('myHighlight')
String highlightColor;
// #enddocregion color
// #docregion mouse-enter
@HostListener('mouseenter')
void onMouseEnter() => _highlight(highlightColor ?? _defaultColor);
// #enddocregion mouse-enter
@HostListener('mouseleave')
void onMouseLeave() => _highlight();
void _highlight([String color]) {
if (_el != null) _el.style.backgroundColor = color;
}
}
// #enddocregion class
// #enddocregion full
/*
// #docregion highlight
@Input() String myHighlight;
// #enddocregion highlight
*/

View File

@ -1,11 +0,0 @@
// #docregion
library attribute_directives.highlight_directive;
import 'package:angular2/core.dart';
@Directive(selector: '[myHighlight]')
class HighlightDirective {
HighlightDirective(ElementRef element) {
element.nativeElement.style.backgroundColor = 'yellow';
}
}

View File

@ -1,33 +0,0 @@
// #docregion
import 'package:angular2/core.dart';
@Directive(selector: '[myHighlight]')
class HighlightDirective {
// #docregion ctor
final dynamic _el;
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
// #enddocregion ctor
// #docregion mouse-methods, host
@HostListener('mouseenter')
void onMouseEnter() {
// #enddocregion host
_highlight('yellow');
// #docregion host
}
@HostListener('mouseleave')
void onMouseLeave() {
// #enddocregion host
_highlight();
// #docregion host
}
// #enddocregion host
void _highlight([String color]) {
if (_el != null) _el.style.backgroundColor = color;
}
// #enddocregion mouse-methods
}
// #enddocregion

View File

@ -1,19 +0,0 @@
# #docregion
name: attribute_directives
description: Attribute directives example
version: 0.0.1
environment:
sdk: '>=1.19.0 <2.0.0'
dependencies:
angular2: ^2.0.0
dev_dependencies:
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'
entry_points: web/main.dart
- dart_to_js_script_rewriter

View File

@ -1,13 +0,0 @@
<!-- #docregion -->
<!DOCTYPE html>
<html>
<head>
<title>Attribute Directives</title>
<link rel="stylesheet" href="styles.css">
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>

View File

@ -1,8 +0,0 @@
// #docregion
import 'package:angular2/platform/browser.dart';
import 'package:attribute_directives/app_component.dart';
main() {
bootstrap(AppComponent);
}

View File

@ -1,7 +0,0 @@
<!-- #docregion -->
<h1>My First Attribute Directive</h1>
<p myHighlight>Highlight me!</p>
<!-- #enddocregion -->
<!-- #docregion p-style-background -->
<p [style.background]="'lime'">I am green with envy!</p>
<!-- #enddocregion p-style-background -->

View File

@ -1,10 +0,0 @@
/* tslint:disable:no-unused-variable */
// #docregion
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}

View File

@ -1,45 +0,0 @@
// #docplaster
// #docregion full
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
@Directive({
selector: '[myHighlight]'
})
// #docregion class
export class HighlightDirective {
private _defaultColor = 'red';
constructor(private el: ElementRef, private renderer: Renderer) { }
// #enddocregion class
// #docregion defaultColor
@Input() set defaultColor(colorName: string){
this._defaultColor = colorName || this._defaultColor;
}
// #enddocregion defaultColor
// #docregion class
// #docregion color
@Input('myHighlight') highlightColor: string;
// #enddocregion color
// #docregion mouse-enter
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || this._defaultColor);
}
// #enddocregion mouse-enter
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
}
}
// #enddocregion class
// #enddocregion full
/*
// #docregion highlight
@Input() myHighlight: string;
// #enddocregion highlight
*/

View File

@ -1,9 +1,10 @@
{
"description": "Attribute Directive",
"basePath": "src/",
"files":[
"!**/*.d.ts",
"!**/*.js",
"!app/*.[1,2].*"
"!app/*.[1,2,3].*"
],
"tags": ["attribute", "directive"]
}

View File

@ -0,0 +1,18 @@
<!-- #docregion -->
<h1>My First Attribute Directive</h1>
<p myHighlight>Highlight me!</p>
<!-- #enddocregion -->
<!-- #docregion color-1 -->
<p myHighlight highlightColor="yellow">Highlighted in yellow</p>
<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
<!-- #enddocregion color-1 -->
<!-- #docregion color-2 -->
<p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
<!-- #enddocregion color-2 -->
<!-- #docregion p-style-background -->
<p [style.background]="'lime'">I am green with envy!</p>
<!-- #enddocregion p-style-background -->

View File

@ -0,0 +1,12 @@
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.1.html'
})
// #docregion class
export class AppComponent {
color = 'yellow';
}
// #enddocregion class

View File

@ -1,20 +1,27 @@
<!-- #docregion -->
<!-- #docregion v2 -->
<h1>My First Attribute Directive</h1>
<h4>Pick a highlight color</h4>
<div>
<input type="radio" name="colors" (click)="color='lightgreen'">Green
<input type="radio" name="colors" (click)="color='yellow'">Yellow
<input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<!-- #docregion pHost -->
<!-- #docregion color -->
<p [myHighlight]="color">Highlight me!</p>
<!-- #enddocregion pHost -->
<!-- #enddocregion color -->
<!-- #enddocregion v2 -->
<!-- #docregion defaultColor -->
<p [myHighlight]="color" [defaultColor]="'violet'">
<p [myHighlight]="color" defaultColor="violet">
Highlight me too!
</p>
<!-- #enddocregion defaultColor -->
<!-- #enddocregion -->
<hr>
<p><i>Mouse over the following lines to see fixed highlights</i></p>
<p [myHighlight]="'yellow'">Highlighted in yellow</p>
<p myHighlight="orange">Highlighted in orange</p>

View File

@ -0,0 +1,14 @@
// #docregion
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html'
})
// #docregion class
export class AppComponent {
color: string;
}
// #enddocregion class
// #enddocregion

View File

@ -0,0 +1,17 @@
// Not used. Keep away from plunker
// Keeps ATLS from complaining about undeclared directives.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component.1';
import { HighlightDirective as HLD1 } from './highlight.directive.1';
import { HighlightDirective as HLD2 } from './highlight.directive.2';
import { HighlightDirective as HLD3 } from './highlight.directive.3';
@NgModule({
imports: [ BrowserModule ],
declarations: [
AppComponent, HLD1, HLD2, HLD3
]
})
export class DummyModule { }

View File

@ -0,0 +1,10 @@
/* tslint:disable:no-unused-variable */
// #docregion
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}

View File

@ -1,15 +1,26 @@
/* tslint:disable:no-unused-variable */
/* tslint:disable:no-unused-variable member-ordering */
// #docplaster
// #docregion
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
// #docregion ctor
constructor(private el: ElementRef, private renderer: Renderer) { }
constructor(private el: ElementRef) { }
// #enddocregion ctor
// #enddocregion
// #docregion color
@Input() highlightColor: string;
// #enddocregion color
// #docregion color-2
@Input() myHighlight: string;
// #enddocregion color-2
// #docregion
// #docregion mouse-methods, host
@HostListener('mouseenter') onMouseEnter() {
@ -26,7 +37,7 @@ export class HighlightDirective {
// #enddocregion host
private highlight(color: string) {
this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
this.el.nativeElement.style.backgroundColor = color;
}
// #enddocregion mouse-methods

Some files were not shown because too many files have changed in this diff Show More