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
commit
6af595d7bd
|
|
@ -31,5 +31,7 @@ eplnkr.html
|
|||
#public/docs/*/latest/guide/cheatsheet.json
|
||||
protractor-results.txt
|
||||
link-checker-results.txt
|
||||
*a2docs.css
|
||||
/dist
|
||||
/dist
|
||||
/public/docs/dart
|
||||
/public/docs/ts/_cache
|
||||
/public/docs/_examples/*/dart
|
||||
|
|
|
|||
20
.travis.yml
20
.travis.yml
|
|
@ -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
|
||||
|
|
|
|||
2
LICENSE
2
LICENSE
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
206
gulpfile.js
206
gulpfile.js
|
|
@ -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
159
harp.json
|
|
@ -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 table–she 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 table–she 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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
header(class="background-sky l-relative")
|
||||
|
||||
.hero.background-superhero-paper.is-large
|
||||
img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg')
|
||||
h1.text-headline #{title}<br>#{subtitle}
|
||||
a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧！
|
||||
.hero.background-superhero-paper.is-large
|
||||
img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg')
|
||||
h1.text-headline #{title}<br>#{subtitle}
|
||||
a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧！
|
||||
|
||||
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") 试试看！
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
||||
|
|
|
|||
|
|
@ -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 Don’t have Cardboard and want one? Check out:
|
||||
p.text-center
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"open": false,
|
||||
"logLevel": "silent",
|
||||
"port": 8080,
|
||||
"server": {
|
||||
"baseDir": "src",
|
||||
"routes": {
|
||||
"/node_modules": "node_modules"
|
||||
},
|
||||
"middleware": {
|
||||
"0": null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"server": {
|
||||
"baseDir": "src",
|
||||
"routes": {
|
||||
"/node_modules": "node_modules"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"build": "build",
|
||||
"run": "serve"
|
||||
}
|
||||
|
|
@ -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": {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"description": "QuickStart",
|
||||
"basePath": "src/",
|
||||
"files": [
|
||||
"app/app.component.ts",
|
||||
"index.html"
|
||||
],
|
||||
"open": "app/app.component.ts",
|
||||
"tags": ["quickstart"]
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
'use strict'; // necessary for es6 output in node
|
||||
'use strict'; // necessary for es6 output in node
|
||||
|
||||
import { browser, element, by, ElementFinder } from 'protractor';
|
||||
import { logging, promise } from 'selenium-webdriver';
|
||||
|
|
@ -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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"description": "Angular Animations",
|
||||
"basePath": "src/",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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.
|
||||
|
|
@ -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,
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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.
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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);
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"title": "Architecture Overview",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
// #docregion import
|
||||
import 'package:angular2/core.dart';
|
||||
// #enddocregion import
|
||||
|
||||
import 'hero_list_component.dart';
|
||||
import 'sales_tax_component.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
template: '''
|
||||
<hero-list></hero-list>
|
||||
<sales-tax></sales-tax>''',
|
||||
directives: const [HeroListComponent, SalesTaxComponent])
|
||||
// #docregion export
|
||||
class AppComponent { }
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import 'dart:async';
|
||||
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
import 'logger_service.dart';
|
||||
|
||||
@Injectable()
|
||||
class BackendService {
|
||||
static final _mockHeroes = [
|
||||
new Hero('Windstorm', 'Weather mastery'),
|
||||
new Hero('Mr. Nice', 'Killing them with kindness'),
|
||||
new Hero('Magneta', 'Manipulates metalic objects')
|
||||
];
|
||||
|
||||
final Logger _logger;
|
||||
|
||||
BackendService(Logger this._logger);
|
||||
|
||||
Future<List> getAll(type) {
|
||||
// TODO get from the database
|
||||
if (type == Hero) return new Future.value(_mockHeroes);
|
||||
|
||||
var msg = 'Cannot get object of this type';
|
||||
_logger.error(msg);
|
||||
throw new Exception(msg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
class Hero {
|
||||
static int _nextId = 1;
|
||||
final int id;
|
||||
String name, power;
|
||||
|
||||
Hero(this.name, [this.power = '']) : id = _nextId++;
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'hero-detail',
|
||||
templateUrl: 'hero_detail_component.html')
|
||||
class HeroDetailComponent {
|
||||
@Input()
|
||||
Hero hero;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<hr>
|
||||
<h4>{{hero.name}} Detail</h4>
|
||||
<div>Id: {{hero.id}}</div>
|
||||
<div>Name:
|
||||
<!-- #docregion ngModel -->
|
||||
<input [(ngModel)]="hero.name">
|
||||
<!-- #enddocregion ngModel -->
|
||||
</div>
|
||||
<div>Power:<input [(ngModel)]="hero.power"></div>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'hero.dart';
|
||||
import 'hero_detail_component.dart';
|
||||
import 'hero_service.dart';
|
||||
|
||||
// #docregion metadata
|
||||
@Component(
|
||||
selector: 'hero-list',
|
||||
templateUrl: 'hero_list_component.html',
|
||||
directives: const [HeroDetailComponent],
|
||||
// #docregion providers
|
||||
providers: const [HeroService]
|
||||
// #enddocregion providers
|
||||
)
|
||||
// #docregion class
|
||||
class HeroListComponent implements OnInit {
|
||||
// #enddocregion metadata
|
||||
List<Hero> heroes;
|
||||
Hero selectedHero;
|
||||
// #docregion ctor
|
||||
final HeroService _heroService;
|
||||
|
||||
HeroListComponent(this._heroService);
|
||||
// #enddocregion ctor
|
||||
|
||||
void ngOnInit() {
|
||||
heroes = _heroService.getHeroes();
|
||||
}
|
||||
|
||||
void selectHero(Hero hero) {
|
||||
selectedHero = hero;
|
||||
}
|
||||
// #docregion metadata
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<h2>Hero List</h2>
|
||||
|
||||
<p><i>Pick a hero from the list</i></p>
|
||||
<ul>
|
||||
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
|
||||
{{hero.name}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<hero-detail *ngIf="selectedHero != null" [hero]="selectedHero"></hero-detail>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<!--#docregion binding -->
|
||||
<li>{{hero.name}}</li>
|
||||
<hero-detail [hero]="selectedHero"></hero-detail>
|
||||
<li (click)="selectHero(hero)"></li>
|
||||
<!--#enddocregion binding -->
|
||||
|
||||
<!--#docregion structural -->
|
||||
<li *ngFor="let hero of heroes"></li>
|
||||
<hero-detail *ngIf="selectedHero != null"></hero-detail>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'backend_service.dart';
|
||||
import 'hero.dart';
|
||||
import 'logger_service.dart';
|
||||
|
||||
@Injectable()
|
||||
// #docregion class
|
||||
class HeroService {
|
||||
final BackendService _backendService;
|
||||
final Logger _logger;
|
||||
final List<Hero> heroes = [];
|
||||
|
||||
HeroService(this._logger, this._backendService);
|
||||
|
||||
List<Hero> getHeroes() {
|
||||
_backendService.getAll(Hero).then((heroes) {
|
||||
_logger.log('Fetched ${heroes.length} heroes.');
|
||||
this.heroes.addAll(heroes); // fill cache
|
||||
});
|
||||
return heroes;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import 'dart:html';
|
||||
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Injectable()
|
||||
// #docregion class
|
||||
class Logger {
|
||||
void log(Object msg) => window.console.log(msg);
|
||||
void error(Object msg) => window.console.error(msg);
|
||||
void warn(Object msg) => window.console.warn(msg);
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'sales_tax_service.dart';
|
||||
import 'tax_rate_service.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'sales-tax',
|
||||
template: '''
|
||||
<h2>Sales Tax Calculator</h2>
|
||||
Amount: <input #amountBox (change)="0">
|
||||
|
||||
<div *ngIf="amountBox.value != ''">
|
||||
The sales tax is
|
||||
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
|
||||
</div>
|
||||
''',
|
||||
providers: const [SalesTaxService, TaxRateService])
|
||||
class SalesTaxComponent {
|
||||
SalesTaxService _salesTaxService;
|
||||
|
||||
SalesTaxComponent(this._salesTaxService) {}
|
||||
|
||||
num getTax(dynamic /* String | num */ value) =>
|
||||
this._salesTaxService.getVAT(value);
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'tax_rate_service.dart';
|
||||
|
||||
@Injectable()
|
||||
class SalesTaxService {
|
||||
TaxRateService rateService;
|
||||
|
||||
SalesTaxService(this.rateService);
|
||||
|
||||
num getVAT(dynamic /* String | num */ value) =>
|
||||
rateService.getRate('VAT') *
|
||||
(value is num ? value : num.parse(value, (_) => 0));
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import 'package:angular2/core.dart';
|
||||
|
||||
@Injectable()
|
||||
class TaxRateService {
|
||||
getRate(String rateName) => 0.10;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
# #docregion
|
||||
name: developer_guide_intro
|
||||
description: Developer Guide Intro
|
||||
version: 0.0.1
|
||||
environment:
|
||||
sdk: '>=1.19.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: ^2.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
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Architecture of Angular</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<script defer src="main.dart" type="application/dart"></script>
|
||||
<script defer src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
// #docregion import
|
||||
import 'package:developer_guide_intro/app_component.dart';
|
||||
// #enddocregion import
|
||||
import 'package:developer_guide_intro/backend_service.dart';
|
||||
import 'package:developer_guide_intro/hero_service.dart';
|
||||
import 'package:developer_guide_intro/logger_service.dart';
|
||||
|
||||
void main() {
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent, [BackendService, HeroService, Logger]);
|
||||
// #enddocregion bootstrap
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"description": "Intro to Angular",
|
||||
"basePath": "src/",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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);
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"title": "Attribute Directives",
|
||||
"docPart": "guide"
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
import 'highlight_directive.dart';
|
||||
|
||||
@Component(
|
||||
selector: 'my-app',
|
||||
templateUrl: 'app_component.html',
|
||||
directives: const [HighlightDirective])
|
||||
class AppComponent {
|
||||
String color;
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<!-- #docregion v2 -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<h4>Pick a highlight color</h4>
|
||||
<div>
|
||||
<input type="radio" name="colors" (click)="color='lightgreen'">Green
|
||||
<input type="radio" name="colors" (click)="color='yellow'">Yellow
|
||||
<input type="radio" name="colors" (click)="color='cyan'">Cyan
|
||||
</div>
|
||||
<!-- #docregion pHost -->
|
||||
<p [myHighlight]="color">Highlight me!</p>
|
||||
<!-- #enddocregion pHost -->
|
||||
<!-- #enddocregion v2 -->
|
||||
|
||||
<!-- #docregion defaultColor -->
|
||||
<p [myHighlight]="color" [defaultColor]="'violet'">
|
||||
Highlight me too!
|
||||
</p>
|
||||
<!-- #enddocregion defaultColor -->
|
||||
<!-- #enddocregion -->
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<p myHighlight>Highlight me!</p>
|
||||
<!-- #enddocregion -->
|
||||
<!-- #docregion p-style-background -->
|
||||
<p [style.background]="'lime'">I am green with envy!</p>
|
||||
<!-- #enddocregion p-style-background -->
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
// #docplaster
|
||||
// #docregion full
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[myHighlight]')
|
||||
// #docregion class
|
||||
class HighlightDirective {
|
||||
String _defaultColor = 'red';
|
||||
final dynamic _el;
|
||||
|
||||
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
|
||||
// #enddocregion class
|
||||
|
||||
// #docregion defaultColor
|
||||
@Input()
|
||||
set defaultColor(String colorName) {
|
||||
_defaultColor = (colorName ?? _defaultColor);
|
||||
}
|
||||
// #enddocregion defaultColor
|
||||
// #docregion class
|
||||
|
||||
// #docregion color
|
||||
@Input('myHighlight')
|
||||
String highlightColor;
|
||||
// #enddocregion color
|
||||
|
||||
// #docregion mouse-enter
|
||||
@HostListener('mouseenter')
|
||||
void onMouseEnter() => _highlight(highlightColor ?? _defaultColor);
|
||||
|
||||
// #enddocregion mouse-enter
|
||||
@HostListener('mouseleave')
|
||||
void onMouseLeave() => _highlight();
|
||||
|
||||
void _highlight([String color]) {
|
||||
if (_el != null) _el.style.backgroundColor = color;
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion full
|
||||
/*
|
||||
// #docregion highlight
|
||||
@Input() String myHighlight;
|
||||
// #enddocregion highlight
|
||||
*/
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
// #docregion
|
||||
library attribute_directives.highlight_directive;
|
||||
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[myHighlight]')
|
||||
class HighlightDirective {
|
||||
HighlightDirective(ElementRef element) {
|
||||
element.nativeElement.style.backgroundColor = 'yellow';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/core.dart';
|
||||
|
||||
@Directive(selector: '[myHighlight]')
|
||||
class HighlightDirective {
|
||||
// #docregion ctor
|
||||
final dynamic _el;
|
||||
|
||||
HighlightDirective(ElementRef elRef) : _el = elRef.nativeElement;
|
||||
// #enddocregion ctor
|
||||
|
||||
// #docregion mouse-methods, host
|
||||
@HostListener('mouseenter')
|
||||
void onMouseEnter() {
|
||||
// #enddocregion host
|
||||
_highlight('yellow');
|
||||
// #docregion host
|
||||
}
|
||||
|
||||
@HostListener('mouseleave')
|
||||
void onMouseLeave() {
|
||||
// #enddocregion host
|
||||
_highlight();
|
||||
// #docregion host
|
||||
}
|
||||
// #enddocregion host
|
||||
|
||||
void _highlight([String color]) {
|
||||
if (_el != null) _el.style.backgroundColor = color;
|
||||
}
|
||||
// #enddocregion mouse-methods
|
||||
}
|
||||
// #enddocregion
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
# #docregion
|
||||
name: attribute_directives
|
||||
description: Attribute directives example
|
||||
version: 0.0.1
|
||||
environment:
|
||||
sdk: '>=1.19.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: ^2.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
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Attribute Directives</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script defer src="main.dart" type="application/dart"></script>
|
||||
<script defer src="packages/browser/dart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
// #docregion
|
||||
import 'package:angular2/platform/browser.dart';
|
||||
|
||||
import 'package:attribute_directives/app_component.dart';
|
||||
|
||||
main() {
|
||||
bootstrap(AppComponent);
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<p myHighlight>Highlight me!</p>
|
||||
<!-- #enddocregion -->
|
||||
<!-- #docregion p-style-background -->
|
||||
<p [style.background]="'lime'">I am green with envy!</p>
|
||||
<!-- #enddocregion p-style-background -->
|
||||
|
|
@ -1,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');
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
{
|
||||
"description": "Attribute Directive",
|
||||
"basePath": "src/",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!app/*.[1,2].*"
|
||||
"!app/*.[1,2,3].*"
|
||||
],
|
||||
"tags": ["attribute", "directive"]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -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 { }
|
||||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
|
@ -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
Loading…
Reference in New Issue