Merge remote-tracking branch 'origin/master'
# Conflicts: # README.md # public/_data.json # public/_includes/_hero-home.jade # public/_includes/_main-nav.jade # public/_includes/_scripts-include.jade # public/docs/ts/latest/_data.json # public/docs/ts/latest/cheatsheet.jade # public/docs/ts/latest/cli-quickstart.jade # 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/index.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/cookbook/visual-studio-2015.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/learning-angular.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/webpack.jade # public/docs/ts/latest/index.jade # public/docs/ts/latest/quickstart.jade # public/docs/ts/latest/tutorial/_data.json # public/docs/ts/latest/tutorial/index.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/news.jade # public/presskit.jade
This commit is contained in:
Zhicheng Wang
commit
f5c85b3e82
|
|
@ -0,0 +1,7 @@
|
|||
**Please do not add issues or pull requests to this repo.**
|
||||
We are no longer making changes to documentation in this repository.
|
||||
We will no longer process new issues or PRs and we will close them automatically.
|
||||
|
||||
**Please post new [issues](https://github.com/angular/angular/issues) and [pull requests](https://github.com/angular/angular/pulls) to the content folder in [https://github.com/angular/angular/tree/master/aio/content](https://github.com/angular/angular/tree/master/aio/content)**.
|
||||
|
||||
Be sure to prefix your issue/PR title with "**docs(aio):**"
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
**Please do not add issues or pull requests to this repo.**
|
||||
We are no longer making changes to documentation in this repository.
|
||||
We will no longer process new issues or PRs and we will close them automatically.
|
||||
|
||||
**Please post new [issues](https://github.com/angular/angular/issues) and [pull requests](https://github.com/angular/angular/pulls) to the content folder in [https://github.com/angular/angular/tree/master/aio/content](https://github.com/angular/angular/tree/master/aio/content)**.
|
||||
|
||||
Be sure to prefix your issue/PR title with "**docs(aio):**"
|
||||
13
.travis.yml
13
.travis.yml
|
|
@ -10,8 +10,9 @@ env:
|
|||
- DBUS_SESSION_BUS_ADDRESS=/dev/null
|
||||
- DISPLAY=:99.0
|
||||
- CHROME_BIN=chromium-browser
|
||||
- LATEST_RELEASE=2.4.0
|
||||
- LATEST_RELEASE_BRANCH=2.4.x
|
||||
- LATEST_RELEASE=4.0.0
|
||||
# Temporarily disabled until there is a new release branch for 4.0.0
|
||||
# - LATEST_RELEASE_BRANCH=2.4.x
|
||||
- TASK_FLAGS="--dgeni-log=warn"
|
||||
matrix:
|
||||
# current angular release jobs
|
||||
|
|
@ -19,8 +20,8 @@ env:
|
|||
- TASK="run-e2e-tests --fast" SCRIPT=examples-install.sh
|
||||
- TASK=build-compile SCRIPT=deploy-install.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"
|
||||
# - 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"
|
||||
|
|
@ -29,8 +30,8 @@ matrix:
|
|||
allow_failures:
|
||||
# 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=$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:
|
||||
|
|
|
|||
|
|
@ -46,6 +46,11 @@
|
|||
"source": "/**/dart/**",
|
||||
"destination": "https://webdev.dartlang.org/angular?utm_campaign=dart_migration&utm_medium=redirect&utm_source=angular.io",
|
||||
"type": 301
|
||||
},
|
||||
{
|
||||
"source": "/docs",
|
||||
"destination": "https://angular.io/docs/ts/latest/",
|
||||
"type": 301
|
||||
}
|
||||
],
|
||||
"rewrites": [
|
||||
|
|
|
|||
26
gulpfile.js
26
gulpfile.js
|
|
@ -46,7 +46,7 @@ var LIVE_EXAMPLES_PATH = path.join(RESOURCES_PATH, 'live-examples');
|
|||
var STYLES_SOURCE_PATH = path.join(TOOLS_PATH, 'styles-builder/less');
|
||||
|
||||
var docShredder = require(path.resolve(TOOLS_PATH, 'doc-shredder/doc-shredder'));
|
||||
var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZipper'));
|
||||
var ExampleZipper = require(path.resolve(TOOLS_PATH, 'example-zipper/exampleZipper'));
|
||||
var regularPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/regularPlunker'));
|
||||
var embeddedPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/embeddedPlunker'));
|
||||
var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
|
||||
|
|
@ -71,13 +71,13 @@ var _devguideShredJadeOptions = {
|
|||
|
||||
var _apiShredOptions = {
|
||||
lang: 'ts',
|
||||
examplesDir: path.join(ANGULAR_PROJECT_PATH, 'modules/@angular/examples'),
|
||||
examplesDir: path.join(ANGULAR_PROJECT_PATH, 'packages/examples'),
|
||||
fragmentsDir: path.join(DOCS_PATH, '_fragments/_api'),
|
||||
zipDir: path.join(RESOURCES_PATH, 'zips/api'),
|
||||
logLevel: _dgeniLogLevel
|
||||
};
|
||||
|
||||
var _excludePatterns = ['**/node_modules/**', '**/packages/**'];
|
||||
var _excludePatterns = ['**/node_modules/**'];
|
||||
|
||||
var _excludeMatchers = _excludePatterns.map(function(excludePattern){
|
||||
return new Minimatch(excludePattern)
|
||||
|
|
@ -86,6 +86,7 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
|
|||
var _exampleBoilerplateFiles = [
|
||||
'src/styles.css',
|
||||
'src/systemjs.config.js',
|
||||
'src/systemjs-angular-loader.js',
|
||||
'src/tsconfig.json',
|
||||
'bs-config.json',
|
||||
'bs-config.e2e.json',
|
||||
|
|
@ -501,7 +502,7 @@ function installExampleAngular() {
|
|||
var template;
|
||||
var libs = [
|
||||
'core', 'common', 'compiler', 'compiler-cli',
|
||||
'platform-browser', 'platform-browser-dynamic',
|
||||
'platform-browser', 'platform-browser-dynamic', 'platform-server',
|
||||
'forms', 'http', 'router', 'upgrade'];
|
||||
|
||||
var build = argv.build;
|
||||
|
|
@ -521,13 +522,16 @@ function installExampleAngular() {
|
|||
: `git+https://github.com/angular/${lib}-builds${build}`;
|
||||
});
|
||||
|
||||
if (argv.build) { sources.push('@angular/tsc-wrapped');} // tsc-wrapped needed for builds
|
||||
if (argv.build) {
|
||||
sources.push('@angular/tsc-wrapped'); // tsc-wrapped needed for builds
|
||||
sources.push('typescript@2.2.1'); // recent builds need recent TypeScript
|
||||
}
|
||||
|
||||
sources.push('@angular/router-deprecated');
|
||||
|
||||
gutil.log(`Installing Angular packages from ${build === 'npm' ? 'NPM' : 'BUILD ' + build}`);
|
||||
|
||||
var spawnInfo = spawnExt('rm', ['-rf', 'node_modules/@angular'], { cwd: EXAMPLES_PATH});
|
||||
var spawnInfo = spawnExt('node', ['node_modules/rimraf/bin.js', 'node_modules/@angular'], { cwd: EXAMPLES_PATH});
|
||||
return spawnInfo.promise
|
||||
.then(() => {
|
||||
spawnInfo = spawnExt('npm', ['install', ...sources], {cwd: EXAMPLES_PATH});
|
||||
|
|
@ -572,9 +576,7 @@ gulp.task('build-and-serve', ['build-docs'], function (cb) {
|
|||
watchAndSync({localFiles: true}, cb);
|
||||
});
|
||||
|
||||
gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers']);
|
||||
// Stop zipping examples Feb 28, 2016
|
||||
//gulp.task('build-docs', ['build-devguide-docs', 'build-api-docs', 'build-plunkers', '_zip-examples']);
|
||||
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']);
|
||||
|
||||
|
|
@ -787,8 +789,8 @@ gulp.task('_shred-clean-api', function(cb) {
|
|||
});
|
||||
|
||||
gulp.task('_zip-examples', function() {
|
||||
exampleZipper.zipExamples(_devguideShredOptions.examplesDir, _devguideShredOptions.zipDir);
|
||||
exampleZipper.zipExamples(_apiShredOptions.examplesDir, _apiShredOptions.zipDir);
|
||||
new ExampleZipper(_devguideShredOptions.examplesDir, _devguideShredOptions.zipDir);
|
||||
// exampleZipper.zipExamples(_apiShredOptions.examplesDir, _apiShredOptions.zipDir);
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -1202,7 +1204,7 @@ function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
|
|||
// var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
|
||||
// gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) {
|
||||
var ignoreThese = [ '**/node_modules/**', '**/_fragments/**', '**/dist/**',
|
||||
'**/dart/.pub/**', '**/dart/build/**', '**/dart/packages/**'];
|
||||
'**/dart/.pub/**', '**/dart/build/**'];
|
||||
ignoreThese = ignoreThese.concat(_exampleBoilerplateFiles.map((file) => `public/docs/_examples/*/*/${file}`));
|
||||
var files = globby.sync( [includePattern], { ignore: ignoreThese });
|
||||
gulp.watch([files], {readDelay: 500}, function (event, done) {
|
||||
|
|
|
|||
13
harp.json
13
harp.json
|
|
@ -355,6 +355,7 @@
|
|||
"name": "Ward Bell",
|
||||
"picture": "/resources/images/bios/wardbell.jpg",
|
||||
"website": "https://github.com/wardbell",
|
||||
"twitter": "wardbell",
|
||||
"bio": "Ward is an all-around developer with JavaScript, node, and .net chops. He's a frequent conference speaker and podcaster, trainer, Google Developer Expert for Angular, Microsoft MVP, and PluralSight author. He is also president of IdeaBlade, an enterprise software consulting firm and the makers of breeze.js. He would like to get more sleep and spend more time in the mountains.",
|
||||
"type": "Community"
|
||||
},
|
||||
|
|
@ -503,7 +504,8 @@
|
|||
"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.",
|
||||
"twitter": "kapunahele",
|
||||
"bio": "Kapunahele is a front-end developer and contributor to angular.io. 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"
|
||||
},
|
||||
|
||||
|
|
@ -512,7 +514,7 @@
|
|||
"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!",
|
||||
"bio": "Paul is a 16-year-old developer living in Germany. While he attends school, Paul works as a core team member on Angular Material. Paul focuses on tooling and building components for Angular.",
|
||||
"type": "Community"
|
||||
},
|
||||
|
||||
|
|
@ -521,6 +523,13 @@
|
|||
"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"
|
||||
},
|
||||
|
||||
"jasonaden": {
|
||||
"name": "Jason Aden",
|
||||
"picture": "/resources/images/bios/jasonaden.jpg",
|
||||
"bio": "Jason is a software engineer at Google on the Angular Core team. He is enthusiastic about Angular and application development in the modern age. In his free time Jason enjoys spending time with his wife and four children and doing outdoor activities (hiking, fishing, snowboarding, etc.).",
|
||||
"type": "Google"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,13 +15,7 @@
|
|||
"subtitle": "帮我们构建面向未来的框架",
|
||||
"autoformat": "true"
|
||||
},
|
||||
"resources": {
|
||||
"title": "资源库",
|
||||
"subtitle": "Angular的资源库"
|
||||
},
|
||||
"news": {
|
||||
"title": "新闻"
|
||||
},
|
||||
|
||||
"events": {
|
||||
"title": "开发者会议",
|
||||
"subtitle": "我们将在哪里开会"
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ div(class="main-footer" data-swiftype-index="false")
|
|||
p <a href="/events.html">Events</a>
|
||||
p <a href="/events.html">会议</a>
|
||||
li <a href="http://www.meetup.com/topics/angularjs/">Meetups</a>
|
||||
li <a href="https://twitter.com/angularjs"> Twitter</a>
|
||||
li <a href="https://twitter.com/angular"> Twitter</a>
|
||||
li <a href="https://github.com/angular/angular"> GitHub</a>
|
||||
li
|
||||
p <a href="/contribute.html"> Contribute</a>
|
||||
|
|
|
|||
|
|
@ -1,13 +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')
|
||||
img(class="hero-logo" src='/resources/images/logos/angular/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="/resources/images/logos/angular2/angular-banner-logo-grey.png" width="64")
|
||||
p Test-drive <strong>@angular/material</strong>: 22个组件进入beta阶段啦！
|
||||
a(href="https://material.angular.io/" target="_blank" class="button md-button") 试试看！
|
||||
img(src="/resources/images/logos/angular/angular-banner-logo-grey.png" width="64")
|
||||
p Angular v4.0 发布啦！更小，更快，改动少
|
||||
a(href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button md-button") 了解更多
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ if current.path[4] && current.path[3] == 'api'
|
|||
|
||||
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>)';
|
||||
- var ngVersion = '(v<ngio-cheatsheet src="' + base + '/cheatsheet.json" version-only>4.X.Y</ngio-cheatsheet>)';
|
||||
|
||||
header.hero.background-sky
|
||||
h1(class="hero-title #{textFormat}") #{headerTitle} !{ngVersion}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ nav(data-swiftype-index="false" class="main-nav l-pinned-top l-layer-5", scroll-
|
|||
li.l-left <a class="main-nav-button" href="/features.html" md-button>特性</a>
|
||||
li.l-left <a class="main-nav-button" href="/docs/#{language}/latest/" md-button>文档</a>
|
||||
li.l-left <a class="main-nav-button" href="/events.html" md-button>会议</a>
|
||||
li.l-left <a class="main-nav-button" href="/news.html" md-button>新闻</a>
|
||||
li.l-left
|
||||
a.main-nav-button(href="http://community.angular.cn/" target="_blank" md-button)
|
||||
| 社区
|
||||
|
|
|
|||
|
|
@ -37,5 +37,4 @@ script(src="/resources/js/directives/code-pane.js")
|
|||
script(src="/resources/js/directives/code-example.js")
|
||||
script(src="/resources/js/directives/if-docs.js")
|
||||
script(src="/resources/js/directives/live-example.js")
|
||||
script(src="/resources/js/directives/ngio-ex-path.js")
|
||||
script(src="/resources/js/directives/scroll-y-offset-element.js")
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# _boilerplate files
|
||||
!_boilerplate/*
|
||||
*/*/src/styles.css
|
||||
*/*/src/systemjs-angular-loader.js
|
||||
*/*/src/systemjs.config.js
|
||||
*/*/src/tsconfig.json
|
||||
*/*/bs-config.e2e.json
|
||||
|
|
@ -15,4 +16,3 @@ protractor-helpers.js
|
|||
**/ts/**/*.js
|
||||
**/js-es6*/**/*.js
|
||||
**/ts-snippets/**/*.js
|
||||
!**/systemjs.config.extras.js
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
"license": "MIT",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"angular-cli": "^1.0.0-beta.26"
|
||||
"angular-cli": "^1.0.0-rc.0"
|
||||
},
|
||||
"repository": {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
|
||||
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
|
||||
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
|
||||
|
||||
module.exports.translate = function(load){
|
||||
if (load.source.indexOf('moduleId') != -1) return load;
|
||||
|
||||
var url = document.createElement('a');
|
||||
url.href = load.address;
|
||||
|
||||
var basePathParts = url.pathname.split('/');
|
||||
|
||||
basePathParts.pop();
|
||||
var basePath = basePathParts.join('/');
|
||||
|
||||
var baseHref = document.createElement('a');
|
||||
baseHref.href = this.baseURL;
|
||||
baseHref = baseHref.pathname;
|
||||
|
||||
if (!baseHref.startsWith('/base/')) { // it is not karma
|
||||
basePath = basePath.replace(baseHref, '');
|
||||
}
|
||||
|
||||
load.source = load.source
|
||||
.replace(templateUrlRegex, function(match, quote, url){
|
||||
var resolvedUrl = url;
|
||||
|
||||
if (url.startsWith('.')) {
|
||||
resolvedUrl = basePath + url.substr(1);
|
||||
}
|
||||
|
||||
return 'templateUrl: "' + resolvedUrl + '"';
|
||||
})
|
||||
.replace(stylesRegex, function(match, relativeUrls) {
|
||||
var urls = [];
|
||||
|
||||
while ((match = stringRegex.exec(relativeUrls)) !== null) {
|
||||
if (match[2].startsWith('.')) {
|
||||
urls.push('"' + basePath + match[2].substr(1) + '"');
|
||||
} else {
|
||||
urls.push('"' + match[2] + '"');
|
||||
}
|
||||
}
|
||||
|
||||
return "styleUrls: [" + urls.join(', ') + "]";
|
||||
});
|
||||
|
||||
return load;
|
||||
};
|
||||
|
|
@ -11,13 +11,16 @@
|
|||
// map tells the System loader where to look for things
|
||||
map: {
|
||||
// our app is within the app folder
|
||||
app: 'app',
|
||||
'app': 'app',
|
||||
|
||||
// angular bundles
|
||||
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
|
||||
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
|
||||
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
|
||||
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
|
||||
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
|
|
@ -34,7 +37,12 @@
|
|||
packages: {
|
||||
app: {
|
||||
main: './main.js',
|
||||
defaultExtension: 'js'
|
||||
defaultExtension: 'js',
|
||||
meta: {
|
||||
'./*.js': {
|
||||
loader: 'systemjs-angular-loader.js'
|
||||
}
|
||||
}
|
||||
},
|
||||
rxjs: {
|
||||
defaultExtension: 'js'
|
||||
|
|
|
|||
|
|
@ -35,13 +35,16 @@
|
|||
// map tells the System loader where to look for things
|
||||
map: {
|
||||
// our app is within the app folder
|
||||
app: 'app',
|
||||
'app': 'app',
|
||||
|
||||
// angular bundles
|
||||
'@angular/animations': 'ng:animations-builds/master/bundles/animations.umd.js',
|
||||
'@angular/animations/browser': 'ng:animations-builds/master/bundles/animations-browser.umd.js',
|
||||
'@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
|
||||
'@angular/common': 'ng:common-builds/master/bundles/common.umd.js',
|
||||
'@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'ng:http-builds/master/bundles/http.umd.js',
|
||||
'@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
|
||||
|
|
@ -64,14 +67,19 @@
|
|||
'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@5.2.7/lib/plugin.js',
|
||||
'typescript': 'npm:typescript@2.0.10/lib/typescript.js',
|
||||
'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
|
||||
|
||||
},
|
||||
// packages tells the System loader how to load when no filename and/or no extension
|
||||
packages: {
|
||||
app: {
|
||||
main: './main.ts',
|
||||
defaultExtension: 'ts'
|
||||
defaultExtension: 'ts',
|
||||
meta: {
|
||||
'./*.ts': {
|
||||
loader: 'systemjs-angular-loader.js'
|
||||
}
|
||||
}
|
||||
},
|
||||
rxjs: {
|
||||
defaultExtension: 'js'
|
||||
|
|
@ -79,58 +87,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
if (global.autoBootstrap) { bootstrap(); }
|
||||
|
||||
// Bootstrap with a default `AppModule`
|
||||
// ignore an `app/app.module.ts` and `app/main.ts`, even if present
|
||||
// This function exists primarily (exclusively?) for the QuickStart
|
||||
function bootstrap() {
|
||||
console.log('Auto-bootstrapping');
|
||||
|
||||
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
|
||||
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
|
||||
|
||||
// bootstrap and launch the app (equivalent to standard main.ts)
|
||||
Promise.all([
|
||||
System.import('@angular/platform-browser-dynamic'),
|
||||
getAppModule()
|
||||
])
|
||||
.then(function (imports) {
|
||||
var platform = imports[0];
|
||||
var app = imports[1];
|
||||
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
|
||||
})
|
||||
.catch(function(err){ console.error(err); });
|
||||
}
|
||||
|
||||
// Make the default AppModule
|
||||
// returns a promise for the AppModule
|
||||
function getAppModule() {
|
||||
console.log('Making a bare-bones, default AppModule');
|
||||
|
||||
return Promise.all([
|
||||
System.import('@angular/core'),
|
||||
System.import('@angular/platform-browser'),
|
||||
System.import('app/app.component')
|
||||
])
|
||||
.then(function (imports) {
|
||||
|
||||
var core = imports[0];
|
||||
var browser = imports[1];
|
||||
var appComp = imports[2].AppComponent;
|
||||
|
||||
var AppModule = function() {}
|
||||
|
||||
AppModule.annotations = [
|
||||
new core.NgModule({
|
||||
imports: [ browser.BrowserModule ],
|
||||
declarations: [ appComp ],
|
||||
bootstrap: [ appComp ]
|
||||
})
|
||||
]
|
||||
return {AppModule: AppModule};
|
||||
})
|
||||
}
|
||||
})(this);
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -32,13 +32,16 @@
|
|||
// map tells the System loader where to look for things
|
||||
map: {
|
||||
// our app is within the app folder
|
||||
app: 'app',
|
||||
'app': 'app',
|
||||
|
||||
// angular bundles
|
||||
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
|
||||
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
|
||||
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
|
||||
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
|
||||
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
|
|
@ -51,14 +54,19 @@
|
|||
'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@5.2.7/lib/plugin.js',
|
||||
'typescript': 'npm:typescript@2.0.10/lib/typescript.js',
|
||||
'typescript': 'npm:typescript@2.2.1/lib/typescript.js',
|
||||
|
||||
},
|
||||
// packages tells the System loader how to load when no filename and/or no extension
|
||||
packages: {
|
||||
app: {
|
||||
main: './main.ts',
|
||||
defaultExtension: 'ts'
|
||||
defaultExtension: 'ts',
|
||||
meta: {
|
||||
'./*.ts': {
|
||||
loader: 'systemjs-angular-loader.js'
|
||||
}
|
||||
}
|
||||
},
|
||||
rxjs: {
|
||||
defaultExtension: 'js'
|
||||
|
|
@ -66,58 +74,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
if (global.autoBootstrap) { bootstrap(); }
|
||||
|
||||
// Bootstrap with a default `AppModule`
|
||||
// ignore an `app/app.module.ts` and `app/main.ts`, even if present
|
||||
// This function exists primarily (exclusively?) for the QuickStart
|
||||
function bootstrap() {
|
||||
console.log('Auto-bootstrapping');
|
||||
|
||||
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
|
||||
System.set(System.normalizeSync('app/main.ts'), System.newModule({ }));
|
||||
|
||||
// bootstrap and launch the app (equivalent to standard main.ts)
|
||||
Promise.all([
|
||||
System.import('@angular/platform-browser-dynamic'),
|
||||
getAppModule()
|
||||
])
|
||||
.then(function (imports) {
|
||||
var platform = imports[0];
|
||||
var app = imports[1];
|
||||
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
|
||||
})
|
||||
.catch(function(err){ console.error(err); });
|
||||
}
|
||||
|
||||
// Make the default AppModule
|
||||
// returns a promise for the AppModule
|
||||
function getAppModule() {
|
||||
console.log('Making a bare-bones, default AppModule');
|
||||
|
||||
return Promise.all([
|
||||
System.import('@angular/core'),
|
||||
System.import('@angular/platform-browser'),
|
||||
System.import('app/app.component')
|
||||
])
|
||||
.then(function (imports) {
|
||||
|
||||
var core = imports[0];
|
||||
var browser = imports[1];
|
||||
var appComp = imports[2].AppComponent;
|
||||
|
||||
var AppModule = function() {}
|
||||
|
||||
AppModule.annotations = [
|
||||
new core.NgModule({
|
||||
imports: [ browser.BrowserModule ],
|
||||
declarations: [ appComp ],
|
||||
bootstrap: [ appComp ]
|
||||
})
|
||||
]
|
||||
return {AppModule: AppModule};
|
||||
})
|
||||
}
|
||||
})(this);
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
// #docregion animations-module
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
// #enddocregion animations-module
|
||||
|
||||
import { HeroTeamBuilderComponent } from './hero-team-builder.component';
|
||||
import { HeroListBasicComponent } from './hero-list-basic.component';
|
||||
|
|
@ -13,8 +16,10 @@ import { HeroListGroupsComponent } from './hero-list-groups.component';
|
|||
import { HeroListMultistepComponent } from './hero-list-multistep.component';
|
||||
import { HeroListTimingsComponent } from './hero-list-timings.component';
|
||||
|
||||
// #docregion animation-module
|
||||
@NgModule({
|
||||
imports: [ BrowserModule ],
|
||||
imports: [ BrowserModule, BrowserAnimationsModule ],
|
||||
// #enddocregion animation-module
|
||||
declarations: [
|
||||
HeroTeamBuilderComponent,
|
||||
HeroListBasicComponent,
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
state,
|
||||
style,
|
||||
animate,
|
||||
transition
|
||||
} from '@angular/core';
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-auto',
|
||||
// #docregion template
|
||||
template: `
|
||||
|
|
|
|||
|
|
@ -3,19 +3,20 @@
|
|||
// #docregion imports
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
state,
|
||||
style,
|
||||
transition,
|
||||
animate
|
||||
} from '@angular/core';
|
||||
animate,
|
||||
transition
|
||||
} from '@angular/animations';
|
||||
// #enddocregion imports
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-basic',
|
||||
// #enddocregion
|
||||
/* The click event calls hero.toggleState(), which
|
||||
|
|
|
|||
|
|
@ -2,19 +2,20 @@
|
|||
// #docregion imports
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
state,
|
||||
style,
|
||||
transition,
|
||||
animate
|
||||
} from '@angular/core';
|
||||
animate,
|
||||
transition
|
||||
} from '@angular/animations';
|
||||
// #enddocregion imports
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-combined-transitions',
|
||||
// #docregion template
|
||||
template: `
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
state,
|
||||
style,
|
||||
animate,
|
||||
transition
|
||||
} from '@angular/core';
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-enter-leave-states',
|
||||
// #docregion template
|
||||
template: `
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
state,
|
||||
style,
|
||||
animate,
|
||||
transition
|
||||
} from '@angular/core';
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-enter-leave',
|
||||
// #docregion template
|
||||
template: `
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
state,
|
||||
style,
|
||||
animate,
|
||||
transition,
|
||||
group
|
||||
} from '@angular/core';
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-groups',
|
||||
template: `
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -3,17 +3,18 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
style,
|
||||
transition,
|
||||
animate
|
||||
} from '@angular/core';
|
||||
animate,
|
||||
transition
|
||||
} from '@angular/animations';
|
||||
// #enddocregion imports
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-inline-styles',
|
||||
// #docregion template
|
||||
template: `
|
||||
|
|
|
|||
|
|
@ -1,19 +1,20 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
state,
|
||||
style,
|
||||
animate,
|
||||
transition,
|
||||
keyframes,
|
||||
AnimationTransitionEvent
|
||||
} from '@angular/core';
|
||||
AnimationEvent
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-multistep',
|
||||
// #docregion template
|
||||
template: `
|
||||
|
|
@ -60,11 +61,11 @@ import { Heroes } from './hero.service';
|
|||
export class HeroListMultistepComponent {
|
||||
@Input() heroes: Heroes;
|
||||
|
||||
animationStarted(event: AnimationTransitionEvent) {
|
||||
animationStarted(event: AnimationEvent) {
|
||||
console.warn('Animation started: ', event);
|
||||
}
|
||||
|
||||
animationDone(event: AnimationTransitionEvent) {
|
||||
animationDone(event: AnimationEvent) {
|
||||
console.warn('Animation done: ', event);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
import {
|
||||
Component,
|
||||
Input,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
state,
|
||||
style,
|
||||
animate,
|
||||
transition
|
||||
} from '@angular/core';
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-timings',
|
||||
template: `
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -2,19 +2,20 @@
|
|||
// #docregion imports
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
Input
|
||||
} from '@angular/core';
|
||||
import {
|
||||
trigger,
|
||||
state,
|
||||
style,
|
||||
transition,
|
||||
animate
|
||||
} from '@angular/core';
|
||||
animate,
|
||||
transition
|
||||
} from '@angular/animations';
|
||||
// #enddocregion imports
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list-twoway',
|
||||
// #docregion template
|
||||
template: `
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { Component, Input } from '@angular/core';
|
|||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-detail',
|
||||
templateUrl: './hero-detail.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { HeroService } from './hero.service';
|
|||
|
||||
// #docregion metadata, providers
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-list',
|
||||
templateUrl: './hero-list.component.html',
|
||||
providers: [ HeroService ]
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ describe('Attribute directives', function () {
|
|||
});
|
||||
|
||||
it('should be able to select green highlight', function () {
|
||||
let highlightedEle = element(by.cssContainingText('p', 'Highlight me'));
|
||||
let highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
|
||||
let lightGreen = 'rgba(144, 238, 144, 1)';
|
||||
|
||||
expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
|
||||
|
|
|
|||
|
|
@ -1,18 +1,14 @@
|
|||
<!-- #docregion -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<!-- #docregion applied -->
|
||||
<p myHighlight>Highlight me!</p>
|
||||
<!-- #enddocregion -->
|
||||
<!-- #enddocregion applied, -->
|
||||
|
||||
<!-- #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 -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.1.html'
|
||||
})
|
||||
|
|
@ -9,4 +8,3 @@ import { Component } from '@angular/core';
|
|||
export class AppComponent {
|
||||
color = 'yellow';
|
||||
}
|
||||
// #enddocregion class
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<!-- #docregion -->
|
||||
<!-- #docregion v2 -->
|
||||
<!-- #docregion v2, -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
|
||||
<h4>Pick a highlight color</h4>
|
||||
|
|
@ -10,15 +9,13 @@
|
|||
</div>
|
||||
<!-- #docregion color -->
|
||||
<p [myHighlight]="color">Highlight me!</p>
|
||||
<!-- #enddocregion color -->
|
||||
<!-- #enddocregion v2 -->
|
||||
<!-- #enddocregion color, v2 -->
|
||||
|
||||
<!-- #docregion defaultColor -->
|
||||
<p [myHighlight]="color" defaultColor="violet">
|
||||
Highlight me too!
|
||||
</p>
|
||||
<!-- #enddocregion defaultColor -->
|
||||
<!-- #enddocregion -->
|
||||
<!-- #enddocregion defaultColor, -->
|
||||
|
||||
<hr>
|
||||
<p><i>Mouse over the following lines to see fixed highlights</i></p>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
|
|
@ -10,5 +9,3 @@ import { Component } from '@angular/core';
|
|||
export class AppComponent {
|
||||
color: string;
|
||||
}
|
||||
// #enddocregion class
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -10,17 +10,6 @@ export class HighlightDirective {
|
|||
// #docregion ctor
|
||||
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() {
|
||||
|
|
@ -39,7 +28,14 @@ export class HighlightDirective {
|
|||
private highlight(color: string) {
|
||||
this.el.nativeElement.style.backgroundColor = color;
|
||||
}
|
||||
// #enddocregion mouse-methods
|
||||
// #enddocregion mouse-methods,
|
||||
|
||||
// #docregion color
|
||||
@Input() highlightColor: string;
|
||||
// #enddocregion color
|
||||
|
||||
// #docregion color-2
|
||||
@Input() myHighlight: string;
|
||||
// #enddocregion color-2
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
/* tslint:disable:member-ordering */
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion imports
|
||||
// #docregion imports,
|
||||
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
|
||||
// #enddocregion imports
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { MovieService } from './movie.service';
|
|||
import { IMovie } from './movie';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: [ './app.component.css' ],
|
||||
|
|
|
|||
|
|
@ -8,10 +8,8 @@ import { MovieService } from './movie.service';
|
|||
|
||||
// #docregion component
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'movie-list',
|
||||
templateUrl: './movie-list.component.html',
|
||||
// #enddocregion component
|
||||
// #docregion style-url
|
||||
styleUrls: [ './movie-list.component.css' ],
|
||||
// #enddocregion style-url
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ describe('AOT Compilation', function () {
|
|||
browser.get('');
|
||||
});
|
||||
|
||||
it('should load page and click button', function (done) {
|
||||
it('should load page and click button', function (done: any) {
|
||||
let headingSelector = element.all(by.css('h1')).get(0);
|
||||
expect(headingSelector.getText()).toEqual('Hello Angular');
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,6 @@ export default {
|
|||
|
||||
// should intercept ... but doesn't in some rollup versions
|
||||
if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
|
||||
// intercepts in some rollup versions
|
||||
if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
|
||||
|
||||
// console.warn everything else
|
||||
console.warn( warning.message );
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,9 +10,6 @@
|
|||
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<!-- #docregion moduleId -->
|
||||
<script>window.module = 'aot';</script>
|
||||
<!-- #enddocregion moduleId -->
|
||||
</head>
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
'use strict'; // necessary for es6 output in node
|
||||
|
||||
import { browser, element, by, ElementFinder } from 'protractor';
|
||||
|
||||
describe('Cookbook: component-relative paths', function () {
|
||||
|
||||
interface Page {
|
||||
title: ElementFinder;
|
||||
absComp: ElementFinder;
|
||||
relComp: ElementFinder;
|
||||
|
||||
}
|
||||
function getPageStruct() {
|
||||
return {
|
||||
title: element( by.tagName( 'h1' )),
|
||||
absComp: element( by.css( 'absolute-path div' ) ),
|
||||
relComp: element( by.css( 'relative-path div' ) )
|
||||
};
|
||||
}
|
||||
|
||||
let page: Page;
|
||||
beforeAll(function () {
|
||||
browser.get('');
|
||||
page = getPageStruct();
|
||||
});
|
||||
|
||||
it('should display title of the sample', function () {
|
||||
expect(element(by.tagName('h1')).getText()).toContain('Paths');
|
||||
});
|
||||
|
||||
it('should have absolute-path element', function () {
|
||||
expect(page.absComp.isPresent()).toBe(true, 'no <absolute-path> element');
|
||||
});
|
||||
|
||||
it('should display the absolute path text', function () {
|
||||
expect(page.absComp.getText()).toContain('Absolute');
|
||||
});
|
||||
|
||||
it('should display the component-relative path text', function () {
|
||||
expect(page.relComp.getText()).toContain('Component-relative');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"description": "Module-relative Paths",
|
||||
"basePath": "src/",
|
||||
"files": [
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js"
|
||||
],
|
||||
"tags": [ "cookbook" ]
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template:
|
||||
`<h1>Absolute & <i>Component-Relative</i> Paths</h1>
|
||||
<absolute-path></absolute-path>
|
||||
<relative-path></relative-path>
|
||||
`
|
||||
})
|
||||
export class AppComponent {}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { SomeAbsoluteComponent, SomeRelativeComponent } from './some.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
SomeAbsoluteComponent,
|
||||
SomeRelativeComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
/* #docregion */
|
||||
div.absolute {
|
||||
background: beige;
|
||||
border: 1px solid darkred;
|
||||
color: red;
|
||||
margin: 8px;
|
||||
max-width: 20em;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.relative {
|
||||
background: powderblue;
|
||||
border: 1px solid darkblue;
|
||||
color: Blue;
|
||||
font-style: italic;
|
||||
margin: 8px;
|
||||
max-width: 20em;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
<!-- #docregion -->
|
||||
<div class={{class}}>
|
||||
{{type}}<br>{{path}}
|
||||
</div>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
// #docregion
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
///////// Using Absolute Paths ///////
|
||||
|
||||
// #docregion absolute-config
|
||||
@Component({
|
||||
selector: 'absolute-path',
|
||||
templateUrl: 'app/some.component.html',
|
||||
styleUrls: ['app/some.component.css']
|
||||
})
|
||||
// #enddocregion absolute-config
|
||||
export class SomeAbsoluteComponent {
|
||||
class = 'absolute';
|
||||
type = 'Absolute template & style URLs';
|
||||
path = 'app/path.component.html';
|
||||
}
|
||||
|
||||
///////// Using Relative Paths ///////
|
||||
|
||||
// #docregion relative-config
|
||||
@Component({
|
||||
// #docregion module-id
|
||||
moduleId: module.id,
|
||||
// #enddocregion module-id
|
||||
selector: 'relative-path',
|
||||
templateUrl: './some.component.html',
|
||||
styleUrls: ['./some.component.css']
|
||||
})
|
||||
// #enddocregion relative-config
|
||||
|
||||
export class SomeRelativeComponent {
|
||||
class = 'relative';
|
||||
type = 'Component-relative template & style URLs';
|
||||
path = 'path.component.html';
|
||||
|
||||
}
|
||||
|
|
@ -7,7 +7,6 @@ import { UserContextService } from './user-context.service';
|
|||
import { UserService } from './user.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.html',
|
||||
// #docregion providers
|
||||
|
|
|
|||
|
|
@ -4,29 +4,10 @@ import { Injectable } from '@angular/core';
|
|||
|
||||
import { LoggerService } from './logger.service';
|
||||
|
||||
// #docregion minimal-logger
|
||||
// class used as a restricting interface (hides other public members)
|
||||
export abstract class MinimalLogger {
|
||||
logInfo: (msg: string) => void;
|
||||
logs: string[];
|
||||
}
|
||||
// #enddocregion minimal-logger
|
||||
|
||||
/*
|
||||
// Transpiles to:
|
||||
// #docregion minimal-logger-transpiled
|
||||
var MinimalLogger = (function () {
|
||||
function MinimalLogger() {}
|
||||
return MinimalLogger;
|
||||
}());
|
||||
exports("MinimalLogger", MinimalLogger);
|
||||
// #enddocregion minimal-logger-transpiled
|
||||
*/
|
||||
|
||||
// #docregion date-logger-service
|
||||
@Injectable()
|
||||
// #docregion date-logger-service-signature
|
||||
export class DateLoggerService extends LoggerService implements MinimalLogger
|
||||
export class DateLoggerService extends LoggerService
|
||||
// #enddocregion date-logger-service-signature
|
||||
{
|
||||
logInfo(msg: any) { super.logInfo(stamp(msg)); }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
// Illustrative (not used), mini-version of the actual HeroOfTheMonthComponent
|
||||
// Injecting with the MinimalLogger "interface-class"
|
||||
import { Component, NgModule } from '@angular/core';
|
||||
import { LoggerService } from './logger.service';
|
||||
import { MinimalLogger } from './minimal-logger.service';
|
||||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-of-the-month',
|
||||
templateUrl: './hero-of-the-month.component.html',
|
||||
// Todo: move this aliasing, `useExisting` provider to the AppModule
|
||||
providers: [{ provide: MinimalLogger, useExisting: LoggerService }]
|
||||
})
|
||||
export class HeroOfTheMonthComponent {
|
||||
logs: string[] = [];
|
||||
constructor(logger: MinimalLogger) {
|
||||
logger.logInfo('starting up');
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
// This NgModule exists only to avoid the Angular language service's "undeclared component" error
|
||||
@NgModule({
|
||||
declarations: [ HeroOfTheMonthComponent ]
|
||||
})
|
||||
class NoopModule {}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<h3>{{title}}</h3>
|
||||
<div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
|
||||
<div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
|
||||
<div>Runners-up: <strong id="rups1">{{runnersUp}}</strong></div>
|
||||
|
||||
<p>Logs:</p>
|
||||
<div id="logs">
|
||||
<div *ngFor="let log of logs">{{log}}</div>
|
||||
</div>
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
/* tslint:disable:one-line:check-open-brace*/
|
||||
// #docplaster
|
||||
// #docregion opaque-token
|
||||
import { OpaqueToken } from '@angular/core';
|
||||
// #docregion injection-token
|
||||
import { InjectionToken } from '@angular/core';
|
||||
|
||||
export const TITLE = new OpaqueToken('title');
|
||||
// #enddocregion opaque-token
|
||||
export const TITLE = new InjectionToken<string>('title');
|
||||
// #enddocregion injection-token
|
||||
|
||||
// #docregion hero-of-the-month
|
||||
import { Component, Inject } from '@angular/core';
|
||||
|
||||
import { DateLoggerService,
|
||||
MinimalLogger } from './date-logger.service';
|
||||
import { DateLoggerService } from './date-logger.service';
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
import { LoggerService } from './logger.service';
|
||||
import { MinimalLogger } from './minimal-logger.service';
|
||||
import { RUNNERS_UP,
|
||||
runnersUpFactory } from './runners-up';
|
||||
|
||||
|
|
@ -22,28 +22,16 @@ import { RUNNERS_UP,
|
|||
const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
|
||||
// #enddocregion some-hero
|
||||
|
||||
const template = `
|
||||
<h3>{{title}}</h3>
|
||||
<div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
|
||||
<div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
|
||||
<div>Runners-up: <strong id="rups1">{{runnersUp}}</strong></div>
|
||||
|
||||
<p>Logs:</p>
|
||||
<div id="logs">
|
||||
<div *ngFor="let log of logs">{{log}}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// #docregion hero-of-the-month
|
||||
@Component({
|
||||
selector: 'hero-of-the-month',
|
||||
template: template,
|
||||
templateUrl: './hero-of-the-month.component.html',
|
||||
providers: [
|
||||
// #docregion use-value
|
||||
{ provide: Hero, useValue: someHero },
|
||||
// #docregion provide-opaque-token
|
||||
// #docregion provide-injection-token
|
||||
{ provide: TITLE, useValue: 'Hero of the Month' },
|
||||
// #enddocregion provide-opaque-token
|
||||
// #enddocregion provide-injection-token
|
||||
// #enddocregion use-value
|
||||
// #docregion use-class
|
||||
{ provide: HeroService, useClass: HeroService },
|
||||
|
|
@ -52,9 +40,9 @@ const template = `
|
|||
// #docregion use-existing
|
||||
{ provide: MinimalLogger, useExisting: LoggerService },
|
||||
// #enddocregion use-existing
|
||||
// #docregion provide-opaque-token, use-factory
|
||||
// #docregion provide-injection-token, use-factory
|
||||
{ provide: RUNNERS_UP, useFactory: runnersUpFactory(2), deps: [Hero, HeroService] }
|
||||
// #enddocregion provide-opaque-token, use-factory
|
||||
// #enddocregion provide-injection-token, use-factory
|
||||
]
|
||||
})
|
||||
export class HeroOfTheMonthComponent {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
// #docregion
|
||||
// Class used as a "narrowing" interface that exposes a minimal logger
|
||||
// Other members of the actual implementation are invisible
|
||||
export abstract class MinimalLogger {
|
||||
logs: string[];
|
||||
logInfo: (msg: string) => void;
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
/*
|
||||
// Transpiles to:
|
||||
// #docregion minimal-logger-transpiled
|
||||
var MinimalLogger = (function () {
|
||||
function MinimalLogger() {}
|
||||
return MinimalLogger;
|
||||
}());
|
||||
exports("MinimalLogger", MinimalLogger);
|
||||
// #enddocregion minimal-logger-transpiled
|
||||
*/
|
||||
|
||||
// See http://stackoverflow.com/questions/43154832/unexpected-token-export-in-angular-app-with-systemjs-and-typescript/
|
||||
export const _ = 0;
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
// #docplaster
|
||||
// #docregion
|
||||
import { OpaqueToken } from '@angular/core';
|
||||
import { InjectionToken } from '@angular/core';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
// #docregion runners-up
|
||||
export const RUNNERS_UP = new OpaqueToken('RunnersUp');
|
||||
// #docregion runners-up
|
||||
export const RUNNERS_UP = new InjectionToken<string>('RunnersUp');
|
||||
// #enddocregion runners-up
|
||||
|
||||
// #docregion factory-synopsis
|
||||
export function runnersUpFactory(take: number) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"description": "Dynamic Component Loader",
|
||||
"basePath": "src/",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js"
|
||||
],
|
||||
"tags":["cookbook component"]
|
||||
}
|
||||
|
|
@ -11,11 +11,12 @@ import { AdComponent } from './ad.component';
|
|||
template: `
|
||||
<div class="ad-banner">
|
||||
<h3>Advertisements</h3>
|
||||
<template ad-host></template>
|
||||
<ng-template ad-host></ng-template>
|
||||
</div>
|
||||
`
|
||||
// #enddocregion ad-host
|
||||
// #enddocregion ad-host
|
||||
})
|
||||
// #docregion class
|
||||
export class AdBannerComponent implements AfterViewInit, OnDestroy {
|
||||
@Input() ads: AdItem[];
|
||||
currentAddIndex: number = -1;
|
||||
|
|
@ -53,3 +54,4 @@ export class AdBannerComponent implements AfterViewInit, OnDestroy {
|
|||
}, 3000);
|
||||
}
|
||||
}
|
||||
// #enddocregion class
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { FormGroup } from '@angular/forms';
|
|||
import { QuestionBase } from './question-base';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'df-question',
|
||||
templateUrl: './dynamic-form-question.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { QuestionBase } from './question-base';
|
|||
import { QuestionControlService } from './question-control.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'dynamic-form',
|
||||
templateUrl: './dynamic-form.component.html',
|
||||
providers: [ QuestionControlService ]
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import { Hero } from '../shared/hero';
|
|||
import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-form-reactive3',
|
||||
templateUrl: './hero-form-reactive.component.html'
|
||||
})
|
||||
|
|
@ -33,7 +32,7 @@ export class HeroFormReactiveComponent implements OnInit {
|
|||
// to be removed/re-added in a tick via NgIf
|
||||
// TODO: Workaround until NgForm has a reset method (#6822)
|
||||
active = true;
|
||||
// #docregion
|
||||
// #docregion class
|
||||
// #docregion add-hero
|
||||
addHero() {
|
||||
this.hero = new Hero(42, '', '');
|
||||
|
|
|
|||
|
|
@ -39,5 +39,5 @@ export class ForbiddenValidatorDirective implements Validator, OnChanges {
|
|||
return this.valFn(control);
|
||||
}
|
||||
}
|
||||
// #docregion directive
|
||||
// #enddocregion directive
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { Component } from '@angular/core';
|
|||
import { Hero } from '../shared/hero';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-form-template1',
|
||||
templateUrl: './hero-form-template1.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import { NgForm } from '@angular/forms';
|
|||
import { Hero } from '../shared/hero';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-form-template2',
|
||||
templateUrl: './hero-form-template2.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
"!**/*.[1].*",
|
||||
|
||||
"main.ts",
|
||||
"styles.css",
|
||||
"systemjs-text-plugin.js",
|
||||
"index.html"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
|
|
@ -10,7 +9,7 @@ export class AppComponent {
|
|||
wolves = 0;
|
||||
gender = 'f';
|
||||
fly = true;
|
||||
logo = 'https://angular.io/resources/images/logos/angular2/angular.png';
|
||||
logo = 'https://angular.io/resources/images/logos/angular/angular.png';
|
||||
inc(i: number) {
|
||||
this.wolves = Math.min(5, Math.max(0, this.wolves + i));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.html',
|
||||
styles: [
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|||
|
||||
// #docregion
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'app-confirm',
|
||||
templateUrl: './confirm.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { Attribute, Component, Inject, Optional } from '@angular/core';
|
|||
// #docregion
|
||||
// #docregion templateUrl
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-title',
|
||||
templateUrl: './hero-title.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ export class AppComponent {
|
|||
|
||||
AppComponent.annotations = [
|
||||
new Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.html',
|
||||
styles: [
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ export class ConfirmComponent {
|
|||
|
||||
ConfirmComponent.annotations = [
|
||||
new Component({
|
||||
moduleId: module.id,
|
||||
selector: 'app-confirm',
|
||||
templateUrl: './confirm.component.html',
|
||||
inputs: [
|
||||
|
|
|
|||
|
|
@ -46,5 +46,5 @@ HeroHostComponent.annotations = [
|
|||
styles: ['.active {background-color: yellow;}']
|
||||
})
|
||||
];
|
||||
// #docregion metadata
|
||||
// #enddocregion metadata
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ export class HeroTitleComponent {
|
|||
// #docregion templateUrl
|
||||
HeroTitleComponent.annotations = [
|
||||
new Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-title',
|
||||
templateUrl: './hero-title.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"build": "build:babel"
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
templateUrl: './app.component.html',
|
||||
styles: [
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|||
|
||||
// #docregion
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'app-confirm',
|
||||
templateUrl: './confirm.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { Attribute, Component, Inject, Optional } from '@angular/core';
|
|||
// #docregion
|
||||
// #docregion templateUrl
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-title',
|
||||
templateUrl: './hero-title.component.html'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"version": "1.0.0-beta.25.5",
|
||||
"name": "my-app"
|
||||
"name": "master-project"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
|
|
@ -13,28 +13,38 @@
|
|||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.json",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"mobile": false,
|
||||
"styles": [
|
||||
"styles.css"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"source": "environments/environment.ts",
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"addons": [],
|
||||
"packages": [],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json"
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json"
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "./karma.conf.js"
|
||||
|
|
@ -42,18 +52,6 @@
|
|||
},
|
||||
"defaults": {
|
||||
"styleExt": "css",
|
||||
"prefixInterfaces": false,
|
||||
"inline": {
|
||||
"style": false,
|
||||
"template": false
|
||||
},
|
||||
"spec": {
|
||||
"class": false,
|
||||
"component": true,
|
||||
"directive": true,
|
||||
"module": false,
|
||||
"pipe": true,
|
||||
"service": true
|
||||
}
|
||||
"component": {}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# Editor configuration, see http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -14,9 +14,10 @@
|
|||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
|
|
@ -40,3 +41,5 @@ testem.log
|
|||
Thumbs.db
|
||||
|
||||
!src/styles.css
|
||||
!karma.conf.js
|
||||
!protractor.conf.js
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# MyApp
|
||||
# MasterProject
|
||||
|
||||
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.25.5.
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.0.
|
||||
|
||||
## Development server
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
|
@ -22,10 +22,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
|
|||
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
Before running the tests make sure you are serving the app via `ng serve`.
|
||||
|
||||
## Deploying to GitHub Pages
|
||||
|
||||
Run `ng github-pages:deploy` to deploy to GitHub Pages.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2016"
|
||||
],
|
||||
"outDir": "../dist/out-tsc-e2e",
|
||||
"module": "commonjs",
|
||||
"target": "es6",
|
||||
"types":[
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/0.13/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular/cli'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage-istanbul-reporter'),
|
||||
require('@angular/cli/plugins/karma')
|
||||
],
|
||||
client:{
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
files: [
|
||||
{ pattern: './src/test.ts', watched: false }
|
||||
],
|
||||
preprocessors: {
|
||||
'./src/test.ts': ['@angular/cli']
|
||||
},
|
||||
mime: {
|
||||
'text/x-typescript': ['ts','tsx']
|
||||
},
|
||||
coverageIstanbulReporter: {
|
||||
reports: [ 'html', 'lcovonly' ],
|
||||
fixWebpackSourcePaths: true
|
||||
},
|
||||
angularCli: {
|
||||
environment: 'dev'
|
||||
},
|
||||
reporters: config.angularCli && config.angularCli.codeCoverage
|
||||
? ['progress', 'coverage-istanbul']
|
||||
: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
/*global jasmine */
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 11000,
|
||||
specs: [
|
||||
'./e2e/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
'browserName': 'chrome'
|
||||
},
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 30000,
|
||||
print: function() {}
|
||||
},
|
||||
beforeLaunch: function() {
|
||||
require('ts-node').register({
|
||||
project: 'e2e/tsconfig.e2e.json'
|
||||
});
|
||||
},
|
||||
onPrepare() {
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
|
|
@ -1,18 +1,15 @@
|
|||
/* tslint:disable:no-unused-variable */
|
||||
|
||||
import { TestBed, async } from '@angular/core/testing';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(() => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
});
|
||||
TestBed.compileComponents();
|
||||
});
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// The file contents for the current environment will overwrite these during build.
|
||||
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
|
||||
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
|
||||
// The list of which env maps to which file can be found in `angular-cli.json`.
|
||||
// The list of which env maps to which file can be found in `.angular-cli.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import './polyfills.ts';
|
||||
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { environment } from './environments/environment';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
|
|
|
|||
|
|
@ -1,19 +1,68 @@
|
|||
// This file includes polyfills needed by Angular and is loaded before
|
||||
// the app. You can add your own extra polyfills to this file.
|
||||
import 'core-js/es6/symbol';
|
||||
import 'core-js/es6/object';
|
||||
import 'core-js/es6/function';
|
||||
import 'core-js/es6/parse-int';
|
||||
import 'core-js/es6/parse-float';
|
||||
import 'core-js/es6/number';
|
||||
import 'core-js/es6/math';
|
||||
import 'core-js/es6/string';
|
||||
import 'core-js/es6/date';
|
||||
import 'core-js/es6/array';
|
||||
import 'core-js/es6/regexp';
|
||||
import 'core-js/es6/map';
|
||||
import 'core-js/es6/set';
|
||||
import 'core-js/es6/reflect';
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
|
||||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
|
||||
// import 'core-js/es6/symbol';
|
||||
// import 'core-js/es6/object';
|
||||
// import 'core-js/es6/function';
|
||||
// import 'core-js/es6/parse-int';
|
||||
// import 'core-js/es6/parse-float';
|
||||
// import 'core-js/es6/number';
|
||||
// import 'core-js/es6/math';
|
||||
// import 'core-js/es6/string';
|
||||
// import 'core-js/es6/date';
|
||||
// import 'core-js/es6/array';
|
||||
// import 'core-js/es6/regexp';
|
||||
// import 'core-js/es6/map';
|
||||
// import 'core-js/es6/set';
|
||||
|
||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||
|
||||
/** IE10 and IE11 requires the following to support `@angular/animation`. */
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
|
||||
/** Evergreen browsers require these. **/
|
||||
import 'core-js/es6/reflect';
|
||||
import 'core-js/es7/reflect';
|
||||
import 'zone.js/dist/zone';
|
||||
|
||||
|
||||
/** ALL Firefox browsers require the following to support `@angular/animation`. **/
|
||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by Angular itself.
|
||||
*/
|
||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
|
||||
/**
|
||||
* Date, currency, decimal and percent pipes.
|
||||
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
|
||||
*/
|
||||
// import 'intl'; // Run `npm install --save intl`.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import './polyfills.ts';
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/long-stack-trace-zone';
|
||||
import 'zone.js/dist/proxy.js';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2016",
|
||||
"dom"
|
||||
],
|
||||
"outDir": "../out-tsc/app",
|
||||
"target": "es5",
|
||||
"module": "es2015",
|
||||
"baseUrl": "",
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2016"
|
||||
],
|
||||
"outDir": "../out-tsc/spec",
|
||||
"module": "commonjs",
|
||||
"target": "es6",
|
||||
"baseUrl": "",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"test.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"lib": [
|
||||
"es2016"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[0-9].*",
|
||||
".angular-cli.json",
|
||||
"protractor.conf.js"
|
||||
],
|
||||
"removeSystemJsConfig": true,
|
||||
"type": "cli"
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
'use strict'; // necessary for es6 output in node
|
||||
'use strict'; // necessary for es6 output in node
|
||||
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
|
|
@ -65,9 +65,4 @@ describe('Component Style Tests', function () {
|
|||
expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
|
||||
});
|
||||
|
||||
it('supports relative loading with moduleId', function() {
|
||||
let host = element(by.css('quest-summary'));
|
||||
expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
|
|||
|
||||
// #docregion
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'quest-summary',
|
||||
// #docregion urls
|
||||
templateUrl: './quest-summary.component.html',
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
@ -163,7 +163,7 @@ describe('Dependency Injection Tests', function () {
|
|||
|
||||
describe('after button click', function() {
|
||||
|
||||
beforeAll(function (done) {
|
||||
beforeAll(function (done: any) {
|
||||
let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
|
||||
buttonEle.click().then(done, done);
|
||||
});
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue