Merge branch 'master' into aio
# Conflicts: # aio/content/guide/ajs-quick-reference.md # aio/content/guide/animations.md # aio/content/guide/browser-support.md # aio/content/guide/form-validation.md # aio/content/guide/i18n.md # aio/content/guide/pipes.md # aio/content/guide/router.md # aio/content/guide/set-document-title.md # aio/content/guide/structural-directives.md # aio/content/guide/template-syntax.md # aio/content/guide/testing.md # aio/content/marketing/resources.json # aio/content/tutorial/toh-pt1.md # aio/content/tutorial/toh-pt2.md # aio/content/tutorial/toh-pt3.md # aio/content/tutorial/toh-pt4.md # aio/content/tutorial/toh-pt5.md
This commit is contained in:
Zhicheng Wang
commit
d7fd581c37
18
.bazelrc
18
.bazelrc
|
|
@ -1,6 +1,18 @@
|
|||
# Disable sandboxing because it's too slow.
|
||||
# https://github.com/bazelbuild/bazel/issues/2424
|
||||
build --spawn_strategy=standalone
|
||||
# Make compilation fast, by keeping a few copies of the compilers
|
||||
# running as daemons, and cache SourceFile AST's to reduce parse time.
|
||||
build --strategy=TypeScriptCompile=worker
|
||||
build --strategy=AngularTemplateCompile=worker
|
||||
|
||||
# Don't create bazel-* symlinks in the WORKSPACE directory.
|
||||
# These require .gitignore and may scare users.
|
||||
# Also, it's a workaround for https://github.com/bazelbuild/rules_typescript/issues/12
|
||||
# which affects the common case of having `tsconfig.json` in the WORKSPACE directory.
|
||||
#
|
||||
# Instead, you should run `bazel info bazel-bin` to find out where the outputs went.
|
||||
build --symlink_prefix=/
|
||||
|
||||
# Performance: avoid stat'ing input files
|
||||
build --watchfs
|
||||
|
||||
# Don't print all the .d.ts output locations after builds
|
||||
build --show_result=0
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
anchor_1: &job_defaults
|
||||
working_directory: ~/ng
|
||||
docker:
|
||||
- image: angular/ngcontainer
|
||||
- image: angular/ngcontainer:0.0.2
|
||||
|
||||
# After checkout, rebase on top of master.
|
||||
# Similar to travis behavior, but not quite the same.
|
||||
|
|
@ -27,10 +27,9 @@ jobs:
|
|||
- checkout:
|
||||
<<: *post_checkout
|
||||
- restore_cache:
|
||||
key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
|
||||
key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
|
||||
- run: npm install
|
||||
- run: npm run postinstall
|
||||
- run: yarn install
|
||||
- run: ./node_modules/.bin/gulp lint
|
||||
|
||||
build:
|
||||
|
|
@ -39,12 +38,12 @@ jobs:
|
|||
- checkout:
|
||||
<<: *post_checkout
|
||||
- restore_cache:
|
||||
key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
|
||||
key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
|
||||
- run: bazel run @build_bazel_rules_typescript_node//:bin/npm install
|
||||
- run: bazel run @yarn//:yarn
|
||||
- run: bazel build packages/...
|
||||
- save_cache:
|
||||
key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
|
||||
key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- "node_modules"
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ bazel-*
|
|||
e2e_test.*
|
||||
node_modules
|
||||
bower_components
|
||||
tools/gulp-tasks/cldr/cldr-data/
|
||||
|
||||
# Include when developing application packages.
|
||||
pubspec.lock
|
||||
|
|
|
|||
|
|
@ -60,6 +60,19 @@ groups:
|
|||
- IgorMinar
|
||||
- mhevery
|
||||
|
||||
bazel:
|
||||
conditions:
|
||||
files:
|
||||
include:
|
||||
- "WORKSPACE"
|
||||
- "*.bazel"
|
||||
- "*.bzl"
|
||||
- "packages/bazel/*"
|
||||
users:
|
||||
- alexeagle #primary
|
||||
- chuckjaz
|
||||
- vikerman #fallback
|
||||
|
||||
build-and-ci:
|
||||
conditions:
|
||||
files:
|
||||
|
|
@ -70,7 +83,6 @@ groups:
|
|||
- "tools/*"
|
||||
exclude:
|
||||
- "tools/public_api_guard/*"
|
||||
- "tools/ngc-wrapped/*"
|
||||
- "aio/*"
|
||||
users:
|
||||
- IgorMinar #primary
|
||||
|
|
@ -136,9 +148,8 @@ groups:
|
|||
compiler-cli:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/tsc-wrapped/*"
|
||||
- "packages/compiler-cli/*"
|
||||
- "tools/ngc-wrapped/*"
|
||||
- "packages/bazel/*"
|
||||
users:
|
||||
- alexeagle
|
||||
- chuckjaz
|
||||
|
|
@ -150,7 +161,10 @@ groups:
|
|||
common:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/common/*"
|
||||
include:
|
||||
- "packages/common/*"
|
||||
exclude:
|
||||
- "packages/common/http/*"
|
||||
users:
|
||||
- pkozlowski-opensource #primary
|
||||
- vicb
|
||||
|
|
@ -170,6 +184,7 @@ groups:
|
|||
http:
|
||||
conditions:
|
||||
files:
|
||||
- "packages/common/http/*"
|
||||
- "packages/http/*"
|
||||
users:
|
||||
- vikerman #primary
|
||||
|
|
|
|||
37
BUILD.bazel
37
BUILD.bazel
|
|
@ -6,20 +6,25 @@ exports_files(["tsconfig.json"])
|
|||
# https://github.com/bazelbuild/bazel/issues/374#issuecomment-296217940
|
||||
filegroup(
|
||||
name = "node_modules",
|
||||
srcs = glob([
|
||||
# Performance workaround: list individual files
|
||||
# This won't scale in the general case.
|
||||
# TODO(alexeagle): figure out what to do
|
||||
"node_modules/typescript/**",
|
||||
"node_modules/zone.js/**",
|
||||
"node_modules/rxjs/**/*.d.ts",
|
||||
"node_modules/rxjs/**/*.js",
|
||||
"node_modules/@types/**/*.d.ts",
|
||||
"node_modules/tsickle/**",
|
||||
"node_modules/hammerjs/**/*.d.ts",
|
||||
"node_modules/protobufjs/**",
|
||||
"node_modules/bytebuffer/**",
|
||||
"node_modules/reflect-metadata/**",
|
||||
"node_modules/minimist/**/*.js",
|
||||
]),
|
||||
# Performance workaround: list individual files
|
||||
# Reduces the number of files as inputs to nodejs_binary:
|
||||
# bazel query "deps(:node_modules)" | wc -l
|
||||
# This won't scale in the general case.
|
||||
# TODO(alexeagle): figure out what to do
|
||||
srcs = glob(["/".join(["node_modules", pkg, "**", ext]) for pkg in [
|
||||
"typescript",
|
||||
"zone.js",
|
||||
"rxjs",
|
||||
"@types",
|
||||
"tsickle",
|
||||
"hammerjs",
|
||||
"protobufjs",
|
||||
"bytebuffer",
|
||||
"reflect-metadata",
|
||||
"minimist",
|
||||
] for ext in [
|
||||
"*.js",
|
||||
"*.json",
|
||||
"*.d.ts",
|
||||
]]),
|
||||
)
|
||||
|
|
|
|||
404
CHANGELOG.md
404
CHANGELOG.md
|
|
@ -1,11 +1,390 @@
|
|||
<a name="5.0.0-beta.4"></a>
|
||||
# [5.0.0-beta.4](https://github.com/angular/angular/compare/5.0.0-beta.3...5.0.0-beta.4) (2017-08-16)
|
||||
<a name="5.0.0-rc.0"></a>
|
||||
# [5.0.0-rc.0](https://github.com/angular/angular/compare/5.0.0-beta.7...5.0.0-rc.0) (2017-09-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** properly support the query limit option value ([b54368b](https://github.com/angular/angular/commit/b54368b)), closes [#19232](https://github.com/angular/angular/issues/19232)
|
||||
* **common:** use correct pipe name in error messages ([#19403](https://github.com/angular/angular/issues/19403)) ([f9b0863](https://github.com/angular/angular/commit/f9b0863)), closes [#19373](https://github.com/angular/angular/issues/19373)
|
||||
* **compiler:** add parens around binary / ternary expressions ([3799f43](https://github.com/angular/angular/commit/3799f43))
|
||||
* **compiler:** allow to use flat modules and summaries ([ec2be5d](https://github.com/angular/angular/commit/ec2be5d))
|
||||
* **compiler:** allow to use lowering with `export *`. ([e31a76c](https://github.com/angular/angular/commit/e31a76c))
|
||||
* **compiler:** also create `.ngfactory.js` files in non obvious cases ([#19301](https://github.com/angular/angular/issues/19301)) ([1a647c3](https://github.com/angular/angular/commit/1a647c3))
|
||||
* **compiler:** collect non exported symbols in d.ts files ([#19301](https://github.com/angular/angular/issues/19301)) ([62602b9](https://github.com/angular/angular/commit/62602b9))
|
||||
* **compiler:** correctly derive `fileExists` for generated files ([#19301](https://github.com/angular/angular/issues/19301)) ([f2bad19](https://github.com/angular/angular/commit/f2bad19))
|
||||
* **compiler:** correctly map error message locations ([#19424](https://github.com/angular/angular/issues/19424)) ([ff5b050](https://github.com/angular/angular/commit/ff5b050))
|
||||
* **compiler:** do not consider a reference with members as a reference ([#19454](https://github.com/angular/angular/issues/19454)) ([b3db3f8](https://github.com/angular/angular/commit/b3db3f8))
|
||||
* **compiler:** don’t lower property accesses of exported symbols ([#19301](https://github.com/angular/angular/issues/19301)) ([45747ed](https://github.com/angular/angular/commit/45747ed))
|
||||
* **compiler:** don’t type check property access of literal maps ([#19301](https://github.com/angular/angular/issues/19301)) ([04997c8](https://github.com/angular/angular/commit/04997c8))
|
||||
* **compiler:** implement i18n with new compiler ([627f048](https://github.com/angular/angular/commit/627f048)), closes [#19429](https://github.com/angular/angular/issues/19429)
|
||||
* **compiler:** make sure our out path calculation is correct ([2f6ae52](https://github.com/angular/angular/commit/2f6ae52))
|
||||
* **compiler:** make sure to detect paths that start with `rootDir` correctly ([bb1665c](https://github.com/angular/angular/commit/bb1665c)), closes [#19362](https://github.com/angular/angular/issues/19362)
|
||||
* **compiler:** make watch mode work with `declaration: false` ([7c1d3e0](https://github.com/angular/angular/commit/7c1d3e0)), closes [#19464](https://github.com/angular/angular/issues/19464)
|
||||
* **compiler:** remove deprecated `Compiler.ngGetContentSelectors()` ([#19347](https://github.com/angular/angular/issues/19347)) ([f57b7df](https://github.com/angular/angular/commit/f57b7df))
|
||||
* **compiler:** skip when trimming / removing whitespaces ([#19310](https://github.com/angular/angular/issues/19310)) ([13613d4](https://github.com/angular/angular/commit/13613d4)), closes [#19304](https://github.com/angular/angular/issues/19304)
|
||||
* **compiler:** support `noResolve` ([#19301](https://github.com/angular/angular/issues/19301)) ([c76da27](https://github.com/angular/angular/commit/c76da27))
|
||||
* **compiler:** various squashed fixes for the new ngc ([a8a9660](https://github.com/angular/angular/commit/a8a9660))
|
||||
* **compiler:** work well with `forwardRef` with `useValue` / `useFactory` ([1dacae2](https://github.com/angular/angular/commit/1dacae2))
|
||||
* **compiler-cli:** do not validate metadata from declaration files ([#19324](https://github.com/angular/angular/issues/19324)) ([4767902](https://github.com/angular/angular/commit/4767902)), closes [#18867](https://github.com/angular/angular/issues/18867)
|
||||
* **compiler-cli:** don't join errors with comma ([#19331](https://github.com/angular/angular/issues/19331)) ([e889c68](https://github.com/angular/angular/commit/e889c68))
|
||||
* **compiler-cli:** don't rewrite imports when annotating for closure ([#19444](https://github.com/angular/angular/issues/19444)) ([f24ea59](https://github.com/angular/angular/commit/f24ea59))
|
||||
* create proper externs so that closure does not clobber e.g. `ng` for internal variables ([#19423](https://github.com/angular/angular/issues/19423)) ([b21a1d1](https://github.com/angular/angular/commit/b21a1d1))
|
||||
* **compiler-cli:** set source file ranges in node emitter ([#19348](https://github.com/angular/angular/issues/19348)) ([27c6638](https://github.com/angular/angular/commit/27c6638))
|
||||
* **compiler-cli:** update ngtools2 EmitFlags ([#19375](https://github.com/angular/angular/issues/19375)) ([e224e3d](https://github.com/angular/angular/commit/e224e3d))
|
||||
* **core:** make dynamic & inline code checking behave the same ([#19189](https://github.com/angular/angular/issues/19189)) ([473a577](https://github.com/angular/angular/commit/473a577))
|
||||
* **http:** introduce named type for HttpParams options ([#19360](https://github.com/angular/angular/issues/19360)) ([8a0e458](https://github.com/angular/angular/commit/8a0e458))
|
||||
* **language-service:** do not report errors for `OpaqueToken` ([#19427](https://github.com/angular/angular/issues/19427)) ([c1b029a](https://github.com/angular/angular/commit/c1b029a))
|
||||
* **router:** fix activation events toString and docs ([#19147](https://github.com/angular/angular/issues/19147)) ([2c4107c](https://github.com/angular/angular/commit/2c4107c))
|
||||
* **router:** resolve and guards should be able to reject with null and undefined ([#19418](https://github.com/angular/angular/issues/19418)) ([a9d32a3](https://github.com/angular/angular/commit/a9d32a3)), closes [#17148](https://github.com/angular/angular/issues/17148)
|
||||
* **tsc-wrapped:** deduplicate metadata only when the module is the same ([#19249](https://github.com/angular/angular/issues/19249)) ([b6b18c1](https://github.com/angular/angular/commit/b6b18c1)), closes [#19219](https://github.com/angular/angular/issues/19219)
|
||||
* don’t use the global `ng` at all with closure enhanced optimizations ([a7798f2](https://github.com/angular/angular/commit/a7798f2))
|
||||
|
||||
### Features
|
||||
|
||||
* **animations:** support negative query limit values ([86ffacf](https://github.com/angular/angular/commit/86ffacf)), closes [#19259](https://github.com/angular/angular/issues/19259)
|
||||
* **compiler:** enabled strict checking of parameters to an `@Injectable` ([#19412](https://github.com/angular/angular/issues/19412)) ([dfb8d21](https://github.com/angular/angular/commit/dfb8d21))
|
||||
* **compiler:** reuse the TypeScript typecheck for template typechecking. ([#19152](https://github.com/angular/angular/issues/19152)) ([996c7c2](https://github.com/angular/angular/commit/996c7c2))
|
||||
* **core:** support for bootstrap with custom zone ([#17672](https://github.com/angular/angular/issues/17672)) ([344a5ca](https://github.com/angular/angular/commit/344a5ca))
|
||||
* **platform-server:** add an API to transfer state from server ([#19134](https://github.com/angular/angular/issues/19134)) ([cfd9ca0](https://github.com/angular/angular/commit/cfd9ca0))
|
||||
* **service-worker:** introduce the [@angular](https://github.com/angular)/service-worker package ([#19274](https://github.com/angular/angular/issues/19274)) ([d442b68](https://github.com/angular/angular/commit/d442b68))
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **compiler:** make the creation of `ts.Program` faster. ([#19275](https://github.com/angular/angular/issues/19275)) ([edd5f5a](https://github.com/angular/angular/commit/edd5f5a))
|
||||
* **compiler:** only use tsickle if needed ([#19275](https://github.com/angular/angular/issues/19275)) ([8f95b75](https://github.com/angular/angular/commit/8f95b75))
|
||||
* **compiler:** speed up watch mode ([#19275](https://github.com/angular/angular/issues/19275)) ([6665d76](https://github.com/angular/angular/commit/6665d76))
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **compiler:** The method `ngGetConentSelectors()`, deprecated in Angular 4.0, has been removed.
|
||||
Use `ComponentFactory.ngContentSelectors` instead.
|
||||
|
||||
<a name="4.4.4"></a>
|
||||
## [4.4.4](https://github.com/angular/angular/compare/4.4.3...4.4.4) (2017-09-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** support negative query limit value ([#19419](https://github.com/angular/angular/issues/19419)) ([bc81fbd](https://github.com/angular/angular/commit/bc81fbd)), closes [#19232](https://github.com/angular/angular/issues/19232)
|
||||
* **compiler:** correctly map error message locations ([#19424](https://github.com/angular/angular/issues/19424)) ([c3b39ba](https://github.com/angular/angular/commit/c3b39ba))
|
||||
* **compiler:** do not consider a reference with members as a reference ([#19466](https://github.com/angular/angular/issues/19466)) ([7fc2dce](https://github.com/angular/angular/commit/7fc2dce))
|
||||
* **compiler:** skip when trimming / removing whitespaces ([#19310](https://github.com/angular/angular/issues/19310)) ([c7aa8a1](https://github.com/angular/angular/commit/c7aa8a1)), closes [#19304](https://github.com/angular/angular/issues/19304)
|
||||
* **tsc-wrapped:** add metadata for `type` declarations ([#19040](https://github.com/angular/angular/issues/19040)) ([ae52851](https://github.com/angular/angular/commit/ae52851))
|
||||
|
||||
|
||||
<a name="4.4.3"></a>
|
||||
## [4.4.3](https://github.com/angular/angular/compare/4.4.2...4.4.3) (2017-09-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **tsc-wrapped:** deduplicate metadata only when the module is the same ([#19261](https://github.com/angular/angular/issues/19261)) ([0371538](https://github.com/angular/angular/commit/0371538)), closes [#19219](https://github.com/angular/angular/issues/19219)
|
||||
|
||||
|
||||
<a name="4.4.2"></a>
|
||||
## [4.4.2](https://github.com/angular/angular/compare/4.4.1...4.4.2) (2017-09-18)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **platform-server**: fix for packaging issues [#19250](https://github.com/angular/angular/issues/19250)
|
||||
|
||||
|
||||
<a name="4.4.1"></a>
|
||||
## [4.4.1](https://github.com/angular/angular/compare/4.3.6...4.4.1) (2017-09-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** do not leak DOM nodes/styling for host triggered animations ([#18853](https://github.com/angular/angular/issues/18853)) ([1cc3fe2](https://github.com/angular/angular/commit/1cc3fe2)), closes [#18606](https://github.com/angular/angular/issues/18606)
|
||||
* **common:** fix improper packaging for [@angular](https://github.com/angular)/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([a203a95](https://github.com/angular/angular/commit/a203a95))
|
||||
* **common:** fix XSSI prefix stripping by using JSON.parse always ([#18466](https://github.com/angular/angular/issues/18466)) ([8821723](https://github.com/angular/angular/commit/8821723)), closes [#18396](https://github.com/angular/angular/issues/18396) [#18453](https://github.com/angular/angular/issues/18453)
|
||||
* **compiler:** normalize the locale name ([#18963](https://github.com/angular/angular/issues/18963)) ([497e017](https://github.com/angular/angular/commit/497e017))
|
||||
* **core:** complete EventEmitter in QueryList on component destroy ([#18902](https://github.com/angular/angular/issues/18902)) ([7d137d7](https://github.com/angular/angular/commit/7d137d7)), closes [#18741](https://github.com/angular/angular/issues/18741)
|
||||
* **tsc-wrapped:** deduplicate metadata for re-exported modules ([48ae1a6](https://github.com/angular/angular/commit/48ae1a6))
|
||||
* **tsc-wrapped:** fix metadata symbol reference ([f6a7183](https://github.com/angular/angular/commit/f6a7183))
|
||||
* **upgrade:** remove code setting id attribute. ([#19182](https://github.com/angular/angular/issues/19182)) ([b20c5d2](https://github.com/angular/angular/commit/b20c5d2)), closes [#18446](https://github.com/angular/angular/issues/18446)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
|
||||
* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
|
||||
|
||||
|
||||
Note: the 4.4.0 release on npm accidentally glitched-out midway, so we cut 4.4.1 instead. oops :-)
|
||||
|
||||
|
||||
|
||||
<a name="5.0.0-beta.7"></a>
|
||||
## [5.0.0-beta.7](https://github.com/angular/angular/compare/5.0.0-beta.6...5.0.0-beta.7) (2017-09-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **compiler:** emit preamble in generated files. ([b1055a5](https://github.com/angular/angular/commit/b1055a5))
|
||||
* **compiler:** fix bazel integration and make `perform-compile` more flexible ([a69172f](https://github.com/angular/angular/commit/a69172f))
|
||||
* **compiler:** lower variables with a closure by exporting the variable. ([5ef6e63](https://github.com/angular/angular/commit/5ef6e63))
|
||||
* **platform-browser:** run BLACK_LISTED_EVENTS outside of ngZone ([#18993](https://github.com/angular/angular/issues/18993)) ([d52f426](https://github.com/angular/angular/commit/d52f426))
|
||||
* **platform-browser:** simple version of zone aware addEventListener ([#18993](https://github.com/angular/angular/issues/18993)) ([ed1175f](https://github.com/angular/angular/commit/ed1175f))
|
||||
* **platform-server:** support setting innerText property ([831613a](https://github.com/angular/angular/commit/831613a))
|
||||
* **router:** adjust ChildActivation events to only fire when the child is actually changing ([#19043](https://github.com/angular/angular/issues/19043)) ([66f0ab0](https://github.com/angular/angular/commit/66f0ab0)), closes [#18942](https://github.com/angular/angular/issues/18942)
|
||||
* **tsc-wrapped:** deduplicate metadata for re-exported modules ([c056b8c](https://github.com/angular/angular/commit/c056b8c))
|
||||
* **tsc-wrapped:** fix metadata symbol reference ([626555c](https://github.com/angular/angular/commit/626555c))
|
||||
* **upgrade:** add testability hook to downgraded component ([97cc6ca](https://github.com/angular/angular/commit/97cc6ca))
|
||||
* **upgrade:** remove code setting id attribute. ([b6833d1](https://github.com/angular/angular/commit/b6833d1)), closes [#18446](https://github.com/angular/angular/issues/18446)
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **router:** remove deprecated `RouterOutlet` properties ([a9ef858](https://github.com/angular/angular/commit/a9ef858))
|
||||
* update angular to support TypeScript 2.4 ([ca5aeba](https://github.com/angular/angular/commit/ca5aeba))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **compiler:** deprecate i18n comments in favor of `ng-container` ([#18998](https://github.com/angular/angular/issues/18998)) ([66a5dab](https://github.com/angular/angular/commit/66a5dab))
|
||||
* **platform-server:** provide a way to hook into renderModule* ([#19023](https://github.com/angular/angular/issues/19023)) ([8dfc3c3](https://github.com/angular/angular/commit/8dfc3c3))
|
||||
* **router:** add ActivationStart/End events ([8f79150](https://github.com/angular/angular/commit/8f79150))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* - the Angular compiler now requires TypeScript 2.4.x.
|
||||
* router: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4.
|
||||
|
||||
|
||||
|
||||
<a name="5.0.0-beta.6"></a>
|
||||
## [5.0.0-beta.6](https://github.com/angular/angular/compare/5.0.0-beta.5...5.0.0-beta.6) (2017-09-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** do not leak DOM nodes/styling for host triggered animations ([#18853](https://github.com/angular/angular/issues/18853)) ([fcadeb2](https://github.com/angular/angular/commit/fcadeb2)), closes [#18606](https://github.com/angular/angular/issues/18606)
|
||||
* **common:** fix a duplicate case in the locale switch ([#18941](https://github.com/angular/angular/issues/18941)) ([fdd5010](https://github.com/angular/angular/commit/fdd5010))
|
||||
* **common:** fix improper packaging for [@angular](https://github.com/angular)/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([65e26d7](https://github.com/angular/angular/commit/65e26d7))
|
||||
* **common:** fix XSSI prefix stripping by using JSON.parse always ([#18466](https://github.com/angular/angular/issues/18466)) ([452a7ae](https://github.com/angular/angular/commit/452a7ae)), closes [#18396](https://github.com/angular/angular/issues/18396) [#18453](https://github.com/angular/angular/issues/18453)
|
||||
* **common:** update closure-locale generation for tree shaking ([#18938](https://github.com/angular/angular/issues/18938)) ([946e5bd](https://github.com/angular/angular/commit/946e5bd))
|
||||
* **common:** use correct group separator for currency pipe ([#18932](https://github.com/angular/angular/issues/18932)) ([4ec5e28](https://github.com/angular/angular/commit/4ec5e28))
|
||||
* **common:** use v4 plurals when importing `DeprecatedI18NPipesModule` ([#18955](https://github.com/angular/angular/issues/18955)) ([30d53a8](https://github.com/angular/angular/commit/30d53a8))
|
||||
* **compiler:** always check summaries first before falling back to metadata from .d.ts files ([#18788](https://github.com/angular/angular/issues/18788)) ([f83b819](https://github.com/angular/angular/commit/f83b819))
|
||||
* **compiler:** always emit ngfactories with reexports ([#18788](https://github.com/angular/angular/issues/18788)) ([0262e37](https://github.com/angular/angular/commit/0262e37))
|
||||
* **compiler:** don’t emit stubs when we didn’t generate code for a file. ([#18788](https://github.com/angular/angular/issues/18788)) ([506d2e9](https://github.com/angular/angular/commit/506d2e9))
|
||||
* **compiler:** don’t reexport types in `.ngfactory` files ([#18788](https://github.com/angular/angular/issues/18788)) ([8c858d7](https://github.com/angular/angular/commit/8c858d7))
|
||||
* **compiler:** normalize the locale name ([#18963](https://github.com/angular/angular/issues/18963)) ([043f104](https://github.com/angular/angular/commit/043f104))
|
||||
* **compiler:** quote non identifiers in map keys. ([#18788](https://github.com/angular/angular/issues/18788)) ([2fbc92f](https://github.com/angular/angular/commit/2fbc92f))
|
||||
* **compiler:** treat absolute imports as package imports ([#18912](https://github.com/angular/angular/issues/18912)) ([fce7ae1](https://github.com/angular/angular/commit/fce7ae1))
|
||||
* **compiler:** use either summary or metadata information when reading .d.ts files ([#18912](https://github.com/angular/angular/issues/18912)) ([f1e526f](https://github.com/angular/angular/commit/f1e526f))
|
||||
* **compiler:** workaround bugs in TS when combining transformers ([#18912](https://github.com/angular/angular/issues/18912)) ([4059a72](https://github.com/angular/angular/commit/4059a72))
|
||||
* **compiler-cli:** fix memory leaks in watch mode ([#18961](https://github.com/angular/angular/issues/18961)) ([83e5deb](https://github.com/angular/angular/commit/83e5deb))
|
||||
* **compiler-cli:** use `--locale` parameter for transformers ([#18988](https://github.com/angular/angular/issues/18988)) ([22c4090](https://github.com/angular/angular/commit/22c4090))
|
||||
* **core:** complete EventEmitter in QueryList on component destroy ([#18902](https://github.com/angular/angular/issues/18902)) ([36d37cc](https://github.com/angular/angular/commit/36d37cc)), closes [#18741](https://github.com/angular/angular/issues/18741)
|
||||
* **tsc-wrapped:** decouple bundle index host from tsickle dependency ([#18999](https://github.com/angular/angular/issues/18999)) ([d1afadb](https://github.com/angular/angular/commit/d1afadb))
|
||||
* **upgrade:** deprecate the dynamic version of `ngUpgrade` ([450a13d](https://github.com/angular/angular/commit/450a13d))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **core:** remove deprecated `OpaqueToken` ([#18971](https://github.com/angular/angular/issues/18971)) ([3c4eef8](https://github.com/angular/angular/commit/3c4eef8))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **http**: deprecate @angular/http in favor of @angular/common/http ([#18906](https://github.com/angular/angular/issues/18906)) ([72c7b6e](https://github.com/angular/angular/commit/72c7b6e))
|
||||
* **common:** accept object map for HttpClient headers & params ([#18490](https://github.com/angular/angular/issues/18490)) ([1b1d5f1](https://github.com/angular/angular/commit/1b1d5f1))
|
||||
* **common:** generate `closure-locale.ts` to tree shake locale data ([#18907](https://github.com/angular/angular/issues/18907)) ([4878936](https://github.com/angular/angular/commit/4878936))
|
||||
* **compiler:** set `enableLegacyTemplate` to false by default ([#18756](https://github.com/angular/angular/issues/18756)) ([56238fe](https://github.com/angular/angular/commit/56238fe))
|
||||
* **compiler-cli:** add watch mode to `ngc` ([#18818](https://github.com/angular/angular/issues/18818)) ([cf7d47d](https://github.com/angular/angular/commit/cf7d47d))
|
||||
* **compiler-cli:** add watch mode to `ngc` ([#18818](https://github.com/angular/angular/issues/18818)) ([06d01b2](https://github.com/angular/angular/commit/06d01b2))
|
||||
* **compiler-cli:** lower metadata `useValue` and `data` literal fields ([#18905](https://github.com/angular/angular/issues/18905)) ([0e64261](https://github.com/angular/angular/commit/0e64261))
|
||||
* **compiler-cli:** lower metadata `useValue` and `data` literal fields ([#18905](https://github.com/angular/angular/issues/18905)) ([c685cc2](https://github.com/angular/angular/commit/c685cc2))
|
||||
* **platform-server:** provide a DOM implementation on the server ([2f2d5f3](https://github.com/angular/angular/commit/2f2d5f3)), closes [#14638](https://github.com/angular/angular/issues/14638)
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* core: `OpaqueToken` has been removed as it was deprecated since v4. Use `InjectionToken` instead.
|
||||
* compiler: the compiler option `enableLegacyTemplate` is now disabled by default as the `<template>` element has been deprecated since v4. Use `<ng-template>` instead. The option `enableLegacyTemplate` and the `<template>` element will both be removed in Angular v6.
|
||||
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
|
||||
* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
|
||||
|
||||
|
||||
<a name="5.0.0-beta.5"></a>
|
||||
## [5.0.0-beta.5](https://github.com/angular/angular/compare/5.0.0-beta.4...5.0.0-beta.5) (2017-08-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** ensure animations are disabled on the element containing the @.disabled flag ([#18714](https://github.com/angular/angular/issues/18714)) ([791c7ef](https://github.com/angular/angular/commit/791c7ef))
|
||||
* **animations:** make sure @.disabled respects disabled parent/sub animation sequences ([#18715](https://github.com/angular/angular/issues/18715)) ([e25f05a](https://github.com/angular/angular/commit/e25f05a))
|
||||
* **animations:** make sure animation cancellations respect AUTO style values ([#18787](https://github.com/angular/angular/issues/18787)) ([29aa8b3](https://github.com/angular/angular/commit/29aa8b3)), closes [#17450](https://github.com/angular/angular/issues/17450)
|
||||
* **animations:** resolve error when using AnimationBuilder with platform-server ([#18642](https://github.com/angular/angular/issues/18642)) ([845c68f](https://github.com/angular/angular/commit/845c68f)), closes [#18635](https://github.com/angular/angular/issues/18635)
|
||||
* **animations:** restore auto-style support for removed DOM nodes ([#18787](https://github.com/angular/angular/issues/18787)) ([7062811](https://github.com/angular/angular/commit/7062811))
|
||||
* **compiler-cli:** propagate preserveWhitespaces option to codegen ([#18773](https://github.com/angular/angular/issues/18773)) ([8ea6c56](https://github.com/angular/angular/commit/8ea6c56))
|
||||
* **compiler-cli:** use forward slashes for ts.resolveModuleName ([#18784](https://github.com/angular/angular/issues/18784)) ([e228f2c](https://github.com/angular/angular/commit/e228f2c))
|
||||
* **core:** correct order in ContentChildren query result ([#18326](https://github.com/angular/angular/issues/18326)) ([f53f724](https://github.com/angular/angular/commit/f53f724)), closes [#16568](https://github.com/angular/angular/issues/16568)
|
||||
* **core:** make sure onStable runs in the right zone ([#18706](https://github.com/angular/angular/issues/18706)) ([713d7c2](https://github.com/angular/angular/commit/713d7c2))
|
||||
* **tsc-wrapped:** add metadata for `type` declarations ([#18704](https://github.com/angular/angular/issues/18704)) ([6e3498c](https://github.com/angular/angular/commit/6e3498c)), closes [#18675](https://github.com/angular/angular/issues/18675)
|
||||
* **tsc-wrapped:** make `test.sh tools` run the tsc-wrapped tests again ([#18683](https://github.com/angular/angular/issues/18683)) ([2da45e6](https://github.com/angular/angular/commit/2da45e6))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **common:** remove deprecated `NgFor` ([#18758](https://github.com/angular/angular/issues/18758)) ([ec56760](https://github.com/angular/angular/commit/ec56760))
|
||||
* **common:** remove deprecated `NgTemplateOutlet#ngOutletContext` ([#18780](https://github.com/angular/angular/issues/18780)) ([7522987](https://github.com/angular/angular/commit/7522987))
|
||||
* **compiler:** remove option `useDebug` ([#18778](https://github.com/angular/angular/issues/18778)) ([499d05d](https://github.com/angular/angular/commit/499d05d))
|
||||
* **compiler:** split compiler and core ([#18683](https://github.com/angular/angular/issues/18683)) ([0cc77b4](https://github.com/angular/angular/commit/0cc77b4))
|
||||
* **core:** remove deprecated `ChangeDetectionRef` argument in `DifferFactory#create` ([#18757](https://github.com/angular/angular/issues/18757)) ([be9713c](https://github.com/angular/angular/commit/be9713c))
|
||||
* **core:** remove deprecated `DebugNode#source` ([#18779](https://github.com/angular/angular/issues/18779)) ([d61b902](https://github.com/angular/angular/commit/d61b902))
|
||||
* **core:** remove deprecated `Testability#findBindings` ([#18782](https://github.com/angular/angular/issues/18782)) ([f2a2a6b](https://github.com/angular/angular/commit/f2a2a6b))
|
||||
* **core:** remove deprecated `TrackByFn` ([#18757](https://github.com/angular/angular/issues/18757)) ([596e9f4](https://github.com/angular/angular/commit/596e9f4))
|
||||
* **core:** remove deprecated parameter for `ErrorHandler` ([#18759](https://github.com/angular/angular/issues/18759)) ([8f41326](https://github.com/angular/angular/commit/8f41326))
|
||||
* **platform-browser:** remove deprecated `NgProbeToken` ([#18760](https://github.com/angular/angular/issues/18760)) ([d7f42bf](https://github.com/angular/angular/commit/d7f42bf))
|
||||
* **platform-webworker:** remove deprecated `PRIMITIVE` ([#18761](https://github.com/angular/angular/issues/18761)) ([a56468c](https://github.com/angular/angular/commit/a56468c))
|
||||
* **router:** remove deprecated `initialNavigation` options ([#18781](https://github.com/angular/angular/issues/18781)) ([d76761b](https://github.com/angular/angular/commit/d76761b))
|
||||
* **router:** remove deprecated `RouterOutlet` properties ([#18781](https://github.com/angular/angular/issues/18781)) ([d1c4a94](https://github.com/angular/angular/commit/d1c4a94))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **animations:** allow @.disabled property to work without an expression ([#18713](https://github.com/angular/angular/issues/18713)) ([2159342](https://github.com/angular/angular/commit/2159342))
|
||||
* **animations:** report errors when invalid CSS properties are detected ([#18718](https://github.com/angular/angular/issues/18718)) ([409688f](https://github.com/angular/angular/commit/409688f)), closes [#18701](https://github.com/angular/angular/issues/18701)
|
||||
* **common:** add an empty DeprecatedI18NPipesModule module ([#18737](https://github.com/angular/angular/issues/18737)) ([83713dd](https://github.com/angular/angular/commit/83713dd))
|
||||
* **common:** drop use of the Intl API to improve browser support ([#18284](https://github.com/angular/angular/issues/18284)) ([079d884](https://github.com/angular/angular/commit/079d884)), closes [#10809](https://github.com/angular/angular/issues/10809) [#9524](https://github.com/angular/angular/issues/9524) [#7008](https://github.com/angular/angular/issues/7008) [#9324](https://github.com/angular/angular/issues/9324) [#7590](https://github.com/angular/angular/issues/7590) [#6724](https://github.com/angular/angular/issues/6724) [#3429](https://github.com/angular/angular/issues/3429) [#17576](https://github.com/angular/angular/issues/17576) [#17478](https://github.com/angular/angular/issues/17478) [#17319](https://github.com/angular/angular/issues/17319) [#17200](https://github.com/angular/angular/issues/17200) [#16838](https://github.com/angular/angular/issues/16838) [#16624](https://github.com/angular/angular/issues/16624) [#16625](https://github.com/angular/angular/issues/16625) [#16591](https://github.com/angular/angular/issues/16591) [#14131](https://github.com/angular/angular/issues/14131) [#12632](https://github.com/angular/angular/issues/12632) [#11376](https://github.com/angular/angular/issues/11376) [#11187](https://github.com/angular/angular/issues/11187)
|
||||
* **compiler:** allow multiple exportAs names ([3a50098](https://github.com/angular/angular/commit/3a50098))
|
||||
* **compiler:** make `.ngsummary.json` files portable ([2572bf5](https://github.com/angular/angular/commit/2572bf5))
|
||||
* **compiler:** use typescript for resolving resource paths ([43226cb](https://github.com/angular/angular/commit/43226cb))
|
||||
* **forms:** add updateOn and ngFormOptions to NgForm ([0d45828](https://github.com/angular/angular/commit/0d45828))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
#### Deprecated code
|
||||
* router: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4.
|
||||
* common: `NgFor` has been removed as it was deprecated since v4. Use `NgForOf` instead. This does not impact the use of`*ngFor` in your templates.
|
||||
* common: `NgTemplateOutlet#ngOutletContext` has been removed as it was deprecated since v4. Use `NgTemplateOutlet#ngTemplateOutletContext` instead.
|
||||
* core: `Testability#findBindings` has been removed as it was deprecated since v4. Use `Testability#findProviders` instead.
|
||||
* core: `DebugNode#source` has been removed as it was deprecated since v4.
|
||||
* router: the values `true`, `false`, `legacy_enabled` and `legacy_disabled` for the router parameter `initialNavigation` have been removed as they were deprecated. Use `enabled` or `disabled` instead.
|
||||
* core: `DifferFactory.create` no longer takes ChangeDetectionRef as a first argument as it was not used and deprecated since v4.
|
||||
* core: `TrackByFn` has been removed because it was deprecated since v4. Use `TrackByFunction` instead.
|
||||
* platform-webworker: `PRIMITIVE` has been removed as it was deprecated since v4. Use `SerializerTypes.PRIMITIVE` instead.
|
||||
* platform-browser: `NgProbeToken` has been removed from `@angular/platform-browser` as it was deprecated since v4. Import it from `@angular/core` instead.
|
||||
* core: `ErrorHandler` no longer takes a parameter as it was not used and deprecated since v4.
|
||||
* compiler: the option `useDebug` for the compiler has been removed as it had no effect and was deprecated since v4.
|
||||
|
||||
#### Other breaking changes
|
||||
* compiler: - `@angular/platform-server` now additionally depends on
|
||||
`@angular/platform-browser-dynamic` as a peer dependency.
|
||||
* common: Because of multiple bugs and browser inconsistencies, we have dropped the intl api in favor of data exported from the Unicode Common Locale Data Repository (CLDR).
|
||||
Unfortunately we had to change the i18n pipes (date, number, currency, percent) and there are some breaking changes.
|
||||
##### I18n pipes:
|
||||
- Breaking change:
|
||||
- By default Angular now only contains locale data for the language `en-US`, if you set the value of `LOCALE_ID` to another locale, you will have to import new locale data for this language because we don't use the intl API anymore.
|
||||
- Features:
|
||||
- you don't need to use the intl polyfill for Angular anymore.
|
||||
- all i18n pipes now have an additional last parameter `locale` which allows you to use a specific locale instead of the one defined in the token `LOCALE_ID` (whose default value is `en-US`).
|
||||
- the new locale data extracted from CLDR are now available to developers as well and can be used through an API (which should be especially useful for library authors).
|
||||
- you can still use the old pipes for now, but their names have been changed and they are no longer included in the `CommonModule`. To use them, you will have to import the `DeprecatedI18NPipesModule` after the `CommonModule` (the order is important):
|
||||
|
||||
```ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
// import deprecated module after
|
||||
DeprecatedI18NPipesModule
|
||||
]
|
||||
})
|
||||
export class AppModule { }
|
||||
```
|
||||
|
||||
Don't forget that you will still need to import the intl API polyfill if you want to use those deprecated pipes.
|
||||
|
||||
##### Date pipe
|
||||
- Breaking changes:
|
||||
- the predefined formats (`short`, `shortTime`, `shortDate`, `medium`, ...) now use the patterns given by CLDR (like it was in AngularJS) instead of the ones from the intl API. You might notice some changes, e.g. `shortDate` will be `8/15/17` instead of `8/15/2017` for `en-US`.
|
||||
- the narrow version of eras is now `GGGGG` instead of `G`, the format `G` is now similar to `GG` and `GGG`.
|
||||
- the narrow version of months is now `MMMMM` instead of `L`, the format `L` is now the short standalone version of months.
|
||||
- the narrow version of the week day is now `EEEEE` instead of `E`, the format `E` is now similar to `EE` and `EEE`.
|
||||
- the timezone `z` will now fallback to `O` and output `GMT+1` instead of the complete zone name (e.g. `Pacific Standard Time`), this is because the quantity of data required to have all the zone names in all of the existing locales is too big.
|
||||
- the timezone `Z` will now output the ISO8601 basic format, e.g. `+0100`, you should now use `ZZZZ` to get `GMT+01:00`.
|
||||
|
||||
| Field type | Format | Example value | v4 | v5 |
|
||||
|------------|---------------|-----------------------|----|---------------|
|
||||
| Eras | Narrow | A for AD | G | GGGGG |
|
||||
| Months | Narrow | S for September | L | MMMMM |
|
||||
| Week day | Narrow | M for Monday | E | EEEEE |
|
||||
| Timezone | Long location | Pacific Standard Time | z | Not available |
|
||||
| Timezone | Long GMT | GMT+01:00 | Z | ZZZZ |
|
||||
|
||||
- Features
|
||||
- new predefined formats `long`, `full`, `longTime`, `fullTime`.
|
||||
- the format `yyy` is now supported, e.g. the year `52` will be `052` and the year `2017` will be `2017`.
|
||||
- standalone months are now supported with the formats `L` to `LLLLL`.
|
||||
- week of the year is now supported with the formats `w` and `ww`, e.g. weeks `5` and `05`.
|
||||
- week of the month is now supported with the format `W`, e.g. week `3`.
|
||||
- fractional seconds are now supported with the format `S` to `SSS`.
|
||||
- day periods for AM/PM now supports additional formats `aa`, `aaa`, `aaaa` and `aaaaa`. The formats `a` to `aaa` are similar, while `aaaa` is the wide version if available (e.g. `ante meridiem` for `am`), or equivalent to `a` otherwise, and `aaaaa` is the narrow version (e.g. `a` for `am`).
|
||||
- extra day periods are now supported with the formats `b` to `bbbbb` (and `B` to `BBBBB` for the standalone equivalents), e.g. `morning`, `noon`, `afternoon`, ....
|
||||
- the short non-localized timezones are now available with the format `O` to `OOOO`. The formats `O` to `OOO` will output `GMT+1` while the format `OOOO` will be `GMT+01:00`.
|
||||
- the ISO8601 basic time zones are now available with the formats `Z` to `ZZZZZ`. The formats `Z` to `ZZZ` will output `+0100`, while the format `ZZZZ` will be `GMT+01:00` and `ZZZZZ` will be `+01:00`.
|
||||
|
||||
- Bug fixes
|
||||
- the date pipe will now work exactly the same across all browsers, which will fix a lot of bugs for safari and IE.
|
||||
- eras can now be used on their own without the date, e.g. the format `GG` will be `AD` instead of `8 15, 2017 AD`.
|
||||
|
||||
##### Currency pipe
|
||||
- Breaking change:
|
||||
- the default value for `symbolDisplay` is now `symbol` instead of `code`. This means that by default you will see `$4.99` for `en-US` instead of `USD4.99` previously.
|
||||
|
||||
* Deprecation:
|
||||
- the second parameter of the currency pipe (`symbolDisplay`) is no longer a boolean, it now takes the values `code`, `symbol` or `symbol-narrow`. A boolean value is still valid for now, but it is deprecated and it will print a warning message in the console.
|
||||
|
||||
- Features:
|
||||
- you can now choose between `code`, `symbol` or `symbol-narrow` which gives you access to more options for some currencies (e.g. the canadian dollar with the code `CAD` has the symbol `CA$` and the symbol-narrow `$`).
|
||||
|
||||
##### Percent pipe
|
||||
- Breaking change
|
||||
- if you don't specify the number of digits to round to, the local format will be used (and it usually rounds numbers to 0 digits, instead of not rounding previously), e.g. `{{ 3.141592 | percent }}` will output `314%` for the locale `en-US` instead of `314.1592%` previously.
|
||||
|
||||
|
||||
<a name="4.3.6"></a>
|
||||
## [4.3.6](https://github.com/angular/angular/compare/4.3.5...4.3.6) (2017-08-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** ensure animations are disabled on the element containing the @.disabled flag ([#18714](https://github.com/angular/angular/issues/18714)) ([5d68c83](https://github.com/angular/angular/commit/5d68c83))
|
||||
* **animations:** make sure @.disabled respects disabled parent/sub animation sequences ([#18715](https://github.com/angular/angular/issues/18715)) ([c3dcbf9](https://github.com/angular/angular/commit/c3dcbf9))
|
||||
* **animations:** make sure animation cancellations respect AUTO style values ([#18787](https://github.com/angular/angular/issues/18787)) ([9a754f9](https://github.com/angular/angular/commit/9a754f9)), closes [#17450](https://github.com/angular/angular/issues/17450)
|
||||
* **animations:** resolve error when using AnimationBuilder with platform-server ([#18642](https://github.com/angular/angular/issues/18642)) ([f9b2905](https://github.com/angular/angular/commit/f9b2905)), closes [#18635](https://github.com/angular/angular/issues/18635)
|
||||
* **animations:** restore auto-style support for removed DOM nodes ([#18787](https://github.com/angular/angular/issues/18787)) ([e1f45a3](https://github.com/angular/angular/commit/e1f45a3))
|
||||
* **core:** correct order in ContentChildren query result ([#18326](https://github.com/angular/angular/issues/18326)) ([fec3b1a](https://github.com/angular/angular/commit/fec3b1a)), closes [#16568](https://github.com/angular/angular/issues/16568)
|
||||
* **core:** make sure onStable runs in the right zone ([#18706](https://github.com/angular/angular/issues/18706)) ([ee5591d](https://github.com/angular/angular/commit/ee5591d))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **animations:** allow @.disabled property to work without an expression ([#18713](https://github.com/angular/angular/issues/18713)) ([ac58914](https://github.com/angular/angular/commit/ac58914))
|
||||
* **common:** add an empty DeprecatedI18NPipesModule module ([793f31b](https://github.com/angular/angular/commit/793f31b))
|
||||
|
||||
|
||||
|
||||
<a name="5.0.0-beta.4"></a>
|
||||
## [5.0.0-beta.4](https://github.com/angular/angular/compare/5.0.0-beta.3...5.0.0-beta.4) (2017-08-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **aio:** fix compilation error by using the correct type for `providers` ([4d523fd](https://github.com/angular/angular/commit/4d523fd))
|
||||
* **aio:** skip PWA test when redeploying non-public commit ([06faac8](https://github.com/angular/angular/commit/06faac8))
|
||||
* **compiler:** Don't strip CSS source maps ([64b4be9](https://github.com/angular/angular/commit/64b4be9))
|
||||
* **forms:** re-assigning options should not clear select ([32ff21c](https://github.com/angular/angular/commit/32ff21c)), closes [#18330](https://github.com/angular/angular/issues/18330)
|
||||
* **language-service:** remove tsickle dependency ([bc22ff1](https://github.com/angular/angular/commit/bc22ff1))
|
||||
|
|
@ -20,7 +399,6 @@
|
|||
|
||||
### Performance Improvements
|
||||
|
||||
* **aio:** update to new version of build-optimizer ([088532b](https://github.com/angular/angular/commit/088532b))
|
||||
* **core:** add option to remove blank text nodes from compiled templates ([d2c0d98](https://github.com/angular/angular/commit/d2c0d98))
|
||||
* **core:** Remove decorator DSL which depends on Reflect ([cac130e](https://github.com/angular/angular/commit/cac130e))
|
||||
|
||||
|
|
@ -32,17 +410,10 @@
|
|||
|
||||
### Bug Fixes
|
||||
|
||||
* **aio:** skip PWA test when redeploying non-public commit ([b9c1c91](https://github.com/angular/angular/commit/b9c1c91))
|
||||
* **core:** forbid destroyed views to be inserted or moved in VC ([972538b](https://github.com/angular/angular/commit/972538b)), closes [#18615](https://github.com/angular/angular/issues/18615)
|
||||
* **forms:** re-assigning options should not clear select ([a1624f2](https://github.com/angular/angular/commit/a1624f2)), closes [#18330](https://github.com/angular/angular/issues/18330)
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **aio:** update to new version of build-optimizer ([d7be4f1](https://github.com/angular/angular/commit/d7be4f1))
|
||||
|
||||
|
||||
|
||||
<a name="4.3.4"></a>
|
||||
## [4.3.4](https://github.com/angular/angular/compare/4.3.3...4.3.4) (2017-08-10)
|
||||
|
||||
|
|
@ -56,7 +427,7 @@
|
|||
|
||||
|
||||
<a name="5.0.0-beta.3"></a>
|
||||
# [5.0.0-beta.3](https://github.com/angular/angular/compare/5.0.0-beta.2...5.0.0-beta.3) (2017-08-09)
|
||||
## [5.0.0-beta.3](https://github.com/angular/angular/compare/5.0.0-beta.2...5.0.0-beta.3) (2017-08-09)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -123,7 +494,7 @@ DEPRECATION:
|
|||
`Injector.create` as a replacement.
|
||||
|
||||
<a name="5.0.0-beta.2"></a>
|
||||
# [5.0.0-beta.2](https://github.com/angular/angular/compare/5.0.0-beta.1...5.0.0-beta.2) (2017-08-02)
|
||||
## [5.0.0-beta.2](https://github.com/angular/angular/compare/5.0.0-beta.1...5.0.0-beta.2) (2017-08-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -147,7 +518,7 @@ DEPRECATION:
|
|||
|
||||
|
||||
<a name="5.0.0-beta.1"></a>
|
||||
# [5.0.0-beta.1](https://github.com/angular/angular/compare/5.0.0-beta.0...5.0.0-beta.1) (2017-07-27)
|
||||
## [5.0.0-beta.1](https://github.com/angular/angular/compare/5.0.0-beta.0...5.0.0-beta.1) (2017-07-27)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -193,7 +564,7 @@ DEPRECATION:
|
|||
|
||||
|
||||
<a name="5.0.0-beta.0"></a>
|
||||
# [5.0.0-beta.0](https://github.com/angular/angular/compare/4.3.0...5.0.0-beta.0) (2017-07-19)
|
||||
## [5.0.0-beta.0](https://github.com/angular/angular/compare/4.3.0...5.0.0-beta.0) (2017-07-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
|
@ -1292,7 +1663,6 @@ templates is unaffected. We expect no or little impact on apps from this change,
|
|||
|
||||
### Features
|
||||
|
||||
* **aio:** add initial angular-cli scaffold ([#14118](https://github.com/angular/angular/issues/14118)) ([e130bc1](https://github.com/angular/angular/commit/e130bc1))
|
||||
* **common:** rename underlying `NgFor` class and add a type parameter ([#14104](https://github.com/angular/angular/issues/14104)) ([86b2b25](https://github.com/angular/angular/commit/86b2b25))
|
||||
* **compiler:** allow missing translations ([#14113](https://github.com/angular/angular/issues/14113)) ([8775ab9](https://github.com/angular/angular/commit/8775ab9)), closes [#13861](https://github.com/angular/angular/issues/13861)
|
||||
* **compiler:** do not parse xtb messages not needed by angular ([#14111](https://github.com/angular/angular/issues/14111)) ([f7fba74](https://github.com/angular/angular/commit/f7fba74)), closes [#14046](https://github.com/angular/angular/issues/14046)
|
||||
|
|
|
|||
|
|
@ -221,7 +221,6 @@ The following is the list of supported scopes:
|
|||
* **platform-webworker-dynamic**
|
||||
* **router**
|
||||
* **upgrade**
|
||||
* **tsc-wrapped**
|
||||
|
||||
There are currently a few exceptions to the "use package name" rule:
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
[](https://travis-ci.org/angular/angular)
|
||||
[](https://circleci.com/gh/angular/angular/tree/master)
|
||||
[](https://www.browserstack.com/automate/public-build/LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06)
|
||||
[](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||||
[](http://issuestats.com/github/angular/angular)
|
||||
[](http://issuestats.com/github/angular/angular)
|
||||
|
|
@ -8,7 +9,7 @@
|
|||
|
||||
[](https://saucelabs.com/u/angular2-ci)
|
||||
|
||||
*Safari (7+), iOS (7+), Edge (14) and IE mobile (11) are tested on [BrowserStack][browserstack].*
|
||||
*Safari (7+), iOS (7+) and IE mobile (11) are tested on [BrowserStack][browserstack].*
|
||||
|
||||
# Angular
|
||||
|
||||
|
|
@ -23,7 +24,7 @@ Angular is a development platform for building mobile and desktop web applicatio
|
|||
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our
|
||||
guidelines for [contributing][contributing] and then check out one of our issues in the [hotlist: community-help](https://github.com/angular/angular/labels/hotlist%3A%20community-help).
|
||||
|
||||
[browserstack]: https://www.browserstack.com/
|
||||
[browserstack]: https://www.browserstack.com/automate/public-build/LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06
|
||||
[contributing]: http://github.com/angular/angular/blob/master/CONTRIBUTING.md
|
||||
[quickstart]: https://angular.io/docs/ts/latest/quickstart.html
|
||||
[ng]: http://angular.io
|
||||
|
|
|
|||
24
WORKSPACE
24
WORKSPACE
|
|
@ -1,17 +1,23 @@
|
|||
workspace(name = "angular_src")
|
||||
|
||||
load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
|
||||
|
||||
git_repository(
|
||||
name = "build_bazel_rules_typescript",
|
||||
remote = "https://github.com/bazelbuild/rules_typescript.git",
|
||||
tag = "0.0.5",
|
||||
name = "build_bazel_rules_nodejs",
|
||||
remote = "https://github.com/bazelbuild/rules_nodejs.git",
|
||||
tag = "0.1.6",
|
||||
)
|
||||
|
||||
load("@build_bazel_rules_typescript//:defs.bzl", "node_repositories")
|
||||
load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
|
||||
|
||||
node_repositories(package_json = "//:package.json")
|
||||
node_repositories(package_json = ["//:package.json"])
|
||||
|
||||
git_repository(
|
||||
name = "build_bazel_rules_angular",
|
||||
remote = "https://github.com/bazelbuild/rules_angular.git",
|
||||
tag = "0.0.1",
|
||||
local_repository(
|
||||
name = "build_bazel_rules_typescript",
|
||||
path = "node_modules/@bazel/typescript",
|
||||
)
|
||||
|
||||
local_repository(
|
||||
name = "angular",
|
||||
path = "packages/bazel",
|
||||
)
|
||||
|
|
@ -13,7 +13,11 @@ You should run all these tasks from the `angular/aio` folder.
|
|||
Here are the most important tasks you might need to use:
|
||||
|
||||
* `yarn` - install all the dependencies.
|
||||
* `yarn setup` - Install all the dependencies, boilerplate, plunkers, zips and runs dgeni on the docs.
|
||||
* `yarn setup` - install all the dependencies, boilerplate, plunkers, zips and run dgeni on the docs.
|
||||
* `yarn setup-local` - same as `setup`, but use the locally built Angular packages for aio and docs examples boilerplate.
|
||||
|
||||
* `yarn build` - create a production build of the application (after installing dependencies, boilerplate, etc).
|
||||
* `yarn build-local` - same as `build`, but use `setup-local` instead of `setup`.
|
||||
|
||||
* `yarn start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.
|
||||
* `yarn serve-and-sync` - run both the `docs-watch` and `start` in the same console.
|
||||
|
|
@ -26,32 +30,33 @@ Here are the most important tasks you might need to use:
|
|||
* `yarn docs-lint` - check that the doc gen code follows our style rules.
|
||||
* `yarn docs-test` - run the unit tests for the doc generation code.
|
||||
|
||||
* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
|
||||
* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally. Add the option `--local` to use your local version of Angular contained in the "dist" folder.
|
||||
* `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
|
||||
* `yarn generate-plunkers` - generate the plunker files that are used by the `live-example` tags in the docs.
|
||||
* `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
|
||||
|
||||
* `yarn example-e2e` - run all e2e tests for examples
|
||||
- `yarn example-e2e -- --setup` - force webdriver update & other setup, then run tests
|
||||
- `yarn example-e2e -- --filter=foo` - limit e2e tests to those containing the word "foo"
|
||||
- `yarn example-e2e --setup` - force webdriver update & other setup, then run tests
|
||||
- `yarn example-e2e --filter=foo` - limit e2e tests to those containing the word "foo"
|
||||
- `yarn example-e2e --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
|
||||
|
||||
* `yarn build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
|
||||
|
||||
## Using ServiceWorker locally
|
||||
|
||||
Since abb36e3cb, running `yarn start -- --prod` will no longer set up the ServiceWorker, which
|
||||
Since abb36e3cb, running `yarn start --prod` will no longer set up the ServiceWorker, which
|
||||
would require manually running `yarn sw-manifest` and `yarn sw-copy` (something that is not possible
|
||||
with webpack serving the files from memory).
|
||||
|
||||
If you want to test ServiceWorker locally, you can use `yarn build` and serve the files in `dist/`
|
||||
with `yarn http-server -- dist -p 4200`.
|
||||
with `yarn http-server dist -p 4200`.
|
||||
|
||||
For more details see #16745.
|
||||
|
||||
|
||||
## Guide to authoring
|
||||
|
||||
There are two types of content in the documentatation:
|
||||
There are two types of content in the documentation:
|
||||
|
||||
* **API docs**: descriptions of the modules, classes, interfaces, decorators, etc that make up the Angular platform.
|
||||
API docs are generated directly from the source code.
|
||||
|
|
@ -106,8 +111,16 @@ yarn start
|
|||
yarn docs-watch
|
||||
```
|
||||
|
||||
>Alternatively, try the consolidated `serve-and-sync` command that builds, watches and serves in the same terminal window
|
||||
```bash
|
||||
yarn serve-and-sync
|
||||
```
|
||||
|
||||
* Open a browser at https://localhost:4200/ and navigate to the document on which you want to work.
|
||||
You can automatically open the browser by using `yarn start -- -o` in the first terminal.
|
||||
You can automatically open the browser by using `yarn start -o` in the first terminal.
|
||||
|
||||
* Make changes to the page's associated doc or example files. Every time a file is saved, the doc will
|
||||
be regenerated, the app will rebuild and the page will reload.
|
||||
|
||||
* If you get a build error complaining about examples or any other odd behavior, be sure to consult
|
||||
the [Authors Style Guide](https://angular.io/guide/docs-style-guide).
|
||||
|
|
|
|||
|
|
@ -13,10 +13,8 @@ const AIO_REPO_SLUG = getEnvVar('AIO_REPO_SLUG');
|
|||
const AIO_TRUSTED_PR_LABEL = getEnvVar('AIO_TRUSTED_PR_LABEL');
|
||||
const AIO_UPLOAD_HOSTNAME = getEnvVar('AIO_UPLOAD_HOSTNAME');
|
||||
const AIO_UPLOAD_PORT = +getEnvVar('AIO_UPLOAD_PORT');
|
||||
const AIO_WWW_USER = getEnvVar('AIO_WWW_USER');
|
||||
|
||||
// Run
|
||||
process.setuid(AIO_WWW_USER); // TODO(gkalpak): Find more suitable way to run as `www-data`.
|
||||
_main();
|
||||
|
||||
// Functions
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const TEST_AIO_UPLOAD_PORT = +getEnvVar('TEST_AIO_UPLOAD_PORT');
|
|||
const WWW_USER = getEnvVar('AIO_WWW_USER');
|
||||
|
||||
// Interfaces - Types
|
||||
export interface CmdResult { success: boolean; err: Error; stdout: string; stderr: string; }
|
||||
export interface CmdResult { success: boolean; err: Error | null; stdout: string; stderr: string; }
|
||||
export interface FileSpecs { content?: string; size?: number; }
|
||||
|
||||
export type CleanUpFn = () => void;
|
||||
|
|
@ -143,7 +143,7 @@ class Helper {
|
|||
statusText = status[1];
|
||||
} else {
|
||||
statusCode = status;
|
||||
statusText = http.STATUS_CODES[statusCode];
|
||||
statusText = http.STATUS_CODES[statusCode] || 'UNKNOWN_STATUS_CODE';
|
||||
}
|
||||
|
||||
return (result: CmdResult) => {
|
||||
|
|
@ -196,7 +196,7 @@ class Helper {
|
|||
}
|
||||
|
||||
// Methods - Protected
|
||||
protected createCleanUpFn(fn: Function): CleanUpFn {
|
||||
protected createCleanUpFn(fn: () => void): CleanUpFn {
|
||||
const cleanUpFn = () => {
|
||||
const idx = this.cleanUpFns.indexOf(cleanUpFn);
|
||||
if (idx !== -1) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
"scripts": {
|
||||
"prebuild": "yarn clean-dist",
|
||||
"build": "tsc",
|
||||
"build-watch": "yarn tsc -- --watch",
|
||||
"build-watch": "yarn tsc --watch",
|
||||
"clean-dist": "node --eval \"require('shelljs').rm('-rf', 'dist')\"",
|
||||
"dev": "concurrently --kill-others --raw --success first \"yarn build-watch\" \"yarn test-watch\"",
|
||||
"lint": "tslint --project tsconfig.json",
|
||||
|
|
@ -20,26 +20,26 @@
|
|||
"test-watch": "nodemon --exec \"yarn ~~test-only\" --watch dist"
|
||||
},
|
||||
"dependencies": {
|
||||
"body-parser": "^1.17.2",
|
||||
"express": "^4.14.1",
|
||||
"jasmine": "^2.5.3",
|
||||
"jsonwebtoken": "^7.3.0",
|
||||
"shelljs": "^0.7.6"
|
||||
"body-parser": "^1.18.2",
|
||||
"express": "^4.15.4",
|
||||
"jasmine": "^2.8.0",
|
||||
"jsonwebtoken": "^8.0.1",
|
||||
"shelljs": "^0.7.8",
|
||||
"tslib": "^1.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/body-parser": "^1.16.4",
|
||||
"@types/express": "^4.0.35",
|
||||
"@types/jasmine": "^2.5.43",
|
||||
"@types/jsonwebtoken": "^7.2.0",
|
||||
"@types/node": "^7.0.5",
|
||||
"@types/shelljs": "^0.7.0",
|
||||
"@types/supertest": "^2.0.0",
|
||||
"concurrently": "^3.3.0",
|
||||
"eslint": "^3.15.0",
|
||||
"eslint-plugin-jasmine": "^2.2.0",
|
||||
"nodemon": "^1.11.0",
|
||||
"@types/body-parser": "^1.16.5",
|
||||
"@types/express": "^4.0.37",
|
||||
"@types/jasmine": "^2.6.0",
|
||||
"@types/jsonwebtoken": "^7.2.3",
|
||||
"@types/node": "^8.0.30",
|
||||
"@types/shelljs": "^0.7.4",
|
||||
"@types/supertest": "^2.0.3",
|
||||
"concurrently": "^3.5.0",
|
||||
"nodemon": "^1.12.1",
|
||||
"supertest": "^3.0.0",
|
||||
"tslint": "^4.4.2",
|
||||
"typescript": "^2.1.6"
|
||||
"tslint": "^5.7.0",
|
||||
"tslint-jasmine-noSkipOrFocus": "^1.0.8",
|
||||
"typescript": "^2.5.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@ describe('BuildCleaner', () => {
|
|||
let cleanerGetExistingBuildNumbersSpy: jasmine.Spy;
|
||||
let cleanerGetOpenPrNumbersSpy: jasmine.Spy;
|
||||
let cleanerRemoveUnnecessaryBuildsSpy: jasmine.Spy;
|
||||
let existingBuildsDeferred: {resolve: Function, reject: Function};
|
||||
let openPrsDeferred: {resolve: Function, reject: Function};
|
||||
let existingBuildsDeferred: {resolve: (v?: any) => void, reject: (e?: any) => void};
|
||||
let openPrsDeferred: {resolve: (v?: any) => void, reject: (e?: any) => void};
|
||||
let promise: Promise<void>;
|
||||
|
||||
beforeEach(() => {
|
||||
|
|
@ -195,7 +195,7 @@ describe('BuildCleaner', () => {
|
|||
|
||||
|
||||
describe('getOpenPrNumbers()', () => {
|
||||
let prDeferred: {resolve: Function, reject: Function};
|
||||
let prDeferred: {resolve: (v: any) => void, reject: (v: any) => void};
|
||||
let promise: Promise<number[]>;
|
||||
|
||||
beforeEach(() => {
|
||||
|
|
@ -277,7 +277,10 @@ describe('BuildCleaner', () => {
|
|||
|
||||
it('should catch errors and log them', () => {
|
||||
const consoleErrorSpy = spyOn(console, 'error');
|
||||
shellRmSpy.and.callFake(() => { throw 'Test'; });
|
||||
shellRmSpy.and.callFake(() => {
|
||||
// tslint:disable-next-line: no-string-throw
|
||||
throw 'Test';
|
||||
});
|
||||
|
||||
(cleaner as any).removeDir('/foo/bar');
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ describe('GithubApi', () => {
|
|||
|
||||
|
||||
it('should not pass data to \'request()\'', () => {
|
||||
(api.get as Function)('foo', {}, {});
|
||||
(api.get as any)('foo', {}, {});
|
||||
|
||||
expect(apiRequestSpy).toHaveBeenCalled();
|
||||
expect(apiRequestSpy.calls.argsFor(0)[2]).toBeUndefined();
|
||||
|
|
@ -144,7 +144,7 @@ describe('GithubApi', () => {
|
|||
|
||||
|
||||
describe('getPaginated()', () => {
|
||||
let deferreds: {resolve: Function, reject: Function}[];
|
||||
let deferreds: {resolve: (v: any) => void, reject: (v: any) => void}[];
|
||||
|
||||
beforeEach(() => {
|
||||
deferreds = [];
|
||||
|
|
@ -292,7 +292,7 @@ describe('GithubApi', () => {
|
|||
|
||||
|
||||
describe('onResponse', () => {
|
||||
let promise: Promise<Object>;
|
||||
let promise: Promise<object>;
|
||||
let respond: (statusCode: number) => IncomingMessage;
|
||||
|
||||
beforeEach(() => {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ describe('GithubPullRequests', () => {
|
|||
|
||||
describe('addComment()', () => {
|
||||
let prs: GithubPullRequests;
|
||||
let deferred: {resolve: Function, reject: Function};
|
||||
let deferred: {resolve: (v: any) => void, reject: (v: any) => void};
|
||||
|
||||
beforeEach(() => {
|
||||
prs = new GithubPullRequests('12345', 'foo/bar');
|
||||
|
|
|
|||
|
|
@ -223,6 +223,7 @@ describe('BuildCreator', () => {
|
|||
|
||||
|
||||
it('should reject with an UploadError', done => {
|
||||
// tslint:disable-next-line: no-string-throw
|
||||
shellMkdirSpy.and.callFake(() => { throw 'Test'; });
|
||||
bc.create(pr, sha, archive, isPublic).catch(err => {
|
||||
expectToBeUploadError(err, 500, `Error while uploading to directory: ${shaDir}\nTest`);
|
||||
|
|
@ -407,6 +408,7 @@ describe('BuildCreator', () => {
|
|||
|
||||
|
||||
it('should reject with an UploadError', done => {
|
||||
// tslint:disable-next-line: no-string-throw
|
||||
shellMvSpy.and.callFake(() => { throw 'Test'; });
|
||||
bc.updatePrVisibility(pr, makePublic).catch(err => {
|
||||
expectToBeUploadError(err, 500, `Error while making PR ${pr} ${makePublic ? 'public' : 'hidden'}.\nTest`);
|
||||
|
|
@ -434,11 +436,11 @@ describe('BuildCreator', () => {
|
|||
|
||||
describe('exists()', () => {
|
||||
let fsAccessSpy: jasmine.Spy;
|
||||
let fsAccessCbs: Function[];
|
||||
let fsAccessCbs: ((v?: any) => void)[];
|
||||
|
||||
beforeEach(() => {
|
||||
fsAccessCbs = [];
|
||||
fsAccessSpy = spyOn(fs, 'access').and.callFake((_: string, cb: Function) => fsAccessCbs.push(cb));
|
||||
fsAccessSpy = spyOn(fs, 'access').and.callFake((_: string, cb: (v?: any) => void) => fsAccessCbs.push(cb));
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -482,7 +484,7 @@ describe('BuildCreator', () => {
|
|||
let shellChmodSpy: jasmine.Spy;
|
||||
let shellRmSpy: jasmine.Spy;
|
||||
let cpExecSpy: jasmine.Spy;
|
||||
let cpExecCbs: Function[];
|
||||
let cpExecCbs: ((...args: any[]) => void)[];
|
||||
|
||||
beforeEach(() => {
|
||||
cpExecCbs = [];
|
||||
|
|
@ -490,7 +492,7 @@ describe('BuildCreator', () => {
|
|||
consoleWarnSpy = spyOn(console, 'warn');
|
||||
shellChmodSpy = spyOn(shell, 'chmod');
|
||||
shellRmSpy = spyOn(shell, 'rm');
|
||||
cpExecSpy = spyOn(cp, 'exec').and.callFake((_: string, cb: Function) => cpExecCbs.push(cb));
|
||||
cpExecSpy = spyOn(cp, 'exec').and.callFake((_: string, cb: (...args: any[]) => void) => cpExecCbs.push(cb));
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -556,7 +558,11 @@ describe('BuildCreator', () => {
|
|||
done();
|
||||
});
|
||||
|
||||
shellChmodSpy.and.callFake(() => { throw 'Test'; });
|
||||
shellChmodSpy.and.callFake(() => {
|
||||
// tslint:disable-next-line: no-string-throw
|
||||
throw 'Test';
|
||||
});
|
||||
|
||||
cpExecCbs[0]();
|
||||
});
|
||||
|
||||
|
|
@ -569,7 +575,11 @@ describe('BuildCreator', () => {
|
|||
done();
|
||||
});
|
||||
|
||||
shellRmSpy.and.callFake(() => { throw 'Test'; });
|
||||
shellRmSpy.and.callFake(() => {
|
||||
// tslint:disable-next-line: no-string-throw
|
||||
throw 'Test';
|
||||
});
|
||||
|
||||
cpExecCbs[0]();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ describe('uploadServerFactory', () => {
|
|||
|
||||
it('should log the server address info on \'listening\'', () => {
|
||||
const consoleInfoSpy = spyOn(console, 'info');
|
||||
const server = createUploadServer('builds/dir');
|
||||
const server = createUploadServer();
|
||||
server.address = () => ({address: 'foo', family: '', port: 1337});
|
||||
|
||||
expect(consoleInfoSpy).not.toHaveBeenCalled();
|
||||
|
|
|
|||
|
|
@ -1,25 +1,66 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"alwaysStrict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"inlineSourceMap": true,
|
||||
/* Basic Options */
|
||||
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
|
||||
"module": "commonjs", /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
|
||||
"lib": [
|
||||
"es2016"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitReturns": true,
|
||||
"noImplicitThis": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"outDir": "dist",
|
||||
"pretty": true,
|
||||
"rootDir": ".",
|
||||
"skipLibCheck": true,
|
||||
"strictNullChecks": true,
|
||||
"target": "es5",
|
||||
"es2015",
|
||||
"es2016.array.include"
|
||||
], /* Specify library files to be included in the compilation: */
|
||||
// "allowJs": true, /* Allow javascript files to be compiled. */
|
||||
// "checkJs": true, /* Report errors in .js files. */
|
||||
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
||||
// "declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||
// "sourceMap": true, /* Generates corresponding '.map' file. */
|
||||
// "outFile": "./", /* Concatenate and emit output to single file. */
|
||||
"outDir": "dist", /* Redirect output structure to the directory. */
|
||||
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
||||
// "removeComments": true, /* Do not emit comments to output. */
|
||||
// "noEmit": true, /* Do not emit outputs. */
|
||||
"importHelpers": true, /* Import emit helpers from 'tslib'. */
|
||||
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
|
||||
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
||||
|
||||
/* Strict Type-Checking Options */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* Enable strict null checks. */
|
||||
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
||||
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
|
||||
|
||||
/* Additional Checks */
|
||||
"noUnusedLocals": true, /* Report errors on unused locals. */
|
||||
"noUnusedParameters": true, /* Report errors on unused parameters. */
|
||||
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
||||
|
||||
/* Module Resolution Options */
|
||||
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
|
||||
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
||||
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
||||
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
]
|
||||
], /* List of folders to include type definitions from. */
|
||||
// "types": [], /* Type declaration files to be included in compilation. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||
|
||||
/* Source Map Options */
|
||||
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
"inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
||||
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
||||
|
||||
/* Experimental Options */
|
||||
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
||||
|
||||
/* Other */
|
||||
"forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
|
||||
"newLine": "LF", /* Use the specified end of line sequence to be used when emitting files: "crlf" (windows) or "lf" (unix). */
|
||||
"pretty": true, /* Stylize errors and messages using color and context. */
|
||||
"skipLibCheck": true /* Skip type checking of all declaration files (*.d.ts). */
|
||||
},
|
||||
"include": [
|
||||
"lib/**/*",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
{
|
||||
"extends": "tslint:recommended",
|
||||
"defaultSeverity": "error",
|
||||
"extends": [
|
||||
"tslint:recommended"
|
||||
],
|
||||
"jsRules": {},
|
||||
"rules": {
|
||||
"array-type": [true, "array"],
|
||||
"arrow-parens": [true, "ban-single-arg-parens"],
|
||||
|
|
@ -7,9 +11,14 @@
|
|||
"max-classes-per-file": [true, 4],
|
||||
"no-consecutive-blank-lines": [true, 2],
|
||||
"no-console": [false],
|
||||
"no-focused-test": true,
|
||||
"no-namespace": [true, "allow-declarations"],
|
||||
"no-skipped-test": true,
|
||||
"no-string-literal": false,
|
||||
"quotemark": [true, "single"],
|
||||
"variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore"]
|
||||
}
|
||||
},
|
||||
"rulesDirectory": [
|
||||
"node_modules/tslint-jasmine-noSkipOrFocus"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,10 +6,9 @@ export AIO_GITHUB_TOKEN=$(head -c -1 /aio-secrets/GITHUB_TOKEN 2>/dev/null || ec
|
|||
export AIO_PREVIEW_DEPLOYMENT_TOKEN=$(head -c -1 /aio-secrets/PREVIEW_DEPLOYMENT_TOKEN 2>/dev/null || echo "MISSING_PREVIEW_DEPLOYMENT_TOKEN")
|
||||
|
||||
# Start the upload-server instance
|
||||
# TODO(gkalpak): Ideally, the upload server should be run as a non-privileged user.
|
||||
# (Currently, there doesn't seem to be a straight forward way.)
|
||||
action=$([ "$1" == "stop" ] && echo "stop" || echo "start")
|
||||
pm2 $action $AIO_SCRIPTS_JS_DIR/dist/lib/upload-server \
|
||||
--uid $AIO_WWW_USER \
|
||||
--log /var/log/aio/upload-server-prod.log \
|
||||
--name aio-upload-server-prod \
|
||||
${@:2}
|
||||
|
|
|
|||
|
|
@ -15,13 +15,12 @@ export AIO_GITHUB_TOKEN=$(head -c -1 /aio-secrets/TEST_GITHUB_TOKEN 2>/dev/null
|
|||
export AIO_PREVIEW_DEPLOYMENT_TOKEN=$(head -c -1 /aio-secrets/TEST_PREVIEW_DEPLOYMENT_TOKEN 2>/dev/null || echo "TEST_PREVIEW_DEPLOYMENT_TOKEN")
|
||||
|
||||
# Start the upload-server instance
|
||||
# TODO(gkalpak): Ideally, the upload server should be run as a non-privileged user.
|
||||
# (Currently, there doesn't seem to be a straight forward way.)
|
||||
appName=aio-upload-server-test
|
||||
if [[ "$1" == "stop" ]]; then
|
||||
pm2 delete $appName
|
||||
else
|
||||
pm2 start $AIO_SCRIPTS_JS_DIR/dist/lib/verify-setup/start-test-upload-server.js \
|
||||
--uid $AIO_WWW_USER \
|
||||
--log /var/log/aio/upload-server-test.log \
|
||||
--name $appName \
|
||||
--no-autorestart \
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
set -eux -o pipefail
|
||||
exec 3>&1
|
||||
|
||||
echo "[`date`] - Updating the preview server..."
|
||||
echo "\n\n[`date`] - Updating the preview server..."
|
||||
|
||||
# Input
|
||||
readonly HOST_REPO_DIR=$1
|
||||
|
|
@ -37,7 +37,7 @@ readonly CONTAINER_NAME=aio
|
|||
fi
|
||||
|
||||
# Create and verify a new docker image.
|
||||
aio/aio-builds-setup/scripts/create-image.sh "$PROVISIONAL_IMAGE_NAME"
|
||||
aio/aio-builds-setup/scripts/create-image.sh "$PROVISIONAL_IMAGE_NAME" --no-cache
|
||||
readonly imageVerified=$(sudo docker run --dns 127.0.0.1 --rm --volume $HOST_SECRETS_DIR:/aio-secrets:ro "$PROVISIONAL_IMAGE_NAME" /bin/bash -c "aio-init && aio-health-check && aio-verify-setup" >> /dev/fd/3 && echo "true" || echo "false")
|
||||
|
||||
if [[ "$imageVerified" != "true" ]]; then
|
||||
|
|
|
|||
|
|
@ -1,8 +1,22 @@
|
|||
# boilerplate files
|
||||
**/src/environments/environment.prod.ts
|
||||
**/src/environments/environment.ts
|
||||
**/src/assets/.gitkeep
|
||||
**/src/styles.css
|
||||
**/src/systemjs-angular-loader.js
|
||||
**/src/systemjs.config.js
|
||||
**/src/tsconfig.json
|
||||
**/src/favicon.ico
|
||||
**/src/polyfills.ts
|
||||
**/src/test.ts
|
||||
**/src/tsconfig.app.json
|
||||
**/src/tsconfig.spec.json
|
||||
**/src/typings.d.ts
|
||||
**/e2e/app.po.ts
|
||||
**/e2e/tsconfig.e2e.json
|
||||
**/.angular-cli.json
|
||||
**/.editorconfig
|
||||
**/tsconfig.json
|
||||
**/bs-config.e2e.json
|
||||
**/bs-config.json
|
||||
**/package.json
|
||||
|
|
@ -53,14 +67,18 @@ dist/
|
|||
|
||||
# testing
|
||||
!testing/src/browser-test-shim.js
|
||||
!testing/karma*.js
|
||||
|
||||
# webpack
|
||||
!webpack/**/config/*.js
|
||||
!webpack/**/*webpack*.js
|
||||
!webpack/src/polyfills.ts
|
||||
|
||||
# styleguide
|
||||
!styleguide/src/systemjs.custom.js
|
||||
|
||||
# plunkers
|
||||
*plnkr.no-link.html
|
||||
|
||||
# ngUpgrade testing
|
||||
!upgrade-phonecat-*/**/karma.conf.js
|
||||
!upgrade-phonecat-*/**/karma-test-shim.js
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
|
|||
}
|
||||
|
||||
function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
|
||||
let posterButton = element(by.css('movie-list tr > th > button'));
|
||||
let posterButton = element(by.css('app-movie-list tr > th > button'));
|
||||
expect(posterButton.getText()).toBe(expectedButtonText);
|
||||
|
||||
posterButton.click().then(function () {
|
||||
|
|
@ -92,11 +92,11 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
|
|||
}
|
||||
|
||||
function getMovieRows() {
|
||||
return element.all(by.css('movie-list tbody > tr'));
|
||||
return element.all(by.css('app-movie-list tbody > tr'));
|
||||
}
|
||||
|
||||
function testFavoriteHero(heroName: string, expectedLabel: string) {
|
||||
let movieListComp = element(by.tagName('movie-list'));
|
||||
let movieListComp = element(by.tagName('app-movie-list'));
|
||||
let heroInput = movieListComp.element(by.tagName('input'));
|
||||
let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
|
||||
let resultLabel = movieListComp.element(by.css('span > p'));
|
||||
|
|
@ -4,7 +4,7 @@ import { MovieService } from './movie.service';
|
|||
import { IMovie } from './movie';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: [ './app.component.css' ],
|
||||
providers: [ MovieService ]
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { MovieService } from './movie.service';
|
|||
|
||||
// #docregion component
|
||||
@Component({
|
||||
selector: 'movie-list',
|
||||
selector: 'app-movie-list',
|
||||
templateUrl: './movie-list.component.html',
|
||||
// #docregion style-url
|
||||
styleUrls: [ './movie-list.component.css' ],
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export class MovieService {
|
|||
return [
|
||||
{
|
||||
hero: 'Celeritas',
|
||||
imageurl: 'images/hero.png',
|
||||
imageurl: 'assets/images/hero.png',
|
||||
movieId: 1,
|
||||
mpaa: 'pg-13',
|
||||
releaseDate: '2015-12-19T00:00:00',
|
||||
|
|
@ -19,7 +19,7 @@ export class MovieService {
|
|||
},
|
||||
{
|
||||
hero: 'Mr. Nice',
|
||||
imageurl: 'images/villain.png',
|
||||
imageurl: 'assets/images/villain.png',
|
||||
movieId: 2,
|
||||
mpaa: 'pg-13',
|
||||
releaseDate: '2015-12-18T00:00:00',
|
||||
|
|
@ -30,7 +30,7 @@ export class MovieService {
|
|||
},
|
||||
{
|
||||
hero: 'Angular',
|
||||
imageurl: 'images/ng-logo.png',
|
||||
imageurl: 'assets/images/ng-logo.png',
|
||||
movieId: 3,
|
||||
mpaa: 'pg-13',
|
||||
releaseDate: '2015-12-17T00:00:00',
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base href="/">
|
||||
<meta charset="UTF-8">
|
||||
|
|
@ -8,21 +8,10 @@
|
|||
<!-- #docregion style -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<!-- #enddocregion style -->
|
||||
|
||||
<!-- 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/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('main.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading app...</my-app>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
// #docregion
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(() => {
|
||||
host = element(by.css('hero-list-basic'));
|
||||
host = element(by.css('app-hero-list-basic'));
|
||||
});
|
||||
|
||||
it('animates between active and inactive', () => {
|
||||
|
|
@ -58,7 +58,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(function() {
|
||||
host = element(by.css('hero-list-inline-styles'));
|
||||
host = element(by.css('app-hero-list-inline-styles'));
|
||||
});
|
||||
|
||||
it('are not kept after animation', () => {
|
||||
|
|
@ -79,7 +79,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(() => {
|
||||
host = element(by.css('hero-list-combined-transitions'));
|
||||
host = element(by.css('app-hero-list-combined-transitions'));
|
||||
});
|
||||
|
||||
it('animates between active and inactive', () => {
|
||||
|
|
@ -108,7 +108,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(() => {
|
||||
host = element(by.css('hero-list-twoway'));
|
||||
host = element(by.css('app-hero-list-twoway'));
|
||||
});
|
||||
|
||||
it('animates between active and inactive', () => {
|
||||
|
|
@ -137,7 +137,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(() => {
|
||||
host = element(by.css('hero-list-enter-leave'));
|
||||
host = element(by.css('app-hero-list-enter-leave'));
|
||||
});
|
||||
|
||||
it('adds and removes element', () => {
|
||||
|
|
@ -157,7 +157,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(function() {
|
||||
host = element(by.css('hero-list-enter-leave-states'));
|
||||
host = element(by.css('app-hero-list-enter-leave-states'));
|
||||
});
|
||||
|
||||
it('adds and removes and animates between active and inactive', () => {
|
||||
|
|
@ -186,7 +186,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(function() {
|
||||
host = element(by.css('hero-list-auto'));
|
||||
host = element(by.css('app-hero-list-auto'));
|
||||
});
|
||||
|
||||
it('adds and removes element', () => {
|
||||
|
|
@ -206,7 +206,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(() => {
|
||||
host = element(by.css('hero-list-timings'));
|
||||
host = element(by.css('app-hero-list-timings'));
|
||||
});
|
||||
|
||||
it('adds and removes element', () => {
|
||||
|
|
@ -227,7 +227,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(() => {
|
||||
host = element(by.css('hero-list-multistep'));
|
||||
host = element(by.css('app-hero-list-multistep'));
|
||||
});
|
||||
|
||||
it('adds and removes element', () => {
|
||||
|
|
@ -248,7 +248,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(() => {
|
||||
host = element(by.css('hero-list-groups'));
|
||||
host = element(by.css('app-hero-list-groups'));
|
||||
});
|
||||
|
||||
it('adds and removes element', () => {
|
||||
|
|
@ -269,7 +269,7 @@ describe('Animation Tests', () => {
|
|||
let host: ElementFinder;
|
||||
|
||||
beforeEach(() => {
|
||||
host = element(by.css('hero-list-basic'));
|
||||
host = element(by.css('app-hero-list-basic'));
|
||||
});
|
||||
|
||||
it('animates between active and inactive', () => {
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
// #docregion animations-module
|
||||
// #docplaster
|
||||
import { NgModule } from '@angular/core';
|
||||
// #docregion animations-module
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
// #enddocregion animations-module
|
||||
|
|
@ -15,11 +16,12 @@ import { HeroListAutoComponent } from './hero-list-auto.component';
|
|||
import { HeroListGroupsComponent } from './hero-list-groups.component';
|
||||
import { HeroListMultistepComponent } from './hero-list-multistep.component';
|
||||
import { HeroListTimingsComponent } from './hero-list-timings.component';
|
||||
// #docregion animations-module
|
||||
|
||||
// #docregion animation-module
|
||||
@NgModule({
|
||||
imports: [ BrowserModule, BrowserAnimationsModule ],
|
||||
// #enddocregion animation-module
|
||||
// ... more stuff ...
|
||||
// #enddocregion animations-module
|
||||
declarations: [
|
||||
HeroTeamBuilderComponent,
|
||||
HeroListBasicComponent,
|
||||
|
|
@ -34,5 +36,8 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
|
|||
HeroListGroupsComponent
|
||||
],
|
||||
bootstrap: [ HeroTeamBuilderComponent ]
|
||||
// #docregion animations-module
|
||||
})
|
||||
export class AppModule { }
|
||||
// #enddocregion animations-module
|
||||
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ import {
|
|||
transition
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-auto',
|
||||
selector: 'app-hero-list-auto',
|
||||
// #docregion template
|
||||
template: `
|
||||
<ul>
|
||||
|
|
@ -43,5 +43,5 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListAutoComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ import {
|
|||
} from '@angular/animations';
|
||||
// #enddocregion imports
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-basic',
|
||||
selector: 'app-hero-list-basic',
|
||||
// #enddocregion
|
||||
/* The click event calls hero.toggleState(), which
|
||||
* causes the state of that hero to switch from
|
||||
|
|
@ -66,5 +66,5 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListBasicComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ import {
|
|||
} from '@angular/animations';
|
||||
// #enddocregion imports
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-combined-transitions',
|
||||
selector: 'app-hero-list-combined-transitions',
|
||||
// #docregion template
|
||||
template: `
|
||||
<ul>
|
||||
|
|
@ -55,5 +55,5 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListCombinedTransitionsComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ import {
|
|||
transition
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-enter-leave-states',
|
||||
selector: 'app-hero-list-enter-leave-states',
|
||||
// #docregion template
|
||||
template: `
|
||||
<ul>
|
||||
|
|
@ -59,5 +59,5 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListEnterLeaveStatesComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ import {
|
|||
transition
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-enter-leave',
|
||||
selector: 'app-hero-list-enter-leave',
|
||||
// #docregion template
|
||||
template: `
|
||||
<ul>
|
||||
|
|
@ -47,5 +47,5 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListEnterLeaveComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ import {
|
|||
group
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-groups',
|
||||
selector: 'app-hero-list-groups',
|
||||
template: `
|
||||
<ul>
|
||||
<li *ngFor="let hero of heroes"
|
||||
|
|
@ -76,5 +76,5 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListGroupsComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@ import {
|
|||
} from '@angular/animations';
|
||||
// #enddocregion imports
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-inline-styles',
|
||||
selector: 'app-hero-list-inline-styles',
|
||||
// #docregion template
|
||||
template: `
|
||||
<ul>
|
||||
|
|
@ -56,5 +56,5 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListInlineStylesComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@ import {
|
|||
AnimationEvent
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-multistep',
|
||||
selector: 'app-hero-list-multistep',
|
||||
// #docregion template
|
||||
template: `
|
||||
<ul>
|
||||
|
|
@ -59,7 +59,7 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListMultistepComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
|
||||
animationStarted(event: AnimationEvent) {
|
||||
console.warn('Animation started: ', event);
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ import {
|
|||
transition
|
||||
} from '@angular/animations';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-timings',
|
||||
selector: 'app-hero-list-timings',
|
||||
template: `
|
||||
<ul>
|
||||
<li *ngFor="let hero of heroes"
|
||||
|
|
@ -54,5 +54,5 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListTimingsComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ import {
|
|||
} from '@angular/animations';
|
||||
// #enddocregion imports
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-list-twoway',
|
||||
selector: 'app-hero-list-twoway',
|
||||
// #docregion template
|
||||
template: `
|
||||
<ul>
|
||||
|
|
@ -54,5 +54,5 @@ import { Heroes } from './hero.service';
|
|||
// #enddocregion animationdef
|
||||
})
|
||||
export class HeroListTwowayComponent {
|
||||
@Input() heroes: Heroes;
|
||||
@Input() heroes: Hero[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,41 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { Heroes } from './hero.service';
|
||||
import { Hero, HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-team-builder',
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<div class="buttons">
|
||||
<button [disabled]="!heroes.canAdd()" (click)="heroes.addInactive()">Add inactive hero</button>
|
||||
<button [disabled]="!heroes.canAdd()" (click)="heroes.addActive()">Add active hero</button>
|
||||
<button [disabled]="!heroes.canRemove()" (click)="heroes.remove()">Remove hero</button>
|
||||
<button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button>
|
||||
<button [disabled]="!heroService.canAdd()" (click)="heroService.addActive()">Add active hero</button>
|
||||
<button [disabled]="!heroService.canRemove()" (click)="heroService.remove()">Remove hero</button>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h4>Basic State</h4>
|
||||
<p>Switch between active/inactive on click.</p>
|
||||
<hero-list-basic [heroes]=heroes></hero-list-basic>
|
||||
<app-hero-list-basic [heroes]="heroes"></app-hero-list-basic>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4>Styles inline in transitions</h4>
|
||||
<p>Animated effect on click, no persistend end styles.</p>
|
||||
<hero-list-inline-styles [heroes]=heroes></hero-list-inline-styles>
|
||||
<app-hero-list-inline-styles [heroes]="heroes"></app-hero-list-inline-styles>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4>Combined transition syntax</h4>
|
||||
<p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
|
||||
<hero-list-combined-transitions [heroes]=heroes></hero-list-combined-transitions>
|
||||
<app-hero-list-combined-transitions [heroes]="heroes"></app-hero-list-combined-transitions>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4>Two-way transition syntax</h4>
|
||||
<p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
|
||||
<hero-list-twoway [heroes]=heroes></hero-list-twoway>
|
||||
<app-hero-list-twoway [heroes]="heroes"></app-hero-list-twoway>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4>Enter & Leave</h4>
|
||||
<p>Enter and leave animations using the void state.</p>
|
||||
<hero-list-enter-leave [heroes]=heroes></hero-list-enter-leave>
|
||||
<app-hero-list-enter-leave [heroes]="heroes"></app-hero-list-enter-leave>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
|
|
@ -44,27 +45,27 @@ import { Heroes } from './hero.service';
|
|||
Enter and leave animations combined with active/inactive state animations.
|
||||
Different enter and leave transitions depending on state.
|
||||
</p>
|
||||
<hero-list-enter-leave-states [heroes]=heroes></hero-list-enter-leave-states>
|
||||
<app-hero-list-enter-leave-states [heroes]="heroes"></app-hero-list-enter-leave-states>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4>Auto Style Calc</h4>
|
||||
<p>Leave animation from the current computed height using the auto-style value *.</p>
|
||||
<hero-list-auto [heroes]=heroes></hero-list-auto>
|
||||
<app-hero-list-auto [heroes]="heroes"></app-hero-list-auto>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4>Different Timings</h4>
|
||||
<p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
|
||||
<hero-list-timings [heroes]=heroes></hero-list-timings>
|
||||
<app-hero-list-timings [heroes]="heroes"></app-hero-list-timings>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4>Multiple Keyframes</h4>
|
||||
<p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
|
||||
<hero-list-multistep [heroes]=heroes></hero-list-multistep>
|
||||
<app-hero-list-multistep [heroes]="heroes"></app-hero-list-multistep>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4>Parallel Groups</h4>
|
||||
<p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
|
||||
<hero-list-groups [heroes]=heroes></hero-list-groups>
|
||||
<app-hero-list-groups [heroes]="heroes"></app-hero-list-groups>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
|
@ -87,8 +88,12 @@ import { Heroes } from './hero.service';
|
|||
min-height: 6em;
|
||||
}
|
||||
`],
|
||||
providers: [Heroes]
|
||||
providers: [HeroService]
|
||||
})
|
||||
export class HeroTeamBuilderComponent {
|
||||
constructor(private heroes: Heroes) { }
|
||||
heroes: Hero[];
|
||||
|
||||
constructor(private heroService: HeroService) {
|
||||
this.heroes = heroService.heroes;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
class Hero {
|
||||
constructor(public name: string,
|
||||
public state = 'inactive') {
|
||||
}
|
||||
// #docregion hero
|
||||
export class Hero {
|
||||
constructor(public name: string, public state = 'inactive') { }
|
||||
|
||||
toggleState() {
|
||||
this.state = (this.state === 'active' ? 'inactive' : 'active');
|
||||
this.state = this.state === 'active' ? 'inactive' : 'active';
|
||||
}
|
||||
}
|
||||
// #enddocregion hero
|
||||
|
||||
let ALL_HEROES = [
|
||||
const ALL_HEROES = [
|
||||
'Windstorm',
|
||||
'RubberMan',
|
||||
'Bombasto',
|
||||
|
|
@ -25,36 +25,30 @@ let ALL_HEROES = [
|
|||
].map(name => new Hero(name));
|
||||
|
||||
@Injectable()
|
||||
export class Heroes implements Iterable<Hero> {
|
||||
export class HeroService {
|
||||
|
||||
currentHeroes: Hero[] = [];
|
||||
|
||||
[Symbol.iterator]() {
|
||||
return this.currentHeroes.values();
|
||||
}
|
||||
heroes: Hero[] = [];
|
||||
|
||||
canAdd() {
|
||||
return this.currentHeroes.length < ALL_HEROES.length;
|
||||
return this.heroes.length < ALL_HEROES.length;
|
||||
}
|
||||
|
||||
canRemove() {
|
||||
return this.currentHeroes.length > 0;
|
||||
return this.heroes.length > 0;
|
||||
}
|
||||
|
||||
addActive() {
|
||||
let hero = ALL_HEROES[this.currentHeroes.length];
|
||||
hero.state = 'active';
|
||||
this.currentHeroes.push(hero);
|
||||
addActive(active = true) {
|
||||
let hero = ALL_HEROES[this.heroes.length];
|
||||
hero.state = active ? 'active' : 'inactive';
|
||||
this.heroes.push(hero);
|
||||
}
|
||||
|
||||
addInactive() {
|
||||
let hero = ALL_HEROES[this.currentHeroes.length];
|
||||
hero.state = 'inactive';
|
||||
this.currentHeroes.push(hero);
|
||||
this.addActive(false);
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.currentHeroes.splice(this.currentHeroes.length - 1, 1);
|
||||
this.heroes.length -= 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,26 +5,14 @@
|
|||
<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 -->
|
||||
<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/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('main.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
|
||||
<hero-team-builder></hero-team-builder>
|
||||
<app-root></app-root>
|
||||
<button style="visibility: hidden;">External button for E2E test</button>
|
||||
<ul style="visibility: hidden;">
|
||||
<li>External list for E2E test</li>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"build": "build:aot"
|
||||
"build": "build:aot",
|
||||
"projectType": "systemjs"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Ahead of time compilation (JIT)</title>
|
||||
<base href="/">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Ahead of time compilation</title>
|
||||
<base href="/">
|
||||
|
|
|
|||
|
|
@ -79,10 +79,10 @@ function salesTaxTests() {
|
|||
|
||||
function getPageElts() {
|
||||
return {
|
||||
heroes: element.all(by.css('my-app li')),
|
||||
heroDetail: element(by.css('my-app hero-detail')),
|
||||
salesTaxAmountInput: element(by.css('my-app sales-tax input')),
|
||||
salesTaxDetail: element(by.css('my-app sales-tax div'))
|
||||
heroes: element.all(by.css('app-root li')),
|
||||
heroDetail: element(by.css('app-root app-hero-detail')),
|
||||
salesTaxAmountInput: element(by.css('app-root app-sales-tax input')),
|
||||
salesTaxDetail: element(by.css('app-root app-sales-tax div'))
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -3,10 +3,10 @@ import { Component } from '@angular/core';
|
|||
// #enddocregion import
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<hero-list></hero-list>
|
||||
<sales-tax></sales-tax>
|
||||
<app-hero-list></app-hero-list>
|
||||
<app-sales-tax></app-sales-tax>
|
||||
`
|
||||
})
|
||||
// #docregion export
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
|
|||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-detail',
|
||||
selector: 'app-hero-detail',
|
||||
templateUrl: './hero-detail.component.html'
|
||||
})
|
||||
export class HeroDetailComponent {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<!--#docregion binding -->
|
||||
<li>{{hero.name}}</li>
|
||||
<hero-detail [hero]="selectedHero"></hero-detail>
|
||||
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
|
||||
<li (click)="selectHero(hero)"></li>
|
||||
<!--#enddocregion binding -->
|
||||
|
||||
<!--#docregion structural -->
|
||||
<li *ngFor="let hero of heroes"></li>
|
||||
<hero-detail *ngIf="selectedHero"></hero-detail>
|
||||
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
|
||||
<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { HeroService } from './hero.service';
|
|||
|
||||
// #docregion metadata, providers
|
||||
@Component({
|
||||
selector: 'hero-list',
|
||||
selector: 'app-hero-list',
|
||||
templateUrl: './hero-list.component.html',
|
||||
providers: [ HeroService ]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { SalesTaxService } from './sales-tax.service';
|
|||
import { TaxRateService } from './tax-rate.service';
|
||||
|
||||
@Component({
|
||||
selector: 'sales-tax',
|
||||
selector: 'app-sales-tax',
|
||||
template: `
|
||||
<h2>Sales Tax Calculator</h2>
|
||||
Amount: <input #amountBox (change)="0">
|
||||
|
|
|
|||
|
|
@ -1,26 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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 -->
|
||||
<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/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('main.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
// #docregion
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<!-- #docregion -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<!-- #docregion applied -->
|
||||
<p myHighlight>Highlight me!</p>
|
||||
<p appHightlight>Highlight me!</p>
|
||||
<!-- #enddocregion applied, -->
|
||||
|
||||
<!-- #docregion color-1 -->
|
||||
<p myHighlight highlightColor="yellow">Highlighted in yellow</p>
|
||||
<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
|
||||
<p appHightlight highlightColor="yellow">Highlighted in yellow</p>
|
||||
<p appHightlight [highlightColor]="'orange'">Highlighted in orange</p>
|
||||
<!-- #enddocregion color-1 -->
|
||||
|
||||
<!-- #docregion color-2 -->
|
||||
<p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
|
||||
<p appHightlight [highlightColor]="color">Highlighted with parent component's color</p>
|
||||
<!-- #enddocregion color-2 -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.1.html'
|
||||
})
|
||||
// #docregion class
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
<input type="radio" name="colors" (click)="color='cyan'">Cyan
|
||||
</div>
|
||||
<!-- #docregion color -->
|
||||
<p [myHighlight]="color">Highlight me!</p>
|
||||
<p [appHighlight]="color">Highlight me!</p>
|
||||
<!-- #enddocregion color, v2 -->
|
||||
|
||||
<!-- #docregion defaultColor -->
|
||||
<p [myHighlight]="color" defaultColor="violet">
|
||||
<p [appHighlight]="color" defaultColor="violet">
|
||||
Highlight me too!
|
||||
</p>
|
||||
<!-- #enddocregion defaultColor, -->
|
||||
|
|
@ -20,5 +20,5 @@
|
|||
<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>
|
||||
<p [appHighlight]="'yellow'">Highlighted in yellow</p>
|
||||
<p appHighlight="orange">Highlighted in orange</p>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
// #docregion class
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// #docregion
|
||||
import { Directive, ElementRef, Input } from '@angular/core';
|
||||
|
||||
@Directive({ selector: '[myHighlight]' })
|
||||
@Directive({ selector: '[appHighlight]' })
|
||||
export class HighlightDirective {
|
||||
constructor(el: ElementRef) {
|
||||
el.nativeElement.style.backgroundColor = 'yellow';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]'
|
||||
selector: '[appHighlight]'
|
||||
})
|
||||
export class HighlightDirective {
|
||||
// #docregion ctor
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]'
|
||||
selector: '[appHighlight]'
|
||||
})
|
||||
export class HighlightDirective {
|
||||
|
||||
constructor(private el: ElementRef) { }
|
||||
|
||||
@Input('myHighlight') highlightColor: string;
|
||||
@Input('appHighlight') highlightColor: string;
|
||||
|
||||
// #docregion mouse-enter
|
||||
@HostListener('mouseenter') onMouseEnter() {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
|
|||
// #enddocregion imports
|
||||
|
||||
@Directive({
|
||||
selector: '[myHighlight]'
|
||||
selector: '[appHighlight]'
|
||||
})
|
||||
export class HighlightDirective {
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ export class HighlightDirective {
|
|||
// #enddocregion defaultColor
|
||||
|
||||
// #docregion color
|
||||
@Input('myHighlight') highlightColor: string;
|
||||
@Input('appHighlight') highlightColor: string;
|
||||
// #enddocregion color
|
||||
|
||||
// #docregion mouse-enter
|
||||
|
|
|
|||
|
|
@ -1,25 +1,13 @@
|
|||
<!-- #docregion -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Attribute Directives</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- 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/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('main.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app>loading...</my-app>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
// #docregion
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
'use strict'; // necessary for es6 output in node
|
||||
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
describe('cli-quickstart App', () => {
|
||||
beforeEach(() => {
|
||||
return browser.get('/');
|
||||
});
|
||||
|
||||
it('should display message saying app works', () => {
|
||||
let pageTitle = element(by.css('app-root h1')).getText();
|
||||
expect(pageTitle).toEqual('Welcome to My First Angular App!!');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
import { MyAppPage } from './app.po';
|
||||
'use strict'; // necessary for es6 output in node
|
||||
|
||||
describe('my-app App', function() {
|
||||
let page: MyAppPage;
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
describe('cli-quickstart App', () => {
|
||||
beforeEach(() => {
|
||||
page = new MyAppPage();
|
||||
return browser.get('/');
|
||||
});
|
||||
|
||||
it('should display message saying app works', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('Welcome to app!!');
|
||||
let pageTitle = element(by.css('app-root h1')).getText();
|
||||
expect(pageTitle).toEqual('Welcome to My First Angular App!!');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,5 @@
|
|||
"!**/*.[0-9].*",
|
||||
".angular-cli.json",
|
||||
"protractor.conf.js"
|
||||
],
|
||||
"removeSystemJsConfig": true,
|
||||
"type": "cli"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
let _masterName = 'Master';
|
||||
|
||||
it('should pass properties to children properly', function () {
|
||||
let parent = element.all(by.tagName('hero-parent')).get(0);
|
||||
let heroes = parent.all(by.tagName('hero-child'));
|
||||
let parent = element.all(by.tagName('app-hero-parent')).get(0);
|
||||
let heroes = parent.all(by.tagName('app-hero-child'));
|
||||
|
||||
for (let i = 0; i < _heroNames.length; i++) {
|
||||
let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
|
||||
|
|
@ -37,8 +37,8 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
it('should display trimmed, non-empty names', function () {
|
||||
let _nonEmptyNameIndex = 0;
|
||||
let _nonEmptyName = '"Mr. IQ"';
|
||||
let parent = element.all(by.tagName('name-parent')).get(0);
|
||||
let hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex);
|
||||
let parent = element.all(by.tagName('app-name-parent')).get(0);
|
||||
let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);
|
||||
|
||||
let displayName = hero.element(by.tagName('h3')).getText();
|
||||
expect(displayName).toEqual(_nonEmptyName);
|
||||
|
|
@ -47,8 +47,8 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
it('should replace empty name with default name', function () {
|
||||
let _emptyNameIndex = 1;
|
||||
let _defaultName = '"<no name set>"';
|
||||
let parent = element.all(by.tagName('name-parent')).get(0);
|
||||
let hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex);
|
||||
let parent = element.all(by.tagName('app-name-parent')).get(0);
|
||||
let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);
|
||||
|
||||
let displayName = hero.element(by.tagName('h3')).getText();
|
||||
expect(displayName).toEqual(_defaultName);
|
||||
|
|
@ -73,7 +73,7 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
});
|
||||
|
||||
it('should set expected values after clicking \'Minor\' twice', function () {
|
||||
let repoTag = element(by.tagName('version-parent'));
|
||||
let repoTag = element(by.tagName('app-version-parent'));
|
||||
let newMinorButton = repoTag.all(by.tagName('button')).get(0);
|
||||
|
||||
newMinorButton.click().then(function() {
|
||||
|
|
@ -91,7 +91,7 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
});
|
||||
|
||||
it('should set expected values after clicking \'Major\' once', function () {
|
||||
let repoTag = element(by.tagName('version-parent'));
|
||||
let repoTag = element(by.tagName('app-version-parent'));
|
||||
let newMajorButton = repoTag.all(by.tagName('button')).get(1);
|
||||
|
||||
newMajorButton.click().then(function() {
|
||||
|
|
@ -107,7 +107,7 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
});
|
||||
|
||||
function getActual() {
|
||||
let versionTag = element(by.tagName('version-child'));
|
||||
let versionTag = element(by.tagName('app-version-child'));
|
||||
let label = versionTag.element(by.tagName('h3')).getText();
|
||||
let ul = versionTag.element((by.tagName('ul')));
|
||||
let logs = ul.all(by.tagName('li'));
|
||||
|
|
@ -127,26 +127,26 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
// #docregion child-to-parent
|
||||
// ...
|
||||
it('should not emit the event initially', function () {
|
||||
let voteLabel = element(by.tagName('vote-taker'))
|
||||
let voteLabel = element(by.tagName('app-vote-taker'))
|
||||
.element(by.tagName('h3')).getText();
|
||||
expect(voteLabel).toBe('Agree: 0, Disagree: 0');
|
||||
});
|
||||
|
||||
it('should process Agree vote', function () {
|
||||
let agreeButton1 = element.all(by.tagName('my-voter')).get(0)
|
||||
let agreeButton1 = element.all(by.tagName('app-voter')).get(0)
|
||||
.all(by.tagName('button')).get(0);
|
||||
agreeButton1.click().then(function() {
|
||||
let voteLabel = element(by.tagName('vote-taker'))
|
||||
let voteLabel = element(by.tagName('app-vote-taker'))
|
||||
.element(by.tagName('h3')).getText();
|
||||
expect(voteLabel).toBe('Agree: 1, Disagree: 0');
|
||||
});
|
||||
});
|
||||
|
||||
it('should process Disagree vote', function () {
|
||||
let agreeButton1 = element.all(by.tagName('my-voter')).get(1)
|
||||
let agreeButton1 = element.all(by.tagName('app-voter')).get(1)
|
||||
.all(by.tagName('button')).get(1);
|
||||
agreeButton1.click().then(function() {
|
||||
let voteLabel = element(by.tagName('vote-taker'))
|
||||
let voteLabel = element(by.tagName('app-vote-taker'))
|
||||
.element(by.tagName('h3')).getText();
|
||||
expect(voteLabel).toBe('Agree: 1, Disagree: 1');
|
||||
});
|
||||
|
|
@ -170,7 +170,7 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
// ...
|
||||
it('timer and parent seconds should match', function () {
|
||||
let parent = element(by.tagName(parentTag));
|
||||
let message = parent.element(by.tagName('countdown-timer')).getText();
|
||||
let message = parent.element(by.tagName('app-countdown-timer')).getText();
|
||||
browser.sleep(10); // give `seconds` a chance to catchup with `message`
|
||||
let seconds = parent.element(by.className('seconds')).getText();
|
||||
expect(message).toContain(seconds);
|
||||
|
|
@ -181,7 +181,7 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
let stopButton = parent.all(by.tagName('button')).get(1);
|
||||
|
||||
stopButton.click().then(function() {
|
||||
let message = parent.element(by.tagName('countdown-timer')).getText();
|
||||
let message = parent.element(by.tagName('app-countdown-timer')).getText();
|
||||
expect(message).toContain('Holding');
|
||||
});
|
||||
});
|
||||
|
|
@ -194,7 +194,7 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
// #docregion bidirectional-service
|
||||
// ...
|
||||
it('should announce a mission', function () {
|
||||
let missionControl = element(by.tagName('mission-control'));
|
||||
let missionControl = element(by.tagName('app-mission-control'));
|
||||
let announceButton = missionControl.all(by.tagName('button')).get(0);
|
||||
announceButton.click().then(function () {
|
||||
let history = missionControl.all(by.tagName('li'));
|
||||
|
|
@ -217,7 +217,7 @@ describe('Component Communication Cookbook Tests', function () {
|
|||
|
||||
function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
|
||||
let _confirmedLog = ' confirmed the mission';
|
||||
let missionControl = element(by.tagName('mission-control'));
|
||||
let missionControl = element(by.tagName('app-mission-control'));
|
||||
let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
|
||||
confirmButton.click().then(function () {
|
||||
let history = missionControl.all(by.tagName('li'));
|
||||
|
|
@ -9,43 +9,43 @@
|
|||
<a href="#bidirectional-service">Parent and children communicate via a service ("Mission Control")</a><br/>
|
||||
|
||||
<div id="parent-to-child">
|
||||
<hero-parent></hero-parent>
|
||||
<app-hero-parent></app-hero-parent>
|
||||
</div>
|
||||
<a href="#top" class="to-top">Back to Top</a>
|
||||
|
||||
<hr>
|
||||
<div id="parent-to-child-setter">
|
||||
<name-parent></name-parent>
|
||||
<app-name-parent></app-name-parent>
|
||||
</div>
|
||||
<a href="#top" class="to-top">Back to Top</a>
|
||||
|
||||
<hr>
|
||||
<div id="parent-to-child-on-changes">
|
||||
<version-parent></version-parent>
|
||||
<app-version-parent></app-version-parent>
|
||||
</div>
|
||||
<a href="#top" class="to-top">Back to Top</a>
|
||||
|
||||
<hr>
|
||||
<div id="child-to-parent">
|
||||
<vote-taker></vote-taker>
|
||||
<app-vote-taker></app-vote-taker>
|
||||
</div>
|
||||
<a href="#top" class="to-top">Back to Top</a>
|
||||
<hr>
|
||||
|
||||
<div id="parent-to-child-local-var">
|
||||
<countdown-parent-lv></countdown-parent-lv>
|
||||
<app-countdown-parent-lv></app-countdown-parent-lv>
|
||||
</div>
|
||||
<a href="#top" class="to-top">Back to Top</a>
|
||||
<hr>
|
||||
|
||||
<div id="parent-to-view-child">
|
||||
<countdown-parent-vc></countdown-parent-vc>
|
||||
<app-countdown-parent-vc></app-countdown-parent-vc>
|
||||
</div>
|
||||
<a href="#top" class="to-top">Back to Top</a>
|
||||
<hr>
|
||||
|
||||
<div id="bidirectional-service">
|
||||
<mission-control></mission-control>
|
||||
<app-mission-control></app-mission-control>
|
||||
</div>
|
||||
<a href="#top" class="to-top">Back to Top</a>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
export class AppComponent { }
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { MissionService } from './mission.service';
|
|||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
@Component({
|
||||
selector: 'my-astronaut',
|
||||
selector: 'app-astronaut',
|
||||
template: `
|
||||
<p>
|
||||
{{astronaut}}: <strong>{{mission}}</strong>
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@ import { CountdownTimerComponent } from './countdown-timer.component';
|
|||
//// Local variable, #timer, version
|
||||
// #docregion lv
|
||||
@Component({
|
||||
selector: 'countdown-parent-lv',
|
||||
selector: 'app-countdown-parent-lv',
|
||||
template: `
|
||||
<h3>Countdown to Liftoff (via local variable)</h3>
|
||||
<button (click)="timer.start()">Start</button>
|
||||
<button (click)="timer.stop()">Stop</button>
|
||||
<div class="seconds">{{timer.seconds}}</div>
|
||||
<countdown-timer #timer></countdown-timer>
|
||||
<app-countdown-timer #timer></app-countdown-timer>
|
||||
`,
|
||||
styleUrls: ['demo.css']
|
||||
styleUrls: ['../assets/demo.css']
|
||||
})
|
||||
export class CountdownLocalVarParentComponent { }
|
||||
// #enddocregion lv
|
||||
|
|
@ -27,15 +27,15 @@ export class CountdownLocalVarParentComponent { }
|
|||
//// View Child version
|
||||
// #docregion vc
|
||||
@Component({
|
||||
selector: 'countdown-parent-vc',
|
||||
selector: 'app-countdown-parent-vc',
|
||||
template: `
|
||||
<h3>Countdown to Liftoff (via ViewChild)</h3>
|
||||
<button (click)="start()">Start</button>
|
||||
<button (click)="stop()">Stop</button>
|
||||
<div class="seconds">{{ seconds() }}</div>
|
||||
<countdown-timer></countdown-timer>
|
||||
<app-countdown-timer></app-countdown-timer>
|
||||
`,
|
||||
styleUrls: ['demo.css']
|
||||
styleUrls: ['../assets/demo.css']
|
||||
})
|
||||
export class CountdownViewChildParentComponent implements AfterViewInit {
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'countdown-timer',
|
||||
selector: 'app-countdown-timer',
|
||||
template: '<p>{{message}}</p>'
|
||||
})
|
||||
export class CountdownTimerComponent implements OnInit, OnDestroy {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
|
|||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-child',
|
||||
selector: 'app-hero-child',
|
||||
template: `
|
||||
<h3>{{hero.name}} says:</h3>
|
||||
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@ import { Component } from '@angular/core';
|
|||
import { HEROES } from './hero';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-parent',
|
||||
selector: 'app-hero-parent',
|
||||
template: `
|
||||
<h2>{{master}} controls {{heroes.length}} heroes</h2>
|
||||
<hero-child *ngFor="let hero of heroes"
|
||||
<app-hero-child *ngFor="let hero of heroes"
|
||||
[hero]="hero"
|
||||
[master]="master">
|
||||
</hero-child>
|
||||
</app-hero-child>
|
||||
`
|
||||
})
|
||||
export class HeroParentComponent {
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@ import { Component } from '@angular/core';
|
|||
import { MissionService } from './mission.service';
|
||||
|
||||
@Component({
|
||||
selector: 'mission-control',
|
||||
selector: 'app-mission-control',
|
||||
template: `
|
||||
<h2>Mission Control</h2>
|
||||
<button (click)="announce()">Announce mission</button>
|
||||
<my-astronaut *ngFor="let astronaut of astronauts"
|
||||
<app-astronaut *ngFor="let astronaut of astronauts"
|
||||
[astronaut]="astronaut">
|
||||
</my-astronaut>
|
||||
</app-astronaut>
|
||||
<h3>History</h3>
|
||||
<ul>
|
||||
<li *ngFor="let event of history">{{event}}</li>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'name-child',
|
||||
selector: 'app-name-child',
|
||||
template: '<h3>"{{name}}"</h3>'
|
||||
})
|
||||
export class NameChildComponent {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'name-parent',
|
||||
selector: 'app-name-parent',
|
||||
template: `
|
||||
<h2>Master controls {{names.length}} names</h2>
|
||||
<name-child *ngFor="let name of names" [name]="name"></name-child>
|
||||
<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
|
||||
`
|
||||
})
|
||||
export class NameParentComponent {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'version-child',
|
||||
selector: 'app-version-child',
|
||||
template: `
|
||||
<h3>Version {{major}}.{{minor}}</h3>
|
||||
<h4>Change log:</h4>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'version-parent',
|
||||
selector: 'app-version-parent',
|
||||
template: `
|
||||
<h2>Source code version</h2>
|
||||
<button (click)="newMinor()">New minor version</button>
|
||||
<button (click)="newMajor()">New major version</button>
|
||||
<version-child [major]="major" [minor]="minor"></version-child>
|
||||
<app-version-child [major]="major" [minor]="minor"></app-version-child>
|
||||
`
|
||||
})
|
||||
export class VersionParentComponent {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-voter',
|
||||
selector: 'app-voter',
|
||||
template: `
|
||||
<h4>{{name}}</h4>
|
||||
<button (click)="vote(true)" [disabled]="voted">Agree</button>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'vote-taker',
|
||||
selector: 'app-vote-taker',
|
||||
template: `
|
||||
<h2>Should mankind colonize the Universe?</h2>
|
||||
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
|
||||
<my-voter *ngFor="let voter of voters"
|
||||
<app-voter *ngFor="let voter of voters"
|
||||
[name]="voter"
|
||||
(onVoted)="onVoted($event)">
|
||||
</my-voter>
|
||||
</app-voter>
|
||||
`
|
||||
})
|
||||
export class VoteTakerComponent {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Passing information from parent to child</title>
|
||||
|
|
@ -7,23 +7,10 @@
|
|||
<style>
|
||||
.to-top {margin-top: 8px; display: block;}
|
||||
</style>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
|
||||
<!-- 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/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('main.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>loading...</my-app>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ describe('Component Style Tests', function () {
|
|||
});
|
||||
|
||||
it('scopes component styles to component view', function() {
|
||||
let componentH1 = element(by.css('hero-app > h1'));
|
||||
let componentH1 = element(by.css('app-root > h1'));
|
||||
let externalH1 = element(by.css('body > h1'));
|
||||
|
||||
expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
|
||||
|
|
@ -18,47 +18,47 @@ describe('Component Style Tests', function () {
|
|||
|
||||
|
||||
it('allows styling :host element', function() {
|
||||
let host = element(by.css('hero-details'));
|
||||
let host = element(by.css('app-hero-details'));
|
||||
|
||||
expect(host.getCssValue('borderWidth')).toEqual('1px');
|
||||
});
|
||||
|
||||
it('supports :host() in function form', function() {
|
||||
let host = element(by.css('hero-details'));
|
||||
let host = element(by.css('app-hero-details'));
|
||||
|
||||
host.element(by.buttonText('Activate')).click();
|
||||
expect(host.getCssValue('borderWidth')).toEqual('3px');
|
||||
});
|
||||
|
||||
it('allows conditional :host-context() styling', function() {
|
||||
let h2 = element(by.css('hero-details h2'));
|
||||
let h2 = element(by.css('app-hero-details h2'));
|
||||
|
||||
expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
|
||||
});
|
||||
|
||||
it('styles both view and content children with /deep/', function() {
|
||||
let viewH3 = element(by.css('hero-team h3'));
|
||||
let contentH3 = element(by.css('hero-controls h3'));
|
||||
let viewH3 = element(by.css('app-hero-team h3'));
|
||||
let contentH3 = element(by.css('app-hero-controls h3'));
|
||||
|
||||
expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
|
||||
expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
|
||||
});
|
||||
|
||||
it('includes styles loaded with CSS @import', function() {
|
||||
let host = element(by.css('hero-details'));
|
||||
let host = element(by.css('app-hero-details'));
|
||||
|
||||
expect(host.getCssValue('padding')).toEqual('10px');
|
||||
});
|
||||
|
||||
it('processes template inline styles', function() {
|
||||
let button = element(by.css('hero-controls button'));
|
||||
let button = element(by.css('app-hero-controls button'));
|
||||
let externalButton = element(by.css('body > button'));
|
||||
expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
|
||||
expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
|
||||
});
|
||||
|
||||
it('processes template <link>s', function() {
|
||||
let li = element(by.css('hero-team li:first-child'));
|
||||
let li = element(by.css('app-hero-team li:first-child'));
|
||||
let externalLi = element(by.css('body > ul li'));
|
||||
|
||||
expect(li.getCssValue('listStyleType')).toEqual('square');
|
||||
|
|
@ -3,12 +3,12 @@ import { Component, Input } from '@angular/core';
|
|||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
selector: 'hero-app-main',
|
||||
selector: 'app-hero-main',
|
||||
template: `
|
||||
<quest-summary></quest-summary>
|
||||
<hero-details [hero]=hero [class.active]=hero.active>
|
||||
<hero-controls [hero]=hero></hero-controls>
|
||||
</hero-details>
|
||||
<app-quest-summary></app-quest-summary>
|
||||
<app-hero-details [hero]="hero" [class.active]="hero.active">
|
||||
<app-hero-controls [hero]="hero"></app-hero-controls>
|
||||
</app-hero-details>
|
||||
`
|
||||
})
|
||||
export class HeroAppMainComponent {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import { Hero } from './hero';
|
|||
|
||||
// #docregion
|
||||
@Component({
|
||||
selector: 'hero-app',
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<h1>Tour of Heroes</h1>
|
||||
<hero-app-main [hero]=hero></hero-app-main>`,
|
||||
<app-hero-main [hero]=hero></app-hero-main>`,
|
||||
styles: ['h1 { font-weight: normal; }']
|
||||
})
|
||||
export class HeroAppComponent {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Hero } from './hero';
|
|||
|
||||
// #docregion inlinestyles
|
||||
@Component({
|
||||
selector: 'hero-controls',
|
||||
selector: 'app-hero-controls',
|
||||
template: `
|
||||
<style>
|
||||
button {
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ import { Hero } from './hero';
|
|||
|
||||
// #docregion styleurls
|
||||
@Component({
|
||||
selector: 'hero-details',
|
||||
selector: 'app-hero-details',
|
||||
template: `
|
||||
<h2>{{hero.name}}</h2>
|
||||
<hero-team [hero]=hero></hero-team>
|
||||
<app-hero-team [hero]=hero></app-hero-team>
|
||||
<ng-content></ng-content>
|
||||
`,
|
||||
styleUrls: ['app/hero-details.component.css']
|
||||
styleUrls: ['./hero-details.component.css']
|
||||
})
|
||||
export class HeroDetailsComponent {
|
||||
// #enddocregion styleurls
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { Hero } from './hero';
|
|||
|
||||
// #docregion stylelink
|
||||
@Component({
|
||||
selector: 'hero-team',
|
||||
selector: 'app-hero-team',
|
||||
template: `
|
||||
<link rel="stylesheet" href="app/hero-team.component.css">
|
||||
<link rel="stylesheet" href="assets/hero-team.component.css">
|
||||
<h3>Team</h3>
|
||||
<ul>
|
||||
<li *ngFor="let member of hero.team">
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue