Compare commits
167 Commits
5.2.0-beta
...
5.0.2
Author | SHA1 | Date | |
---|---|---|---|
b1f8eb14c8 | |||
f983d1cc50 | |||
12857922c5 | |||
dbdf9f76be | |||
d5eaf4de3c | |||
2d6126ec1b | |||
259f6bf638 | |||
03d549be05 | |||
bc4b4b5b55 | |||
00f2055c59 | |||
91efc7f70b | |||
8b1a6b1f24 | |||
b732fb935b | |||
0e2d962acb | |||
7acbc19b94 | |||
c69eda8f60 | |||
210ff78f4d | |||
96766f7336 | |||
52b50c4b6c | |||
398690d47c | |||
dc01fb167b | |||
7c26c06495 | |||
82dc7fa628 | |||
3101e89cf5 | |||
79c3e1b968 | |||
c96967b235 | |||
422cd0b665 | |||
eea2039bce | |||
612f508dff | |||
aa3d75ba83 | |||
4cc6abbbf8 | |||
222758bed3 | |||
516107fd04 | |||
bd70aece52 | |||
2ca6bdd110 | |||
2aefac841f | |||
ec496c2fda | |||
346dbcf24a | |||
48843a9f47 | |||
8f2fb02048 | |||
89e4262188 | |||
424a323316 | |||
28985cb2de | |||
5d1cd57787 | |||
9de45fa650 | |||
953a0e07d6 | |||
511e56d633 | |||
1f1741c5ad | |||
408ffb634e | |||
73d857cb38 | |||
3ab0963309 | |||
da22c48ef1 | |||
f80d41f3e5 | |||
2b7ca4e9f8 | |||
4292540939 | |||
708379128f | |||
131368c774 | |||
94e0ef77ea | |||
e4cd3b0564 | |||
22dc3ad94c | |||
7077a61614 | |||
9811bef278 | |||
3298c4a79f | |||
5a6efa7a3f | |||
a8c786c8c9 | |||
799cbb932c | |||
e6f16a7629 | |||
1bb0333c23 | |||
9fa0ffd8a5 | |||
678d1cfae1 | |||
a897d6842f | |||
25843fed53 | |||
762da3b154 | |||
37a740b5b2 | |||
067e926c08 | |||
bc52e97eba | |||
9b579d85be | |||
895d78c0ed | |||
803b0f0fb3 | |||
86399958dd | |||
d550b6872a | |||
92e4c34d01 | |||
e84695389b | |||
4e48bdff22 | |||
2185e466db | |||
6f05dab2fc | |||
18197bd56d | |||
c75740e585 | |||
16d72584cb | |||
9c9867e840 | |||
55092ace87 | |||
70edca3cec | |||
120ebe8225 | |||
7695ad570b | |||
7a708ad387 | |||
71f1ed5795 | |||
ced5186ca4 | |||
e48dc270b5 | |||
aa574710c9 | |||
d62ef132d2 | |||
428f80e8ae | |||
260c9b763c | |||
5f6d71d39a | |||
8133a8d335 | |||
3e05d62a99 | |||
db7f2a9ca7 | |||
59a2fbe74f | |||
3274e1a79a | |||
6979a29d1f | |||
9da5ca7ae6 | |||
e51ac3671f | |||
3393009b69 | |||
12e4b5667e | |||
0f8b83200a | |||
253e89dfac | |||
c4772ee002 | |||
35ec4af2b1 | |||
19b48429ef | |||
b796419e7e | |||
a1ec65b1dd | |||
851e1cfcfd | |||
a363be6b5c | |||
e1fb65cac4 | |||
b497e9e6ee | |||
706ba38498 | |||
78052e4984 | |||
bf861f5539 | |||
d99a5ec494 | |||
d651fc0d6a | |||
5775376bcf | |||
896b853519 | |||
5225fdbc0e | |||
f5b7f2b9a5 | |||
509f392ab0 | |||
cf5fce8d5e | |||
f1248b69e6 | |||
4498dddbe3 | |||
812786f44e | |||
de24d54517 | |||
c295aeeca2 | |||
a8add78fe1 | |||
e3a16ed02d | |||
fd37f3fbab | |||
85e95cc32b | |||
de71ba74bb | |||
a01c877534 | |||
2d508a3ef0 | |||
4285b6c3e3 | |||
5542517b9c | |||
fef3539608 | |||
f4d5729cb3 | |||
d343bf7885 | |||
9ce7f0e538 | |||
4a23df3909 | |||
14016c781f | |||
47caebfe86 | |||
5cfd9c6020 | |||
47bc6f105d | |||
40fa2593a9 | |||
680bcf7b8a | |||
ef08330341 | |||
6cc042e2ba | |||
9b26455740 | |||
18bce5987c | |||
f1108fea76 | |||
64b3e3e41a | |||
a82f863e24 |
18
.bazelrc
Normal file
18
.bazelrc
Normal file
@ -0,0 +1,18 @@
|
||||
# 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
|
@ -7,25 +7,17 @@
|
||||
# To validate changes, use an online parser, eg.
|
||||
# http://yaml-online-parser.appspot.com/
|
||||
|
||||
# Variables
|
||||
|
||||
## IMPORTANT
|
||||
# If you change the `docker_image` version, also change the `cache_key` suffix and the version of
|
||||
# `com_github_bazelbuild_buildtools` in the `/WORKSPACE` file.
|
||||
var_1: &docker_image angular/ngcontainer:0.0.8
|
||||
var_2: &cache_key angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.0.8
|
||||
|
||||
# Settings common to each job
|
||||
anchor_1: &job_defaults
|
||||
working_directory: ~/ng
|
||||
docker:
|
||||
- image: *docker_image
|
||||
- image: angular/ngcontainer:0.0.2
|
||||
|
||||
# After checkout, rebase on top of master.
|
||||
# Similar to travis behavior, but not quite the same.
|
||||
# See https://discuss.circleci.com/t/1662
|
||||
anchor_2: &post_checkout
|
||||
post: git pull --ff-only origin "refs/pull/${CIRCLE_PULL_REQUEST//*pull\//}/merge"
|
||||
post: git pull --ff-only origin "refs/pull/${CI_PULL_REQUEST//*pull\//}/merge"
|
||||
|
||||
version: 2
|
||||
jobs:
|
||||
@ -34,13 +26,8 @@ jobs:
|
||||
steps:
|
||||
- checkout:
|
||||
<<: *post_checkout
|
||||
# Check BUILD.bazel formatting before we have a node_modules directory
|
||||
# Then we don't need any exclude pattern to avoid checking those files
|
||||
- run: 'buildifier -mode=check $(find . -type f \( -name BUILD.bazel -or -name BUILD \)) ||
|
||||
(echo "BUILD files not formatted. Please run ''yarn buildifier''" ; exit 1)'
|
||||
|
||||
- restore_cache:
|
||||
key: *cache_key
|
||||
key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
|
||||
- run: yarn install --frozen-lockfile --non-interactive
|
||||
- run: ./node_modules/.bin/gulp lint
|
||||
@ -51,17 +38,13 @@ jobs:
|
||||
- checkout:
|
||||
<<: *post_checkout
|
||||
- restore_cache:
|
||||
key: *cache_key
|
||||
|
||||
- run: bazel info release
|
||||
- run: bazel run @yarn//:yarn
|
||||
# Use bazel query so that we explicitly ask for all buildable targets to be built as well
|
||||
# This avoids waiting for a build command to finish before running the first test
|
||||
# See https://github.com/bazelbuild/bazel/issues/4257
|
||||
- run: bazel query --output=label '//packages/... union @angular//...' | xargs bazel test --config=ci
|
||||
key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
|
||||
- run: bazel run @yarn//:yarn
|
||||
- run: bazel build packages/...
|
||||
- run: bazel test @angular//...
|
||||
- save_cache:
|
||||
key: *cache_key
|
||||
key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
|
||||
paths:
|
||||
- "node_modules"
|
||||
|
||||
|
@ -22,9 +22,11 @@
|
||||
# petebacondarwin - Pete Bacon Darwin
|
||||
# pkozlowski-opensource - Pawel Kozlowski
|
||||
# robwormald - Rob Wormald
|
||||
# tbosch - Tobias Bosch
|
||||
# tinayuangao - Tina Gao
|
||||
# vicb - Victor Berchet
|
||||
# vikerman - Vikram Subramanian
|
||||
# wardbell - Ward Bell
|
||||
|
||||
|
||||
version: 2
|
||||
@ -43,7 +45,6 @@ groups:
|
||||
include:
|
||||
- "*"
|
||||
exclude:
|
||||
- ".circleci/*"
|
||||
- "aio/*"
|
||||
- "integration/*"
|
||||
- "modules/*"
|
||||
@ -73,7 +74,6 @@ groups:
|
||||
users:
|
||||
- alexeagle #primary
|
||||
- chuckjaz
|
||||
- IgorMinar
|
||||
- vikerman #fallback
|
||||
|
||||
build-and-ci:
|
||||
@ -100,6 +100,7 @@ groups:
|
||||
users:
|
||||
- alexeagle
|
||||
- mhevery
|
||||
- tbosch
|
||||
- vicb
|
||||
- IgorMinar #fallback
|
||||
|
||||
@ -108,7 +109,8 @@ groups:
|
||||
files:
|
||||
- "packages/core/*"
|
||||
users:
|
||||
- chuckjaz #primary
|
||||
- tbosch #primary
|
||||
- chuckjaz
|
||||
- mhevery
|
||||
- vicb
|
||||
- IgorMinar #fallback
|
||||
@ -130,7 +132,7 @@ groups:
|
||||
- "packages/compiler/src/i18n/*"
|
||||
users:
|
||||
- vicb #primary
|
||||
- chuckjaz
|
||||
- tbosch
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
|
||||
@ -139,8 +141,9 @@ groups:
|
||||
files:
|
||||
- "packages/compiler/*"
|
||||
users:
|
||||
- chuckjaz #primary
|
||||
- tbosch #primary
|
||||
- vicb
|
||||
- chuckjaz
|
||||
- mhevery
|
||||
- IgorMinar #fallback
|
||||
|
||||
@ -160,11 +163,12 @@ groups:
|
||||
- "packages/compiler-cli/*"
|
||||
- "packages/bazel/*"
|
||||
exclude:
|
||||
- "packages/compiler-cli/src/ngtools*"
|
||||
- "packages/compiler-cli/src/ngtools*"
|
||||
users:
|
||||
- alexeagle
|
||||
- chuckjaz
|
||||
- vicb
|
||||
- tbosch
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
|
||||
@ -208,7 +212,7 @@ groups:
|
||||
- "packages/language-service/*"
|
||||
users:
|
||||
- chuckjaz #primary
|
||||
# needs secondary
|
||||
- tbosch #secondary
|
||||
- vicb
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
@ -238,8 +242,8 @@ groups:
|
||||
files:
|
||||
- "packages/platform-browser/*"
|
||||
users:
|
||||
- vicb #primary
|
||||
# needs secondary
|
||||
- tbosch #primary
|
||||
- vicb #secondary
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
|
||||
@ -249,9 +253,9 @@ groups:
|
||||
- "packages/platform-server/*"
|
||||
users:
|
||||
- vikerman #primary
|
||||
# needs secondary
|
||||
- alxhub
|
||||
- vicb
|
||||
- tbosch
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
|
||||
@ -261,7 +265,7 @@ groups:
|
||||
- "packages/platform-webworker/*"
|
||||
users:
|
||||
- vicb #primary
|
||||
# needs secondary
|
||||
- tbosch #secondary
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
|
||||
@ -280,7 +284,7 @@ groups:
|
||||
files:
|
||||
- "packages/benchpress/*"
|
||||
users:
|
||||
# needs primary
|
||||
- tbosch #primary
|
||||
# needs secondary
|
||||
- IgorMinar #fallback
|
||||
- mhevery #fallback
|
||||
@ -311,6 +315,7 @@ groups:
|
||||
- juleskremer #primary
|
||||
- Foxandxss
|
||||
- stephenfluin
|
||||
- wardbell
|
||||
- petebacondarwin
|
||||
- gkalpak
|
||||
- IgorMinar #fallback
|
||||
|
@ -2,7 +2,7 @@ language: node_js
|
||||
sudo: false
|
||||
dist: trusty
|
||||
node_js:
|
||||
- '8.9.1'
|
||||
- '6.9.5'
|
||||
|
||||
addons:
|
||||
# firefox: "38.0"
|
||||
@ -54,6 +54,7 @@ env:
|
||||
- CI_MODE=browserstack_optional
|
||||
- CI_MODE=aio_tools_test
|
||||
- CI_MODE=aio
|
||||
- CI_MODE=aio_optional
|
||||
- CI_MODE=aio_e2e AIO_SHARD=0
|
||||
- CI_MODE=aio_e2e AIO_SHARD=1
|
||||
- CI_MODE=bazel
|
||||
@ -63,6 +64,7 @@ matrix:
|
||||
allow_failures:
|
||||
- env: "CI_MODE=saucelabs_optional"
|
||||
- env: "CI_MODE=browserstack_optional"
|
||||
- env: "CI_MODE=aio_optional"
|
||||
|
||||
before_install:
|
||||
# source the env.sh script so that the exported variables are available to other scripts later on
|
||||
|
15
BUILD.bazel
15
BUILD.bazel
@ -1,5 +1,4 @@
|
||||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
exports_files(["tsconfig.json"])
|
||||
|
||||
# This rule belongs in node_modules/BUILD
|
||||
@ -12,25 +11,17 @@ filegroup(
|
||||
# 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 [
|
||||
srcs = glob(["/".join(["node_modules", pkg, "**", ext]) for pkg in [
|
||||
"jasmine",
|
||||
"typescript",
|
||||
"zone.js",
|
||||
"tsutils",
|
||||
"@types/jasmine",
|
||||
"@types/node",
|
||||
"@types/source-map",
|
||||
"rxjs",
|
||||
"@types",
|
||||
"tsickle",
|
||||
"hammerjs",
|
||||
"protobufjs",
|
||||
"bytebuffer",
|
||||
"reflect-metadata",
|
||||
"source-map-support",
|
||||
"minimist",
|
||||
] for ext in [
|
||||
"*.js",
|
||||
|
233
CHANGELOG.md
233
CHANGELOG.md
@ -1,220 +1,3 @@
|
||||
<a name="5.2.0-beta.1"></a>
|
||||
# [5.2.0-beta.1](https://github.com/angular/angular/compare/5.2.0-beta.0...5.2.0-beta.1) (2017-12-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **compiler:** generate the correct imports for summary type-check ([d91ff17](https://github.com/angular/angular/commit/d91ff17))
|
||||
* **forms:** avoid producing an error with hostBindingTypeCheck ([d213a20](https://github.com/angular/angular/commit/d213a20))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **compiler:** allow ngIf to use the ngIf expression directly as a guard ([82bcd83](https://github.com/angular/angular/commit/82bcd83))
|
||||
* **router:** add "paramsInheritanceStrategy" router configuration option ([5efea2f](https://github.com/angular/angular/commit/5efea2f)), closes [#20572](https://github.com/angular/angular/issues/20572)
|
||||
|
||||
|
||||
|
||||
<a name="5.1.2"></a>
|
||||
## [5.1.2](https://github.com/angular/angular/compare/5.1.1...5.1.2) (2017-12-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **common:** fix a Closure compilation issue. ([267ebf3](https://github.com/angular/angular/commit/267ebf3))
|
||||
* **compiler:** make tsx file aot compatible ([756dd34](https://github.com/angular/angular/commit/756dd34)), closes [#20555](https://github.com/angular/angular/issues/20555)
|
||||
* **compiler:** report an error for recursive module references ([ced575f](https://github.com/angular/angular/commit/ced575f))
|
||||
* **compiler-cli:** do not emit invalid .metadata.json files ([a1d4c2d](https://github.com/angular/angular/commit/a1d4c2d))
|
||||
* **compiler-cli:** do not force type checking on .js files ([3b63e16](https://github.com/angular/angular/commit/3b63e16))
|
||||
* **service-worker:** check for updates on navigation ([a33182c](https://github.com/angular/angular/commit/a33182c)), closes [#20877](https://github.com/angular/angular/issues/20877)
|
||||
* **upgrade:** replaces get/setAngularLib with get/setAngularJSGlobal ([66cc2fa](https://github.com/angular/angular/commit/66cc2fa))
|
||||
|
||||
|
||||
|
||||
<a name="5.2.0-beta.0"></a>
|
||||
# [5.2.0-beta.0](https://github.com/angular/angular/compare/5.1.0...5.2.0-beta.0) (2017-12-13)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **animations:** re-introduce support for transition matching functions ([#20723](https://github.com/angular/angular/issues/20723)) ([590d93b](https://github.com/angular/angular/commit/590d93b)), closes [#18959](https://github.com/angular/angular/issues/18959)
|
||||
* **compiler:** add a pseudo $any() function to disable type checking ([#20876](https://github.com/angular/angular/issues/20876)) ([70cd124](https://github.com/angular/angular/commit/70cd124))
|
||||
* **compiler:** narrow types of expressions used in *ngIf ([#20702](https://github.com/angular/angular/issues/20702)) ([e7d9cb3](https://github.com/angular/angular/commit/e7d9cb3))
|
||||
* **core:** add source to `StaticInjectorError` message ([#20817](https://github.com/angular/angular/issues/20817)) ([b7738e1](https://github.com/angular/angular/commit/b7738e1)), closes [#19302](https://github.com/angular/angular/issues/19302)
|
||||
* **forms:** allow nulls on setAsyncValidators ([#20327](https://github.com/angular/angular/issues/20327)) ([d41d2c4](https://github.com/angular/angular/commit/d41d2c4)), closes [#20296](https://github.com/angular/angular/issues/20296)
|
||||
|
||||
|
||||
|
||||
<a name="5.1.1"></a>
|
||||
## [5.1.1](https://github.com/angular/angular/compare/5.1.0...5.1.1) (2017-12-13)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** ensure multi-level route leave animations are queryable ([#20787](https://github.com/angular/angular/issues/20787)) ([d09d497](https://github.com/angular/angular/commit/d09d497)), closes [#19807](https://github.com/angular/angular/issues/19807)
|
||||
* **animations:** ensure the web-animations driver properly handles empty keyframes ([#20648](https://github.com/angular/angular/issues/20648)) ([c3e8731](https://github.com/angular/angular/commit/c3e8731)), closes [#15858](https://github.com/angular/angular/issues/15858)
|
||||
* **animations:** properly recover and cleanup DOM when CD failures occur ([#20719](https://github.com/angular/angular/issues/20719)) ([e6a2805](https://github.com/angular/angular/commit/e6a2805)), closes [#19093](https://github.com/angular/angular/issues/19093)
|
||||
* **animations:** support webkit-based vendor prefixes for prop validations ([#19055](https://github.com/angular/angular/issues/19055)) ([501f01e](https://github.com/angular/angular/commit/501f01e)), closes [#18921](https://github.com/angular/angular/issues/18921)
|
||||
* **bazel:** don't equate moduleName with fileName ([#20895](https://github.com/angular/angular/issues/20895)) ([0c9f7b0](https://github.com/angular/angular/commit/0c9f7b0))
|
||||
* **compiler:** support referencing enums in namespaces ([#20947](https://github.com/angular/angular/issues/20947)) ([d6da798](https://github.com/angular/angular/commit/d6da798)), closes [#18170](https://github.com/angular/angular/issues/18170)
|
||||
* **compiler-cli:** disable checkTypes in emit. ([#20828](https://github.com/angular/angular/issues/20828)) ([160a154](https://github.com/angular/angular/commit/160a154))
|
||||
* **compiler-cli:** fix swallowed Error messages ([#20846](https://github.com/angular/angular/issues/20846)) ([6727336](https://github.com/angular/angular/commit/6727336))
|
||||
* **compiler-cli:** merge [@fileoverview](https://github.com/fileoverview) comments. ([#20870](https://github.com/angular/angular/issues/20870)) ([be9a737](https://github.com/angular/angular/commit/be9a737))
|
||||
* **router:** NavigatonError and NavigationCancel should be emitted after resetting the URL ([#20803](https://github.com/angular/angular/issues/20803)) ([baeec4d](https://github.com/angular/angular/commit/baeec4d))
|
||||
|
||||
|
||||
|
||||
<a name="5.1.0"></a>
|
||||
# [5.1.0](https://github.com/angular/angular/compare/5.1.0-rc.1...5.1.0) (2017-12-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** ensure DOM is cleaned up after multiple [@trigger](https://github.com/trigger) leave animations finish ([#20740](https://github.com/angular/angular/issues/20740)) ([b78ada1](https://github.com/angular/angular/commit/b78ada1)), closes [#20541](https://github.com/angular/angular/issues/20541)
|
||||
* **service-worker:** initialize in browser only ([#20782](https://github.com/angular/angular/issues/20782)) ([7cabaa0](https://github.com/angular/angular/commit/7cabaa0)), closes [#20360](https://github.com/angular/angular/issues/20360)
|
||||
* **service-worker:** esm2015 points to wrong path ([#20800](https://github.com/angular/angular/issues/20800)) ([da3563c](https://github.com/angular/angular/commit/da3563c))
|
||||
|
||||
|
||||
|
||||
<a name="5.1.0-rc.1"></a>
|
||||
# [5.1.0-rc.1](https://github.com/angular/angular/compare/5.1.0-rc.0...5.1.0-rc.1) (2017-12-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **compiler-cli:** propagate ts.SourceFile moduleName into metadata ([f841fbe](https://github.com/angular/angular/commit/f841fbe))
|
||||
* **service-worker:** allow disabling SW while still using services ([65f4fad](https://github.com/angular/angular/commit/65f4fad))
|
||||
* **service-worker:** don't crash if SW not supported ([b9a91a5](https://github.com/angular/angular/commit/b9a91a5))
|
||||
* **service-worker:** send initialization signal from the application ([3fbcde9](https://github.com/angular/angular/commit/3fbcde9))
|
||||
* **service-worker:** use relative path for ngsw.json ([f582620](https://github.com/angular/angular/commit/f582620))
|
||||
|
||||
|
||||
|
||||
<a name="5.0.5"></a>
|
||||
## [5.0.5](https://github.com/angular/angular/compare/5.0.4...5.0.5) (2017-12-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **compiler-cli:** propagate ts.SourceFile moduleName into metadata ([a2ff4ab](https://github.com/angular/angular/commit/a2ff4ab))
|
||||
* **service-worker:** allow disabling SW while still using services ([f99335b](https://github.com/angular/angular/commit/f99335b))
|
||||
* **service-worker:** don't crash if SW not supported ([ee37d4b](https://github.com/angular/angular/commit/ee37d4b))
|
||||
* **service-worker:** send initialization signal from the application ([6bf07b4](https://github.com/angular/angular/commit/6bf07b4))
|
||||
* **service-worker:** use relative path for ngsw.json ([56c98f7](https://github.com/angular/angular/commit/56c98f7))
|
||||
|
||||
|
||||
|
||||
<a name="5.1.0-rc.0"></a>
|
||||
# [5.1.0-rc.0](https://github.com/angular/angular/compare/5.1.0-beta.2...5.1.0-rc.0) (2017-12-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** ensure multi-level enter animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([dd6237e](https://github.com/angular/angular/commit/dd6237e))
|
||||
* **animations:** ensure multi-level enter animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([b2a586c](https://github.com/angular/angular/commit/b2a586c))
|
||||
* **animations:** ensure multi-level leave animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([1366762](https://github.com/angular/angular/commit/1366762))
|
||||
* **animations:** ensure multi-level leave animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([c2b3792](https://github.com/angular/angular/commit/c2b3792))
|
||||
* **bazel:** produce named AMD modules for codegen ([#20547](https://github.com/angular/angular/issues/20547)) ([6e83204](https://github.com/angular/angular/commit/6e83204)), closes [#19422](https://github.com/angular/angular/issues/19422)
|
||||
* **common:** accept falsy values as HTTP bodies ([#19958](https://github.com/angular/angular/issues/19958)) ([15a54df](https://github.com/angular/angular/commit/15a54df)), closes [#19825](https://github.com/angular/angular/issues/19825) [#19195](https://github.com/angular/angular/issues/19195)
|
||||
* **common:** don't strip XSSI prefix for if error isn't JSON ([#19958](https://github.com/angular/angular/issues/19958)) ([aafa75d](https://github.com/angular/angular/commit/aafa75d))
|
||||
* **common:** remove useless guard in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([eb01ad5](https://github.com/angular/angular/commit/eb01ad5)), closes [#19223](https://github.com/angular/angular/issues/19223)
|
||||
* **common:** treat an empty body as null when parsing JSON in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([503be69](https://github.com/angular/angular/commit/503be69)), closes [#18680](https://github.com/angular/angular/issues/18680) [#19413](https://github.com/angular/angular/issues/19413) [#19502](https://github.com/angular/angular/issues/19502) [#19555](https://github.com/angular/angular/issues/19555)
|
||||
* **compiler:** correctly detect when to serialze summary metadata ([#20668](https://github.com/angular/angular/issues/20668)) ([8bb42df](https://github.com/angular/angular/commit/8bb42df))
|
||||
* **compiler-cli:** fix memory leak in program creation ([#20692](https://github.com/angular/angular/issues/20692)) ([71e5de6](https://github.com/angular/angular/commit/71e5de6)), closes [#20691](https://github.com/angular/angular/issues/20691)
|
||||
* **compiler-cli:** normalize sourcepaths for i18n extracted files ([#20417](https://github.com/angular/angular/issues/20417)) ([de78307](https://github.com/angular/angular/commit/de78307)), closes [#20416](https://github.com/angular/angular/issues/20416)
|
||||
* **core:** should use native addEventListener in ngZone ([#20672](https://github.com/angular/angular/issues/20672)) ([65a2cb8](https://github.com/angular/angular/commit/65a2cb8))
|
||||
* **language-service:** Allow empty templates ([#20651](https://github.com/angular/angular/issues/20651)) ([3203069](https://github.com/angular/angular/commit/3203069)), closes [#19406](https://github.com/angular/angular/issues/19406)
|
||||
* **language-service:** Fix crash when no script files are found ([#20550](https://github.com/angular/angular/issues/20550)) ([54bfe14](https://github.com/angular/angular/commit/54bfe14)), closes [#19325](https://github.com/angular/angular/issues/19325)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **common:** add locale id parameter to `registerLocaleData` ([#20623](https://github.com/angular/angular/issues/20623)) ([24bf3e2](https://github.com/angular/angular/commit/24bf3e2))
|
||||
* **compiler-cli:** improve error messages produced during structural errors ([#20459](https://github.com/angular/angular/issues/20459)) ([8ecda94](https://github.com/angular/angular/commit/8ecda94))
|
||||
|
||||
|
||||
|
||||
<a name="5.0.4"></a>
|
||||
## [5.0.4](https://github.com/angular/angular/compare/5.0.3...5.0.4) (2017-12-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** ensure multi-level enter animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([22bbd6e](https://github.com/angular/angular/commit/22bbd6e))
|
||||
* **animations:** ensure multi-level leave animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([c7b211c](https://github.com/angular/angular/commit/c7b211c))
|
||||
* **common:** accept falsy values as HTTP bodies ([#19958](https://github.com/angular/angular/issues/19958)) ([66fd1f8](https://github.com/angular/angular/commit/66fd1f8)), closes [#19825](https://github.com/angular/angular/issues/19825) [#19195](https://github.com/angular/angular/issues/19195)
|
||||
* **common:** don't strip XSSI prefix for if error isn't JSON ([#19958](https://github.com/angular/angular/issues/19958)) ([ead7596](https://github.com/angular/angular/commit/ead7596))
|
||||
* **common:** remove useless guard in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([e099911](https://github.com/angular/angular/commit/e099911)), closes [#19223](https://github.com/angular/angular/issues/19223)
|
||||
* **common:** treat an empty body as null when parsing JSON in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([bdaee50](https://github.com/angular/angular/commit/bdaee50)), closes [#18680](https://github.com/angular/angular/issues/18680) [#19413](https://github.com/angular/angular/issues/19413) [#19502](https://github.com/angular/angular/issues/19502) [#19555](https://github.com/angular/angular/issues/19555)
|
||||
* **compiler-cli:** fix memory leak in program creation ([#20692](https://github.com/angular/angular/issues/20692)) ([38be44d](https://github.com/angular/angular/commit/38be44d)), closes [#20691](https://github.com/angular/angular/issues/20691)
|
||||
* **compiler-cli:** normalize sourcepaths for i18n extracted files ([#20417](https://github.com/angular/angular/issues/20417)) ([2b0c896](https://github.com/angular/angular/commit/2b0c896)), closes [#20416](https://github.com/angular/angular/issues/20416)
|
||||
|
||||
|
||||
|
||||
<a name="5.1.0-beta.2"></a>
|
||||
# [5.1.0-beta.2](https://github.com/angular/angular/compare/5.1.0-beta.1...5.1.0-beta.2) (2017-11-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([0e012c9](https://github.com/angular/angular/commit/0e012c9)), closes [#19100](https://github.com/angular/angular/issues/19100)
|
||||
* **animations:** always fire start and done callbacks in order for noop animations ([#20570](https://github.com/angular/angular/issues/20570)) ([ffb6dbe](https://github.com/angular/angular/commit/ffb6dbe))
|
||||
* **animations:** validate against trigger() names that use @ symbols ([#20326](https://github.com/angular/angular/issues/20326)) ([1861e41](https://github.com/angular/angular/commit/1861e41))
|
||||
* **benchpress:** Allow ignoring navigationStart events in perflog metric. ([#20312](https://github.com/angular/angular/issues/20312)) ([717ac5a](https://github.com/angular/angular/commit/717ac5a))
|
||||
* **common:** return ISubscription from Location.subscribe() ([#20429](https://github.com/angular/angular/issues/20429)) ([437a044](https://github.com/angular/angular/commit/437a044)), closes [#20406](https://github.com/angular/angular/issues/20406)
|
||||
* **compiler:** emit correct type-check-blocks with TemplateRef's ([#20463](https://github.com/angular/angular/issues/20463)) ([68b53c0](https://github.com/angular/angular/commit/68b53c0))
|
||||
* **compiler:** support event bindings in `fullTemplateTypeCheck` ([#20490](https://github.com/angular/angular/issues/20490)) ([4ed0439](https://github.com/angular/angular/commit/4ed0439))
|
||||
* **core:** fix [#20532](https://github.com/angular/angular/issues/20532), should be able to cancel listener from mixed zone ([#20538](https://github.com/angular/angular/issues/20538)) ([a740e4f](https://github.com/angular/angular/commit/a740e4f))
|
||||
* **core:** should support event.stopImmediatePropagation ([#20469](https://github.com/angular/angular/issues/20469)) ([997336b](https://github.com/angular/angular/commit/997336b))
|
||||
* **forms:** updateOn should check if change occurred ([#20358](https://github.com/angular/angular/issues/20358)) ([69c53c3](https://github.com/angular/angular/commit/69c53c3)), closes [#20259](https://github.com/angular/angular/issues/20259)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **platform-browser-dynamic:** export `JitCompilerFactory` ([#20478](https://github.com/angular/angular/issues/20478)) ([d7a727c](https://github.com/angular/angular/commit/d7a727c)), closes [#20125](https://github.com/angular/angular/issues/20125)
|
||||
|
||||
|
||||
|
||||
<a name="5.0.3"></a>
|
||||
## [5.0.3](https://github.com/angular/angular/compare/5.0.2...5.0.3) (2017-11-22)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([814f062](https://github.com/angular/angular/commit/814f062)), closes [#19100](https://github.com/angular/angular/issues/19100)
|
||||
* **animations:** validate against trigger() names that use @ symbols ([#20326](https://github.com/angular/angular/issues/20326)) ([15795d0](https://github.com/angular/angular/commit/15795d0))
|
||||
* **benchpress:** Allow ignoring navigationStart events in perflog metric. ([#20312](https://github.com/angular/angular/issues/20312)) ([9ca6ee9](https://github.com/angular/angular/commit/9ca6ee9))
|
||||
* **common:** return ISubscription from Location.subscribe() ([#20429](https://github.com/angular/angular/issues/20429)) ([bc904b1](https://github.com/angular/angular/commit/bc904b1)), closes [#20406](https://github.com/angular/angular/issues/20406)
|
||||
* **compiler:** emit correct type-check-blocks with TemplateRef's ([#20463](https://github.com/angular/angular/issues/20463)) ([81f1d42](https://github.com/angular/angular/commit/81f1d42))
|
||||
* **compiler:** support event bindings in `fullTemplateTypeCheck` ([#20490](https://github.com/angular/angular/issues/20490)) ([b53ead4](https://github.com/angular/angular/commit/b53ead4))
|
||||
* **core:** fix [#20532](https://github.com/angular/angular/issues/20532), should be able to cancel listener from mixed zone ([#20538](https://github.com/angular/angular/issues/20538)) ([0feba49](https://github.com/angular/angular/commit/0feba49))
|
||||
* **core:** should support event.stopImmediatePropagation ([#20469](https://github.com/angular/angular/issues/20469)) ([82aace6](https://github.com/angular/angular/commit/82aace6))
|
||||
* **forms:** updateOn should check if change occurred ([#20358](https://github.com/angular/angular/issues/20358)) ([f9f2c20](https://github.com/angular/angular/commit/f9f2c20)), closes [#20259](https://github.com/angular/angular/issues/20259)
|
||||
|
||||
|
||||
<a name="5.1.0-beta.1"></a>
|
||||
# [5.1.0-beta.1](https://github.com/angular/angular/compare/5.1.0-beta.0...5.1.0-beta.1) (2017-11-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([d47b2a6](https://github.com/angular/angular/commit/d47b2a6)), closes [#19100](https://github.com/angular/angular/issues/19100)
|
||||
* **animations:** ensure final state() styles are applied within @.disabled animations ([#20267](https://github.com/angular/angular/issues/20267)) ([20aafff](https://github.com/angular/angular/commit/20aafff)), closes [#20266](https://github.com/angular/angular/issues/20266)
|
||||
* **bazel:** adjust mock of tsconfig for ng_module rule unit test ([#20175](https://github.com/angular/angular/issues/20175)) ([c2a24b4](https://github.com/angular/angular/commit/c2a24b4))
|
||||
* **compiler:** fix corner cases in shadow CSS ([c32f5fd](https://github.com/angular/angular/commit/c32f5fd))
|
||||
* **compiler:** recognize @NgModule with a redundant @Injectable ([#20320](https://github.com/angular/angular/issues/20320)) ([c33a576](https://github.com/angular/angular/commit/c33a576))
|
||||
* **compiler:** show explanatory text in template errors ([#20313](https://github.com/angular/angular/issues/20313)) ([3257fcd](https://github.com/angular/angular/commit/3257fcd))
|
||||
* **core:** ensure init lifecycle events are called ([#20258](https://github.com/angular/angular/issues/20258)) ([24cf8b3](https://github.com/angular/angular/commit/24cf8b3))
|
||||
* **language-service:** pass compilerOptions.paths to ReflectorHost ([#20222](https://github.com/angular/angular/issues/20222)) ([eb8013e](https://github.com/angular/angular/commit/eb8013e))
|
||||
* **router:** 'merge' queryParamHandling strategy should be able to remove query params ([#19733](https://github.com/angular/angular/issues/19733)) ([a622e19](https://github.com/angular/angular/commit/a622e19)), closes [#18463](https://github.com/angular/angular/issues/18463) [#17202](https://github.com/angular/angular/issues/17202)
|
||||
* Update test code to type-check under TS 2.5 ([#20175](https://github.com/angular/angular/issues/20175)) ([5ec1717](https://github.com/angular/angular/commit/5ec1717))
|
||||
|
||||
### Features
|
||||
|
||||
* **typescript:** support TypeScript 2.5 ([a9f3e2b](https://github.com/angular/angular/commit/a9f3e2b)), closes [#20175](https://github.com/angular/angular/issues/20175)
|
||||
|
||||
> Note, if you do `Injector.get(Token)` where `Token` has static members, you'll run into https://github.com/Microsoft/TypeScript/issues/20102 where the returned type is `{}` rather than `Token`. Use `Injector.get<Token>(Token)` to work around.
|
||||
|
||||
<a name="5.0.2"></a>
|
||||
## [5.0.2](https://github.com/angular/angular/compare/5.0.1...5.0.2) (2017-11-16)
|
||||
|
||||
@ -228,22 +11,6 @@
|
||||
* **router:** 'merge' queryParamHandling strategy should be able to remove query params ([#19733](https://github.com/angular/angular/issues/19733)) ([b732fb9](https://github.com/angular/angular/commit/b732fb9)), closes [#18463](https://github.com/angular/angular/issues/18463) [#17202](https://github.com/angular/angular/issues/17202)
|
||||
|
||||
|
||||
<a name="5.1.0-beta.0"></a>
|
||||
# [5.1.0-beta.0](https://github.com/angular/angular/compare/5.0.0-rc.4...5.1.0-beta.0) (2017-11-08)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **compiler:** don't overwrite missingTranslation's value in JIT ([#19952](https://github.com/angular/angular/issues/19952)) ([799cbb9](https://github.com/angular/angular/commit/799cbb9))
|
||||
* **compiler:** report a reasonable error with invalid metadata ([#20062](https://github.com/angular/angular/issues/20062)) ([da22c48](https://github.com/angular/angular/commit/da22c48))
|
||||
* **compiler-cli:** don't report emit diagnostics when `--noEmitOnError` is off ([#20063](https://github.com/angular/angular/issues/20063)) ([8639995](https://github.com/angular/angular/commit/8639995))
|
||||
* **core:** `__symbol__` should return `__zone_symbol__` without zone.js loaded ([#19541](https://github.com/angular/angular/issues/19541)) ([678d1cf](https://github.com/angular/angular/commit/678d1cf))
|
||||
* **core:** should support event.stopImmediatePropagation ([#19222](https://github.com/angular/angular/issues/19222)) ([7083791](https://github.com/angular/angular/commit/7083791))
|
||||
* **platform-browser:** support Symbols in custom `jasmineToString()` method ([#19794](https://github.com/angular/angular/issues/19794)) ([5a6efa7](https://github.com/angular/angular/commit/5a6efa7))
|
||||
|
||||
### Features
|
||||
|
||||
* **compiler:** introduce `TestBed.overrideTemplateUsingTestingModule` ([a460066](https://github.com/angular/angular/commit/a460066)), closes [#19815](https://github.com/angular/angular/issues/19815)
|
||||
|
||||
|
||||
<a name="5.0.1"></a>
|
||||
## [5.0.1](https://github.com/angular/angular/compare/5.0.0...5.0.1) (2017-11-08)
|
||||
|
@ -69,37 +69,36 @@ You can file new issues by filling out our [new issue form](https://github.com/a
|
||||
### <a name="submit-pr"></a> Submitting a Pull Request (PR)
|
||||
Before you submit your Pull Request (PR) consider the following guidelines:
|
||||
|
||||
1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
|
||||
* Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
|
||||
that relates to your submission. You don't want to duplicate effort.
|
||||
1. Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
|
||||
* Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
|
||||
We cannot accept code without this.
|
||||
1. Fork the angular/angular repo.
|
||||
1. Make your changes in a new git branch:
|
||||
* Make your changes in a new git branch:
|
||||
|
||||
```shell
|
||||
git checkout -b my-fix-branch master
|
||||
```
|
||||
|
||||
1. Create your patch, **including appropriate test cases**.
|
||||
1. Follow our [Coding Rules](#rules).
|
||||
1. Run the full Angular test suite, as described in the [developer documentation][dev-doc],
|
||||
* Create your patch, **including appropriate test cases**.
|
||||
* Follow our [Coding Rules](#rules).
|
||||
* Run the full Angular test suite, as described in the [developer documentation][dev-doc],
|
||||
and ensure that all tests pass.
|
||||
1. Commit your changes using a descriptive commit message that follows our
|
||||
* Commit your changes using a descriptive commit message that follows our
|
||||
[commit message conventions](#commit). Adherence to these conventions
|
||||
is necessary because release notes are automatically generated from these messages.
|
||||
|
||||
```shell
|
||||
git commit -a
|
||||
```
|
||||
Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
|
||||
Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
|
||||
|
||||
1. Push your branch to GitHub:
|
||||
* Push your branch to GitHub:
|
||||
|
||||
```shell
|
||||
git push origin my-fix-branch
|
||||
```
|
||||
|
||||
1. In GitHub, send a pull request to `angular:master`.
|
||||
* In GitHub, send a pull request to `angular:master`.
|
||||
* If we suggest changes then:
|
||||
* Make the required updates.
|
||||
* Re-run the Angular test suites to ensure tests are still passing.
|
||||
|
41
WORKSPACE
41
WORKSPACE
@ -5,51 +5,20 @@ load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
|
||||
git_repository(
|
||||
name = "build_bazel_rules_nodejs",
|
||||
remote = "https://github.com/bazelbuild/rules_nodejs.git",
|
||||
tag = "0.3.1",
|
||||
# TODO(alexeagle): use the correct tag here.
|
||||
commit = "2c6243df53fd33fdab283ebdd01582e4eb815db8",
|
||||
)
|
||||
|
||||
load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
|
||||
load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
|
||||
|
||||
check_bazel_version("0.8.1")
|
||||
node_repositories(package_json = ["//:package.json"])
|
||||
|
||||
git_repository(
|
||||
local_repository(
|
||||
name = "build_bazel_rules_typescript",
|
||||
remote = "https://github.com/bazelbuild/rules_typescript.git",
|
||||
tag = "0.6.0",
|
||||
path = "node_modules/@bazel/typescript",
|
||||
)
|
||||
|
||||
load("@build_bazel_rules_typescript//:defs.bzl", "ts_repositories")
|
||||
|
||||
ts_repositories()
|
||||
|
||||
local_repository(
|
||||
name = "angular",
|
||||
path = "packages/bazel",
|
||||
)
|
||||
|
||||
local_repository(
|
||||
name = "rxjs",
|
||||
path = "node_modules/rxjs/src",
|
||||
)
|
||||
|
||||
git_repository(
|
||||
name = "com_github_bazelbuild_buildtools",
|
||||
remote = "https://github.com/bazelbuild/buildtools.git",
|
||||
# Note, this commit matches the version of buildifier in angular/ngcontainer
|
||||
# If you change this, also check if it matches the version in the angular/ngcontainer
|
||||
# version in /.circleci/config.yml
|
||||
commit = "b3b620e8bcff18ed3378cd3f35ebeb7016d71f71",
|
||||
)
|
||||
|
||||
http_archive(
|
||||
name = "io_bazel_rules_go",
|
||||
url = "https://github.com/bazelbuild/rules_go/releases/download/0.7.1/rules_go-0.7.1.tar.gz",
|
||||
sha256 = "341d5eacef704415386974bc82a1783a8b7ffbff2ab6ba02375e1ca20d9b031c",
|
||||
)
|
||||
|
||||
load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
|
||||
|
||||
go_rules_dependencies()
|
||||
|
||||
go_register_toolchains()
|
||||
|
@ -1,10 +1,9 @@
|
||||
<hr>
|
||||
<h4>{{hero.name}} Detail</h4>
|
||||
<div>Id: {{hero.id}}</div>
|
||||
<label>Name:
|
||||
<div>Name:
|
||||
<!-- #docregion ngModel -->
|
||||
<input [(ngModel)]="hero.name">
|
||||
<!-- #enddocregion ngModel -->
|
||||
</label>
|
||||
<br />
|
||||
<label>Power: <input [(ngModel)]="hero.power"></label>
|
||||
</div>
|
||||
<div>Power:<input [(ngModel)]="hero.power"></div>
|
||||
|
@ -7,7 +7,7 @@ import { TaxRateService } from './tax-rate.service';
|
||||
selector: 'app-sales-tax',
|
||||
template: `
|
||||
<h2>Sales Tax Calculator</h2>
|
||||
<label>Amount: <input #amountBox (change)="0"></label>
|
||||
Amount: <input #amountBox (change)="0">
|
||||
|
||||
<div *ngIf="amountBox.value">
|
||||
The sales tax is
|
||||
|
@ -1,14 +1,14 @@
|
||||
<!-- #docregion -->
|
||||
<h1>My First Attribute Directive</h1>
|
||||
<!-- #docregion applied -->
|
||||
<p appHighlight>Highlight me!</p>
|
||||
<p appHightlight>Highlight me!</p>
|
||||
<!-- #enddocregion applied, -->
|
||||
|
||||
<!-- #docregion color-1 -->
|
||||
<p appHighlight highlightColor="yellow">Highlighted in yellow</p>
|
||||
<p appHighlight [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 appHighlight [highlightColor]="color">Highlighted with parent component's color</p>
|
||||
<p appHightlight [highlightColor]="color">Highlighted with parent component's color</p>
|
||||
<!-- #enddocregion color-2 -->
|
||||
|
@ -5,7 +5,7 @@
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[0,1,2].*",
|
||||
"!**/dummy.module.ts"
|
||||
"**/dummy.module.ts"
|
||||
],
|
||||
"tags": ["dependency", "di"]
|
||||
}
|
||||
|
@ -2,6 +2,5 @@
|
||||
import { registerLocaleData } from '@angular/common';
|
||||
import localeFr from '@angular/common/locales/fr';
|
||||
|
||||
// the second parameter 'fr' is optional
|
||||
registerLocaleData(localeFr, 'fr');
|
||||
registerLocaleData(localeFr);
|
||||
// #enddocregion import-locale
|
||||
|
@ -1,7 +1,7 @@
|
||||
// #docregion import-locale-extra
|
||||
import { registerLocaleData } from '@angular/common';
|
||||
import localeFr from '@angular/common/locales/fr';
|
||||
import localeFrExtra from '@angular/common/locales/extra/fr';
|
||||
import localeFrCa from '@angular/common/locales/fr-CA';
|
||||
import localeFrCaExtra from '@angular/common/locales/extra/fr-CA';
|
||||
|
||||
registerLocaleData(localeFr, 'fr-FR', localeFrExtra);
|
||||
registerLocaleData(localeFrCa, localeFrCaExtra);
|
||||
// #enddocregion import-locale-extra
|
||||
|
@ -93,20 +93,22 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
|
||||
|
||||
<h4>-- AfterContent Logs --</h4>
|
||||
<p><button (click)="reset()">Reset</button></p>
|
||||
<div *ngFor="let msg of logger.logs">{{msg}}</div>
|
||||
<div *ngFor="let msg of logs">{{msg}}</div>
|
||||
</div>
|
||||
`,
|
||||
styles: ['.parent {background: burlywood}'],
|
||||
providers: [LoggerService]
|
||||
})
|
||||
export class AfterContentParentComponent {
|
||||
logs: string[];
|
||||
show = true;
|
||||
|
||||
constructor(public logger: LoggerService) {
|
||||
constructor(private logger: LoggerService) {
|
||||
this.logs = logger.logs;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.logger.clear();
|
||||
this.logs.length = 0;
|
||||
// quickly remove and reload AfterContentComponent which recreates it
|
||||
this.show = false;
|
||||
this.logger.tick_then(() => this.show = true);
|
||||
|
@ -95,20 +95,22 @@ export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
|
||||
|
||||
<h4>-- AfterView Logs --</h4>
|
||||
<p><button (click)="reset()">Reset</button></p>
|
||||
<div *ngFor="let msg of logger.logs">{{msg}}</div>
|
||||
<div *ngFor="let msg of logs">{{msg}}</div>
|
||||
</div>
|
||||
`,
|
||||
styles: ['.parent {background: burlywood}'],
|
||||
providers: [LoggerService]
|
||||
})
|
||||
export class AfterViewParentComponent {
|
||||
logs: string[];
|
||||
show = true;
|
||||
|
||||
constructor(public logger: LoggerService) {
|
||||
constructor(private logger: LoggerService) {
|
||||
this.logs = logger.logs;
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.logger.clear();
|
||||
this.logs.length = 0;
|
||||
// quickly remove and reload AfterViewComponent which recreates it
|
||||
this.show = false;
|
||||
this.logger.tick_then(() => this.show = true);
|
||||
|
@ -27,7 +27,7 @@ export class MyCounterComponent implements OnChanges {
|
||||
// Empty the changeLog whenever counter goes to zero
|
||||
// hint: this is a way to respond programmatically to external value changes.
|
||||
if (this.counter === 0) {
|
||||
this.changeLog = [];
|
||||
this.changeLog.length = 0;
|
||||
}
|
||||
|
||||
// A change to `counter` is the only change we care about
|
||||
|
@ -68,7 +68,7 @@ export class DoCheckComponent implements DoCheck {
|
||||
|
||||
reset() {
|
||||
this.changeDetected = true;
|
||||
this.changeLog = [];
|
||||
this.changeLog.length = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -18,7 +18,7 @@ export class LoggerService {
|
||||
}
|
||||
}
|
||||
|
||||
clear() { this.logs = []; }
|
||||
clear() { this.logs.length = 0; }
|
||||
|
||||
// schedules a view refresh to ensure display catches up
|
||||
tick() { this.tick_then(() => { }); }
|
||||
|
@ -43,7 +43,7 @@ export class OnChangesComponent implements OnChanges {
|
||||
}
|
||||
// #enddocregion ng-on-changes
|
||||
|
||||
reset() { this.changeLog = []; }
|
||||
reset() { this.changeLog.length = 0; }
|
||||
}
|
||||
|
||||
/***************************************/
|
||||
|
@ -12,5 +12,5 @@
|
||||
</div>
|
||||
<!-- #enddocregion template -->
|
||||
<h4>-- Spy Lifecycle Hook Log --</h4>
|
||||
<div *ngFor="let msg of logger.logs">{{msg}}</div>
|
||||
<div *ngFor="let msg of spyLog">{{msg}}</div>
|
||||
</div>
|
||||
|
@ -15,8 +15,10 @@ import { LoggerService } from './logger.service';
|
||||
export class SpyParentComponent {
|
||||
newName = 'Herbie';
|
||||
heroes: string[] = ['Windstorm', 'Magneta'];
|
||||
spyLog: string[];
|
||||
|
||||
constructor(public logger: LoggerService) {
|
||||
constructor(private logger: LoggerService) {
|
||||
this.spyLog = logger.logs;
|
||||
}
|
||||
|
||||
addHero() {
|
||||
@ -32,7 +34,7 @@ export class SpyParentComponent {
|
||||
}
|
||||
reset() {
|
||||
this.logger.log('-- reset --');
|
||||
this.heroes = [];
|
||||
this.heroes.length = 0;
|
||||
this.logger.tick();
|
||||
}
|
||||
}
|
||||
|
@ -14,7 +14,7 @@
|
||||
"app/contact/contact.component.html",
|
||||
"app/contact/contact.component.3.ts",
|
||||
"app/contact/contact.service.ts",
|
||||
"app/contact/contact-highlight.directive.ts",
|
||||
"app/contact/highlight.directive.ts",
|
||||
|
||||
"main.1b.ts",
|
||||
"styles.css",
|
||||
|
@ -16,7 +16,7 @@
|
||||
"app/contact/awesome.pipe.ts",
|
||||
"app/contact/contact.component.3.ts",
|
||||
"app/contact/contact.module.2.ts",
|
||||
"app/contact/contact-highlight.directive.ts",
|
||||
"app/contact/highlight.directive.ts",
|
||||
|
||||
"main.2.ts",
|
||||
"styles.css",
|
||||
|
@ -15,7 +15,7 @@ describe('NgModule', function () {
|
||||
|
||||
return {
|
||||
title: element.all(by.tagName('h1')).get(0),
|
||||
welcome: element.all(by.css('app-title p i')).get(0),
|
||||
subtitle: element.all(by.css('app-title p i')).get(0),
|
||||
contactButton: buttons.get(0),
|
||||
crisisButton: buttons.get(1),
|
||||
heroesButton: buttons.get(2)
|
||||
@ -67,7 +67,7 @@ describe('NgModule', function () {
|
||||
|
||||
it('should welcome us', function () {
|
||||
const commons = getCommonsSectionStruct();
|
||||
expect(commons.welcome.getText()).toBe('Welcome, ' + (name || 'Sherlock Holmes'));
|
||||
expect(commons.subtitle.getText()).toBe('Welcome, ' + (name || 'Sherlock Holmes'));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
@ -19,7 +19,7 @@
|
||||
"app/contact/contact.component.3.ts",
|
||||
"app/contact/contact.module.3.ts",
|
||||
"app/contact/contact-routing.module.3.ts",
|
||||
"app/contact/contact-highlight.directive.ts",
|
||||
"app/contact/highlight.directive.ts",
|
||||
|
||||
"app/crisis/*.ts",
|
||||
|
||||
|
@ -1,19 +1,14 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ContactModule } from './contact/contact.module.3';
|
||||
|
||||
const routes: Routes = [
|
||||
export const routes: Routes = [
|
||||
{ path: '', redirectTo: 'contact', pathMatch: 'full'},
|
||||
{ path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
|
||||
{ path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ContactModule,
|
||||
RouterModule.forRoot(routes)
|
||||
],
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
|
@ -2,29 +2,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ContactModule } from './contact/contact.module';
|
||||
|
||||
// #docregion routes
|
||||
const routes: Routes = [
|
||||
export const routes: Routes = [
|
||||
{ path: '', redirectTo: 'contact', pathMatch: 'full'},
|
||||
// #docregion lazy-routes
|
||||
// #docregion lazy-routes
|
||||
{ path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
|
||||
{ path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
|
||||
// #enddocregion lazy-routes
|
||||
// #enddocregion lazy-routes
|
||||
];
|
||||
// #enddocregion routes
|
||||
|
||||
// #docregion forRoot
|
||||
@NgModule({
|
||||
// #docregion imports
|
||||
imports: [
|
||||
ContactModule,
|
||||
// #docregion forRoot
|
||||
RouterModule.forRoot(routes),
|
||||
// #enddocregion forRoot
|
||||
],
|
||||
// #enddocregion imports
|
||||
// #docregion exports
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
// #enddocregion exports
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
// #enddocregion forRoot
|
||||
|
@ -6,5 +6,5 @@ import { Component } from '@angular/core';
|
||||
template: '<h1>{{title}}</h1>',
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'Angular Modules';
|
||||
title = 'Minimal NgModule';
|
||||
}
|
||||
|
@ -11,7 +11,9 @@ import { Component } from '@angular/core';
|
||||
// #enddocregion template
|
||||
*/
|
||||
// #docregion
|
||||
template: '<app-title></app-title>'
|
||||
template: '<app-title [subtitle]="subtitle"></app-title>'
|
||||
})
|
||||
export class AppComponent {}
|
||||
export class AppComponent {
|
||||
subtitle = '(v1)';
|
||||
}
|
||||
// #enddocregion
|
||||
|
@ -5,9 +5,11 @@ import { Component } from '@angular/core';
|
||||
selector: 'app-root',
|
||||
// #docregion template
|
||||
template: `
|
||||
<app-title></app-title>
|
||||
<app-title [subtitle]="subtitle"></app-title>
|
||||
<app-contact></app-contact>
|
||||
`
|
||||
// #enddocregion template
|
||||
})
|
||||
export class AppComponent {}
|
||||
export class AppComponent {
|
||||
subtitle = '(v1)';
|
||||
}
|
||||
|
@ -3,8 +3,10 @@ import { Component } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<app-title></app-title>
|
||||
<app-title [subtitle]="subtitle"></app-title>
|
||||
<app-contact></app-contact>
|
||||
`
|
||||
})
|
||||
export class AppComponent {}
|
||||
export class AppComponent {
|
||||
subtitle = '(v2)';
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ import { Component } from '@angular/core';
|
||||
selector: 'app-root',
|
||||
// #docregion template
|
||||
template: `
|
||||
<app-title></app-title>
|
||||
<app-title [subtitle]="subtitle"></app-title>
|
||||
<nav>
|
||||
<a routerLink="contact" routerLinkActive="active">Contact</a>
|
||||
<a routerLink="crisis" routerLinkActive="active">Crisis Center</a>
|
||||
@ -14,4 +14,6 @@ import { Component } from '@angular/core';
|
||||
`
|
||||
// #enddocregion template
|
||||
})
|
||||
export class AppComponent {}
|
||||
export class AppComponent {
|
||||
subtitle = '(v3)';
|
||||
}
|
||||
|
@ -5,7 +5,7 @@ import { Component } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<app-title></app-title>
|
||||
<app-title [subtitle]="subtitle"></app-title>
|
||||
<nav>
|
||||
<a routerLink="contact" routerLinkActive="active">Contact</a>
|
||||
<a routerLink="crisis" routerLinkActive="active">Crisis Center</a>
|
||||
@ -14,4 +14,6 @@ import { Component } from '@angular/core';
|
||||
<router-outlet></router-outlet>
|
||||
`
|
||||
})
|
||||
export class AppComponent {}
|
||||
export class AppComponent {
|
||||
subtitle = '(Final)';
|
||||
}
|
||||
|
@ -1,7 +1,17 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppComponent } from './app.component.0';
|
||||
import
|
||||
// #enddocregion
|
||||
{ AppComponent } from './app.component.0';
|
||||
/*
|
||||
// #docregion
|
||||
{ AppComponent } from './app.component';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
|
||||
@NgModule({
|
||||
// #docregion imports
|
||||
|
@ -1,15 +1,14 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
/* Angular Imports */
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
/* App Imports */
|
||||
import
|
||||
// #enddocregion
|
||||
import { AppComponent } from './app.component.1';
|
||||
{ AppComponent } from './app.component.1';
|
||||
/*
|
||||
// #docregion
|
||||
import { AppComponent } from './app.component';
|
||||
{ AppComponent } from './app.component';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
@ -22,9 +21,12 @@ import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { AwesomePipe } from './contact/awesome.pipe';
|
||||
import { ContactComponent } from './contact/contact.component.3';
|
||||
|
||||
// #docregion import-contact-directive
|
||||
import {
|
||||
ContactHighlightDirective as ContactHighlightDirective
|
||||
} from './contact/contact-highlight.directive';
|
||||
HighlightDirective as ContactHighlightDirective
|
||||
} from './contact/highlight.directive';
|
||||
// #enddocregion import-contact-directive
|
||||
|
||||
@NgModule({
|
||||
// #docregion imports
|
||||
|
@ -1,16 +1,15 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
/* Angular Imports */
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
/* App Imports */
|
||||
/* App Root */
|
||||
import
|
||||
// #enddocregion
|
||||
import { AppComponent } from './app.component.1b';
|
||||
{ AppComponent } from './app.component.1b';
|
||||
/*
|
||||
// #docregion
|
||||
import { AppComponent } from './app.component';
|
||||
{ AppComponent } from './app.component';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
@ -19,17 +18,25 @@ import { TitleComponent } from './title.component';
|
||||
import { UserService } from './user.service';
|
||||
|
||||
/* Contact Imports */
|
||||
import
|
||||
// #enddocregion
|
||||
import { ContactComponent } from './contact/contact.component.3';
|
||||
{ ContactComponent } from './contact/contact.component.3';
|
||||
/*
|
||||
// #docregion
|
||||
import { ContactComponent } from './contact/contact.component';
|
||||
{ ContactComponent } from './contact/contact.component';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
import { AwesomePipe } from './contact/awesome.pipe';
|
||||
import { ContactService } from './contact/contact.service';
|
||||
import { ContactHighlightDirective } from './contact/contact-highlight.directive';
|
||||
import { ContactService } from './contact/contact.service';
|
||||
import { AwesomePipe } from './contact/awesome.pipe';
|
||||
|
||||
// #docregion import-alias
|
||||
import {
|
||||
HighlightDirective as ContactHighlightDirective
|
||||
} from './contact/highlight.directive';
|
||||
// #enddocregion import-alias
|
||||
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@NgModule({
|
||||
imports: [ BrowserModule, FormsModule ],
|
||||
|
@ -1,15 +1,15 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
/* Angular Imports */
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
/* App Imports */
|
||||
/* App Root */
|
||||
import
|
||||
// #enddocregion
|
||||
import { AppComponent } from './app.component.2';
|
||||
{ AppComponent } from './app.component.2';
|
||||
/*
|
||||
// #docregion
|
||||
import { AppComponent } from './app.component';
|
||||
{ AppComponent } from './app.component';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
@ -18,11 +18,12 @@ import { TitleComponent } from './title.component';
|
||||
import { UserService } from './user.service';
|
||||
|
||||
/* Contact Imports */
|
||||
import
|
||||
// #enddocregion
|
||||
import { ContactModule } from './contact/contact.module.2';
|
||||
{ ContactModule } from './contact/contact.module.2';
|
||||
/*
|
||||
// #docregion
|
||||
import { ContactModule } from './contact/contact.module';
|
||||
{ ContactModule } from './contact/contact.module';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
|
@ -1,36 +1,25 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
/* Angular Imports */
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
/* App Imports */
|
||||
// #enddocregion
|
||||
/* App Root */
|
||||
import { AppComponent } from './app.component.3';
|
||||
/*
|
||||
// #docregion
|
||||
import { AppComponent } from './app.component';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
import { HighlightDirective } from './highlight.directive';
|
||||
import { TitleComponent } from './title.component';
|
||||
import { UserService } from './user.service';
|
||||
|
||||
/* Feature Modules */
|
||||
import { ContactModule } from './contact/contact.module.3';
|
||||
|
||||
/* Routing Module */
|
||||
// #enddocregion
|
||||
import { AppRoutingModule } from './app-routing.module.3';
|
||||
/*
|
||||
// #docregion
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
|
||||
@NgModule({
|
||||
// #docregion imports
|
||||
imports: [
|
||||
BrowserModule,
|
||||
ContactModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
// #enddocregion imports
|
||||
|
@ -1,14 +1,14 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion v4
|
||||
/* Angular Imports */
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
/* App Imports */
|
||||
/* App Root */
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
/* Core Modules */
|
||||
/* Feature Modules */
|
||||
import { ContactModule } from './contact/contact.module';
|
||||
import { CoreModule } from './core/core.module';
|
||||
|
||||
/* Routing Module */
|
||||
@ -18,6 +18,7 @@ import { AppRoutingModule } from './app-routing.module';
|
||||
// #docregion import-for-root
|
||||
imports: [
|
||||
BrowserModule,
|
||||
ContactModule,
|
||||
// #enddocregion v4
|
||||
// #enddocregion import-for-root
|
||||
/*
|
||||
|
@ -3,12 +3,10 @@ import { RouterModule } from '@angular/router';
|
||||
|
||||
import { ContactComponent } from './contact.component.3';
|
||||
|
||||
const routes = [
|
||||
{ path: 'contact', component: ContactComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [ RouterModule.forChild(routes) ],
|
||||
exports: [ RouterModule ]
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: 'contact', component: ContactComponent}
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ContactRoutingModule {}
|
||||
|
@ -4,13 +4,11 @@ import { RouterModule } from '@angular/router';
|
||||
import { ContactComponent } from './contact.component';
|
||||
|
||||
// #docregion routing
|
||||
const routes = [
|
||||
{ path: 'contact', component: ContactComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [ RouterModule.forChild(routes) ],
|
||||
exports: [ RouterModule ]
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: 'contact', component: ContactComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ContactRoutingModule {}
|
||||
// #enddocregion
|
||||
|
@ -21,7 +21,7 @@ export class ContactComponent implements OnInit {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.contactService.getContacts().subscribe(contacts => {
|
||||
this.contactService.getContacts().then(contacts => {
|
||||
this.msg = '';
|
||||
this.contacts = contacts;
|
||||
this.contact = contacts[0];
|
||||
|
@ -27,6 +27,3 @@
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
@ -6,32 +6,18 @@
|
||||
<!-- #docregion awesome -->
|
||||
<h3 highlight>{{ contact.name | awesome }}</h3>
|
||||
<!-- #enddocregion awesome -->
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
|
||||
<!-- #docregion ngModel -->
|
||||
<input type="text" class="form-control" required
|
||||
[(ngModel)]="contact.name"
|
||||
name="name" #name="ngModel" >
|
||||
<!-- #enddocregion ngModel -->
|
||||
|
||||
name="name" #name="ngModel" >
|
||||
<div [hidden]="name.valid" class="alert alert-danger">
|
||||
Name is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button type="submit" class="btn btn-default"
|
||||
[disabled]="!contactForm.form.valid">
|
||||
Save</button>
|
||||
|
||||
<button type="button" class="btn" (click)="next()"
|
||||
[disabled]="!contactForm.form.valid">
|
||||
Next Contact</button>
|
||||
|
||||
<button type="button" class="btn" (click)="newContact()">
|
||||
New Contact</button>
|
||||
</div>
|
||||
<br>
|
||||
<button type="submit" class="btn btn-default" [disabled]="!contactForm.form.valid">Save</button>
|
||||
<button type="button" class="btn" (click)="next()" [disabled]="!contactForm.form.valid">Next Contact</button>
|
||||
<button type="button" class="btn" (click)="newContact()">New Contact</button>
|
||||
</form>
|
||||
<!-- #enddocregion -->
|
||||
|
@ -22,7 +22,7 @@ export class ContactComponent implements OnInit {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.contactService.getContacts().subscribe(contacts => {
|
||||
this.contactService.getContacts().then(contacts => {
|
||||
this.msg = '';
|
||||
this.contacts = contacts;
|
||||
this.contact = contacts[0];
|
||||
|
@ -1,11 +0,0 @@
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule
|
||||
],
|
||||
declarations: []
|
||||
})
|
||||
export class ContactModule { }
|
@ -5,32 +5,25 @@ import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { AwesomePipe } from './awesome.pipe';
|
||||
|
||||
import
|
||||
// #enddocregion
|
||||
import { ContactComponent } from './contact.component.3';
|
||||
{ ContactComponent } from './contact.component.3';
|
||||
/*
|
||||
// #docregion
|
||||
import { ContactComponent } from './contact.component';
|
||||
{ ContactComponent } from './contact.component';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
import { ContactHighlightDirective } from './contact-highlight.directive';
|
||||
import { ContactService } from './contact.service';
|
||||
import { HighlightDirective } from './highlight.directive';
|
||||
|
||||
// #docregion class
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule
|
||||
],
|
||||
declarations: [
|
||||
AwesomePipe,
|
||||
ContactComponent,
|
||||
ContactHighlightDirective
|
||||
],
|
||||
// #docregion exports
|
||||
exports: [ ContactComponent ],
|
||||
// #enddocregion exports
|
||||
providers: [ ContactService ]
|
||||
imports: [ CommonModule, FormsModule ],
|
||||
declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
|
||||
exports: [ ContactComponent ],
|
||||
providers: [ ContactService ]
|
||||
})
|
||||
export class ContactModule { }
|
||||
// #enddocregion class
|
||||
|
@ -1,43 +1,21 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { AwesomePipe } from './awesome.pipe';
|
||||
// #enddocregion
|
||||
import { ContactComponent } from './contact.component.3';
|
||||
/*
|
||||
// #docregion
|
||||
import { ContactComponent } from './contact.component';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
import { ContactHighlightDirective } from './contact-highlight.directive';
|
||||
import { ContactService } from './contact.service';
|
||||
|
||||
// #enddocregion
|
||||
import { ContactComponent } from './contact.component.3';
|
||||
import { ContactService } from './contact.service';
|
||||
import { HighlightDirective } from './highlight.directive';
|
||||
|
||||
import { ContactRoutingModule } from './contact-routing.module.3';
|
||||
/*
|
||||
// #docregion
|
||||
import { ContactRoutingModule } from './contact-routing.module';
|
||||
// #enddocregion
|
||||
*/
|
||||
// #docregion
|
||||
|
||||
// #docregion class
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ContactRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
AwesomePipe,
|
||||
ContactComponent,
|
||||
ContactHighlightDirective
|
||||
],
|
||||
providers: [ ContactService ]
|
||||
imports: [ CommonModule, FormsModule, ContactRoutingModule ],
|
||||
declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
|
||||
providers: [ ContactService ]
|
||||
})
|
||||
export class ContactModule { }
|
||||
// #enddocregion class
|
||||
|
@ -8,10 +8,7 @@ import { ContactRoutingModule } from './contact-routing.module';
|
||||
|
||||
// #docregion class
|
||||
@NgModule({
|
||||
imports: [
|
||||
SharedModule,
|
||||
ContactRoutingModule
|
||||
],
|
||||
imports: [ SharedModule, ContactRoutingModule ],
|
||||
declarations: [ ContactComponent ],
|
||||
providers: [ ContactService ]
|
||||
})
|
||||
|
@ -1,10 +1,5 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Injectable, OnDestroy } from '@angular/core';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import { delay } from 'rxjs/operators';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
export class Contact {
|
||||
constructor(public id: number, public name: string) { }
|
||||
@ -18,21 +13,17 @@ const CONTACTS: Contact[] = [
|
||||
|
||||
const FETCH_LATENCY = 500;
|
||||
|
||||
/** Simulate a data service that retrieves contacts from a server */
|
||||
@Injectable()
|
||||
export class ContactService implements OnDestroy {
|
||||
// #enddocregion
|
||||
constructor() { console.log('ContactService instance created.'); }
|
||||
ngOnDestroy() { console.log('ContactService instance destroyed.'); }
|
||||
export class ContactService {
|
||||
|
||||
// #docregion
|
||||
getContacts(): Observable<Contact[]> {
|
||||
return of(CONTACTS).pipe(delay(FETCH_LATENCY));
|
||||
getContacts() {
|
||||
return new Promise<Contact[]>(resolve => {
|
||||
setTimeout(() => { resolve(CONTACTS); }, FETCH_LATENCY);
|
||||
});
|
||||
}
|
||||
|
||||
getContact(id: number | string): Observable<Contact> {
|
||||
return of(CONTACTS.find(contact => contact.id === +id))
|
||||
.pipe(delay(FETCH_LATENCY));
|
||||
getContact(id: number | string) {
|
||||
return this.getContacts()
|
||||
.then(heroes => heroes.find(hero => hero.id === +id));
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
@ -1,4 +1,4 @@
|
||||
// #docplaster
|
||||
/* tslint:disable */
|
||||
// Same directive name and selector as
|
||||
// HighlightDirective in parent AppModule
|
||||
// It selects for both input boxes and 'highlight' attr
|
||||
@ -7,14 +7,12 @@
|
||||
// #docregion
|
||||
import { Directive, ElementRef } from '@angular/core';
|
||||
|
||||
// Highlight the host element or any InputElement in blue
|
||||
@Directive({ selector: '[highlight], input' })
|
||||
export class ContactHighlightDirective {
|
||||
/** Highlight the attached element or an InputElement in blue */
|
||||
export class HighlightDirective {
|
||||
constructor(el: ElementRef) {
|
||||
el.nativeElement.style.backgroundColor = 'powderblue';
|
||||
// #enddocregion
|
||||
console.log(`* Contact highlight called for ${el.nativeElement.tagName}`);
|
||||
// #docregion
|
||||
console.log(
|
||||
`* Contact highlight called for ${el.nativeElement.tagName}`);
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
@ -1,5 +1,5 @@
|
||||
<!-- Exact copy from earlier app.component.html -->
|
||||
<h1 highlight>{{title}}</h1>
|
||||
<h1 highlight>{{title}} {{subtitle}}</h1>
|
||||
<p *ngIf="user">
|
||||
<i>Welcome, {{user}}</i>
|
||||
<p>
|
||||
|
@ -7,6 +7,7 @@ import { UserService } from '../core/user.service';
|
||||
templateUrl: './title.component.html',
|
||||
})
|
||||
export class TitleComponent {
|
||||
@Input() subtitle = '';
|
||||
title = 'Angular Modules';
|
||||
user = '';
|
||||
|
||||
|
@ -1,21 +1,22 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Crisis,
|
||||
CrisisService } from './crisis.service';
|
||||
CrisisService } from './crisis.service';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<h3 highlight>Crisis List</h3>
|
||||
<div *ngFor='let crisis of crises | async'>
|
||||
<div *ngFor='let crisis of crisises | async'>
|
||||
<a routerLink="{{'../' + crisis.id}}">{{crisis.id}} - {{crisis.name}}</a>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class CrisisListComponent {
|
||||
crises: Observable<Crisis[]>;
|
||||
export class CrisisListComponent implements OnInit {
|
||||
crisises: Promise<Crisis[]>;
|
||||
|
||||
constructor(private crisisService: CrisisService) {
|
||||
this.crises = this.crisisService.getCrises();
|
||||
constructor(private crisisService: CrisisService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.crisises = this.crisisService.getCrises();
|
||||
}
|
||||
}
|
||||
|
@ -1,8 +1,4 @@
|
||||
import { Injectable, OnDestroy } from '@angular/core';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import { delay } from 'rxjs/operators';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
export class Crisis {
|
||||
constructor(public id: number, public name: string) { }
|
||||
@ -17,18 +13,18 @@ const CRISES: Crisis[] = [
|
||||
|
||||
const FETCH_LATENCY = 500;
|
||||
|
||||
/** Simulate a data service that retrieves crises from a server */
|
||||
@Injectable()
|
||||
export class CrisisService implements OnDestroy {
|
||||
constructor() { console.log('CrisisService instance created.'); }
|
||||
ngOnDestroy() { console.log('CrisisService instance destroyed.'); }
|
||||
export class CrisisService {
|
||||
|
||||
getCrises(): Observable<Crisis[]> {
|
||||
return of(CRISES).pipe(delay(FETCH_LATENCY));
|
||||
getCrises() {
|
||||
return new Promise<Crisis[]>(resolve => {
|
||||
setTimeout(() => { resolve(CRISES); }, FETCH_LATENCY);
|
||||
});
|
||||
}
|
||||
|
||||
getCrisis(id: number | string): Observable<Crisis> {
|
||||
return of(CRISES.find(crisis => crisis.id === +id))
|
||||
.pipe(delay(FETCH_LATENCY));
|
||||
getCrisis(id: number | string) {
|
||||
return this.getCrises()
|
||||
.then(heroes => heroes.find(hero => hero.id === +id));
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -26,6 +26,6 @@ export class HeroDetailComponent implements OnInit {
|
||||
|
||||
ngOnInit() {
|
||||
let id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
|
||||
this.heroService.getHero(id).subscribe(hero => this.hero = hero);
|
||||
this.heroService.getHero(id).then(hero => this.hero = hero);
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,4 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Hero,
|
||||
HeroService } from './hero.service';
|
||||
@ -12,9 +11,11 @@ import { Hero,
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class HeroListComponent {
|
||||
heroes: Observable<Hero[]>;
|
||||
constructor(private heroService: HeroService) {
|
||||
export class HeroListComponent implements OnInit {
|
||||
heroes: Promise<Hero[]>;
|
||||
constructor(private heroService: HeroService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.heroes = this.heroService.getHeroes();
|
||||
}
|
||||
}
|
||||
|
@ -5,9 +5,8 @@ import { FormsModule } from '@angular/forms';
|
||||
import { HeroComponent } from './hero.component.3';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
import { HeroListComponent } from './hero-list.component';
|
||||
import { HeroRoutingModule } from './hero-routing.module.3';
|
||||
|
||||
import { HighlightDirective } from './highlight.directive';
|
||||
import { HeroRoutingModule } from './hero-routing.module.3';
|
||||
|
||||
// #docregion class
|
||||
@NgModule({
|
||||
|
@ -1,8 +1,4 @@
|
||||
import { Injectable, OnDestroy } from '@angular/core';
|
||||
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { of } from 'rxjs/observable/of';
|
||||
import { delay } from 'rxjs/operators';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
export class Hero {
|
||||
constructor(public id: number, public name: string) { }
|
||||
@ -19,19 +15,18 @@ const HEROES: Hero[] = [
|
||||
|
||||
const FETCH_LATENCY = 500;
|
||||
|
||||
/** Simulate a data service that retrieves heroes from a server */
|
||||
@Injectable()
|
||||
export class HeroService implements OnDestroy {
|
||||
export class HeroService {
|
||||
|
||||
constructor() { console.log('HeroService instance created.'); }
|
||||
ngOnDestroy() { console.log('HeroService instance destroyed.'); }
|
||||
|
||||
getHeroes(): Observable<Hero[]> {
|
||||
return of(HEROES).pipe(delay(FETCH_LATENCY));
|
||||
getHeroes() {
|
||||
return new Promise<Hero[]>(resolve => {
|
||||
setTimeout(() => { resolve(HEROES); }, FETCH_LATENCY);
|
||||
});
|
||||
}
|
||||
|
||||
getHero(id: number | string): Observable<Hero> {
|
||||
return of(HEROES.find(hero => hero.id === +id))
|
||||
.pipe(delay(FETCH_LATENCY));
|
||||
getHero(id: number | string) {
|
||||
return this.getHeroes()
|
||||
.then(heroes => heroes.find(hero => hero.id === +id));
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1,15 +1,12 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
import { Directive, ElementRef } from '@angular/core';
|
||||
|
||||
// Highlight the host element in gold
|
||||
@Directive({ selector: '[highlight]' })
|
||||
/** Highlight the attached element in gold */
|
||||
export class HighlightDirective {
|
||||
constructor(el: ElementRef) {
|
||||
el.nativeElement.style.backgroundColor = 'gold';
|
||||
// #enddocregion
|
||||
console.log(`* AppRoot highlight called for ${el.nativeElement.tagName}`);
|
||||
// #docregion
|
||||
console.log(
|
||||
`* AppRoot highlight called for ${el.nativeElement.tagName}`);
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
@ -1,8 +1,9 @@
|
||||
/* tslint:disable */
|
||||
// Exact copy of contact/highlight.directive except for color and message
|
||||
import { Directive, ElementRef } from '@angular/core';
|
||||
|
||||
@Directive({ selector: '[highlight], input' })
|
||||
// Highlight the host element or any InputElement in gray
|
||||
/** Highlight the attached element or an InputElement in gray */
|
||||
export class HighlightDirective {
|
||||
constructor(el: ElementRef) {
|
||||
el.nativeElement.style.backgroundColor = 'lightgray';
|
||||
|
@ -1,6 +1,6 @@
|
||||
<!-- #docregion -->
|
||||
<!-- #docregion v1 -->
|
||||
<h1 highlight>{{title}}</h1>
|
||||
<h1 highlight>{{title}} {{subtitle}}</h1>
|
||||
<!-- #enddocregion v1 -->
|
||||
<!-- #docregion ngIf -->
|
||||
<p *ngIf="user">
|
||||
|
@ -1,17 +1,18 @@
|
||||
// #docplaster
|
||||
// #docregion
|
||||
// #docregion v1
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, Input } from '@angular/core';
|
||||
// #enddocregion v1
|
||||
import { UserService } from './user.service';
|
||||
// #docregion v1
|
||||
|
||||
@Component({
|
||||
selector: 'app-title',
|
||||
templateUrl: './title.component.html'
|
||||
templateUrl: './title.component.html',
|
||||
})
|
||||
export class TitleComponent {
|
||||
title = 'Angular Modules';
|
||||
@Input() subtitle = '';
|
||||
title = 'NgModules';
|
||||
// #enddocregion v1
|
||||
user = '';
|
||||
|
||||
|
@ -5,6 +5,17 @@
|
||||
<title>NgModule Minimal</title>
|
||||
<meta charset="UTF-8">
|
||||
<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.0.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -5,6 +5,17 @@
|
||||
<title>NgModule Minimal</title>
|
||||
<meta charset="UTF-8">
|
||||
<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.1.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -5,6 +5,17 @@
|
||||
<title>NgModule Minimal</title>
|
||||
<meta charset="UTF-8">
|
||||
<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.1b.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -5,6 +5,17 @@
|
||||
<title>NgModule Minimal</title>
|
||||
<meta charset="UTF-8">
|
||||
<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.2.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -5,6 +5,17 @@
|
||||
<title>NgModule Minimal</title>
|
||||
<meta charset="UTF-8">
|
||||
<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.3.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -5,17 +5,13 @@
|
||||
"styles.css",
|
||||
|
||||
"app/app.component.ts",
|
||||
"app/app.component.html",
|
||||
"app/app.component.css",
|
||||
"app/app.module.ts",
|
||||
"app/data-model.ts",
|
||||
"app/hero.service.ts",
|
||||
"app/hero-detail/hero-detail.component.html",
|
||||
"app/hero-detail/hero-detail.component.ts",
|
||||
"app/hero-detail/hero-detail.component.css",
|
||||
"app/hero-list/hero-list.component.html",
|
||||
"app/hero-list/hero-list.component.ts",
|
||||
"app/hero-list/hero-list.component.css",
|
||||
"app/hero-detail.component.html",
|
||||
"app/hero-detail.component.ts",
|
||||
"app/hero-list.component.html",
|
||||
"app/hero-list.component.ts",
|
||||
|
||||
"main-final.ts",
|
||||
"index-final.html"
|
||||
|
@ -6,6 +6,18 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('main-final.js').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -1,44 +0,0 @@
|
||||
import { AppPage } from './app.po';
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
|
||||
describe('sw-example App', () => {
|
||||
let page: AppPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new AppPage();
|
||||
});
|
||||
|
||||
it('should display welcome message', () => {
|
||||
page.navigateTo();
|
||||
expect(page.getParagraphText()).toEqual('Welcome to Service Workers!');
|
||||
});
|
||||
|
||||
it('should display the Angular logo', () => {
|
||||
let logo = element(by.css('img'));
|
||||
page.navigateTo();
|
||||
expect(logo.isPresent()).toBe(true);
|
||||
});
|
||||
|
||||
it('should show a header for the list of links', () => {
|
||||
const listHeader = element(by.css('app-root > h2'));
|
||||
expect(listHeader.getText()).toEqual('Here are some links to help you start:');
|
||||
});
|
||||
|
||||
it('should show a list of links', function () {
|
||||
element.all(by.css('ul > li > h2 > a')).then((items) => {
|
||||
expect(items.length).toBe(4);
|
||||
expect(items[0].getText()).toBe('Angular Service Worker Intro');
|
||||
expect(items[1].getText()).toBe('Tour of Heroes');
|
||||
expect(items[2].getText()).toBe('CLI Documentation');
|
||||
expect(items[3].getText()).toBe('Angular blog');
|
||||
});
|
||||
});
|
||||
// Check for a rejected promise as the service worker is not enabled
|
||||
it('SwUpdate.checkForUpdate() should return a rejected promise', () => {
|
||||
const button = element(by.css('button'));
|
||||
const rejectMessage = element(by.css('p'));
|
||||
button.click();
|
||||
expect(rejectMessage.getText()).toContain('rejected: ');
|
||||
});
|
||||
});
|
@ -1,50 +0,0 @@
|
||||
{
|
||||
"name": "angular.io-example",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^5.0.0",
|
||||
"@angular/common": "^5.0.0",
|
||||
"@angular/compiler": "^5.0.0",
|
||||
"@angular/core": "^5.0.0",
|
||||
"@angular/forms": "^5.0.0",
|
||||
"@angular/http": "^5.0.0",
|
||||
"@angular/service-worker": "^5.0.0",
|
||||
"@angular/platform-browser": "^5.0.0",
|
||||
"@angular/platform-browser-dynamic": "^5.0.0",
|
||||
"@angular/router": "^5.0.0",
|
||||
"core-js": "^2.4.1",
|
||||
"rxjs": "^5.5.2",
|
||||
"zone.js": "^0.8.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.5.4",
|
||||
"@angular/compiler-cli": "^5.0.0",
|
||||
"@angular/language-service": "^5.0.0",
|
||||
"@types/jasmine": "~2.5.53",
|
||||
"@types/jasminewd2": "~2.0.2",
|
||||
"@types/node": "~6.0.60",
|
||||
"codelyzer": "^4.0.1",
|
||||
"jasmine-core": "~2.6.2",
|
||||
"jasmine-spec-reporter": "~4.1.0",
|
||||
"karma": "~1.7.0",
|
||||
"karma-chrome-launcher": "~2.1.1",
|
||||
"karma-cli": "~1.0.1",
|
||||
"karma-coverage-istanbul-reporter": "^1.2.1",
|
||||
"karma-jasmine": "~1.1.0",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"protractor": "~5.1.2",
|
||||
"ts-node": "~3.2.0",
|
||||
"tslint": "~5.7.0",
|
||||
"typescript": "~2.4.2"
|
||||
}
|
||||
}
|
@ -1,5 +0,0 @@
|
||||
{
|
||||
"description": "Service Worker",
|
||||
"basePath": "src/",
|
||||
"tags": ["service worker"]
|
||||
}
|
@ -1,27 +0,0 @@
|
||||
<!--The content below is only a placeholder and can be replaced.-->
|
||||
<div style="text-align:center">
|
||||
<h1>
|
||||
Welcome to {{title}}!
|
||||
</h1>
|
||||
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
|
||||
</div>
|
||||
|
||||
<button id="check" (click)="updateCheck()">Check for Update</button>
|
||||
<p id="checkResult">{{updateCheckText}}</p>
|
||||
|
||||
<h2>Here are some links to help you start: </h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://angular.io/service-worker-intro">Angular Service Worker Intro</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -1,27 +0,0 @@
|
||||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
}));
|
||||
it('should create the app', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
it(`should have as title 'app'`, async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('Service Workers');
|
||||
}));
|
||||
it('should render title in a h1 tag', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Welcome to Service Workers!');
|
||||
}));
|
||||
});
|
@ -1,20 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { SwUpdate } from '@angular/service-worker';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'Service Workers';
|
||||
updateCheckText = '';
|
||||
|
||||
constructor(private update: SwUpdate) {}
|
||||
|
||||
updateCheck(): void {
|
||||
this.update
|
||||
.checkForUpdate()
|
||||
.then(() => this.updateCheckText = 'resolved')
|
||||
.catch(err => this.updateCheckText = `rejected: ${err.message}`);
|
||||
}
|
||||
}
|
@ -1,31 +0,0 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
// #docregion sw-import
|
||||
import { ServiceWorkerModule } from '@angular/service-worker';
|
||||
import { environment } from '../environments/environment';
|
||||
// #enddocregion sw-import
|
||||
|
||||
import { CheckForUpdateService } from './check-for-update.service';
|
||||
import { LogUpdateService } from './log-update.service';
|
||||
import { PromptUpdateService } from './prompt-update.service';
|
||||
|
||||
// #docregion sw-module
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
|
||||
],
|
||||
providers: [
|
||||
CheckForUpdateService,
|
||||
LogUpdateService,
|
||||
PromptUpdateService,
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
// #enddocregion sw-module
|
@ -1,15 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { SwUpdate } from '@angular/service-worker';
|
||||
|
||||
|
||||
// #docregion sw-check-update
|
||||
import { interval } from 'rxjs/observable/interval';
|
||||
|
||||
@Injectable()
|
||||
export class CheckForUpdateService {
|
||||
|
||||
constructor(updates: SwUpdate) {
|
||||
interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate());
|
||||
}
|
||||
}
|
||||
// #enddocregion sw-check-update
|
@ -1,19 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { SwUpdate } from '@angular/service-worker';
|
||||
|
||||
// #docregion sw-update
|
||||
@Injectable()
|
||||
export class LogUpdateService {
|
||||
|
||||
constructor(updates: SwUpdate) {
|
||||
updates.available.subscribe(event => {
|
||||
console.log('current version is', event.current);
|
||||
console.log('available version is', event.available);
|
||||
});
|
||||
updates.activated.subscribe(event => {
|
||||
console.log('old version was', event.previous);
|
||||
console.log('new version is', event.current);
|
||||
});
|
||||
}
|
||||
}
|
||||
// #enddocregion sw-update
|
@ -1,20 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { SwUpdate } from '@angular/service-worker';
|
||||
|
||||
function promptUser(event): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
// #docregion sw-activate
|
||||
@Injectable()
|
||||
export class PromptUpdateService {
|
||||
|
||||
constructor(updates: SwUpdate) {
|
||||
updates.available.subscribe(event => {
|
||||
if (promptUser(event)) {
|
||||
updates.activateUpdate().then(() => document.location.reload());
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// #enddocregion sw-activate
|
@ -1,12 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>SwExample</title>
|
||||
<base href="/">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
@ -1,12 +0,0 @@
|
||||
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)
|
||||
.catch(err => console.log(err));
|
@ -1,28 +0,0 @@
|
||||
|
||||
{
|
||||
"index": "/index.html",
|
||||
"assetGroups": [{
|
||||
"name": "app",
|
||||
"installMode": "prefetch",
|
||||
"resources": {
|
||||
"files": [
|
||||
"/favicon.ico",
|
||||
"/index.html"
|
||||
],
|
||||
"versionedFiles": [
|
||||
"/*.bundle.css",
|
||||
"/*.bundle.js",
|
||||
"/*.chunk.js"
|
||||
]
|
||||
}
|
||||
}, {
|
||||
"name": "assets",
|
||||
"installMode": "lazy",
|
||||
"updateMode": "prefetch",
|
||||
"resources": {
|
||||
"files": [
|
||||
"/assets/**"
|
||||
]
|
||||
}
|
||||
}]
|
||||
}
|
@ -37,7 +37,7 @@ describe('Structural Directives', function () {
|
||||
expect(paragraph.count()).toEqual(1);
|
||||
});
|
||||
|
||||
it('appUnless should show 3 paragraph (A)s and (B)s at the start', function () {
|
||||
it('myUnless should show 3 paragraph (A)s and (B)s at the start', function () {
|
||||
const paragraph = element.all(by.css('p.unless'));
|
||||
expect(paragraph.count()).toEqual(3);
|
||||
for (let i = 0; i < 3; i++) {
|
||||
@ -45,7 +45,7 @@ describe('Structural Directives', function () {
|
||||
}
|
||||
});
|
||||
|
||||
it('appUnless should show 1 paragraph (B) after toggling condition', function () {
|
||||
it('myUnless should show 1 paragraph (B) after toggling condition', function () {
|
||||
const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0);
|
||||
const paragraph = element.all(by.css('p.unless'));
|
||||
|
||||
|
@ -6,7 +6,7 @@
|
||||
|
||||
<blockquote>
|
||||
<!-- #docregion built-in, asterisk, ngif -->
|
||||
<div *ngIf="hero" class="name">{{hero.name}}</div>
|
||||
<div *ngIf="hero" >{{hero.name}}</div>
|
||||
<!-- #enddocregion built-in, asterisk, ngif -->
|
||||
</blockquote>
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
<p><ng-template> element</p>
|
||||
<!-- #docregion ngif-template -->
|
||||
<ng-template [ngIf]="hero">
|
||||
<div class="name">{{hero.name}}</div>
|
||||
<div>{{hero.name}}</div>
|
||||
</ng-template>
|
||||
<!-- #enddocregion ngif-template -->
|
||||
|
||||
@ -188,7 +188,7 @@
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 id="appUnless">UnlessDirective</h2>
|
||||
<h2 id="myUnless">UnlessDirective</h2>
|
||||
<p>
|
||||
The condition is currently
|
||||
<span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
|
||||
@ -198,31 +198,31 @@
|
||||
Toggle condition to {{condition ? 'false' : 'true'}}
|
||||
</button>
|
||||
</p>
|
||||
<!-- #docregion appUnless-->
|
||||
<!-- #docregion myUnless-->
|
||||
<p *appUnless="condition" class="unless a">
|
||||
(A) This paragraph is displayed because the condition is false.
|
||||
</p>
|
||||
|
||||
<p *appUnless="!condition" class="unless b">
|
||||
(B) Although the condition is true,
|
||||
this paragraph is displayed because appUnless is set to false.
|
||||
this paragraph is displayed because myUnless is set to false.
|
||||
</p>
|
||||
<!-- #enddocregion appUnless-->
|
||||
<!-- #enddocregion myUnless-->
|
||||
|
||||
|
||||
<h4>UnlessDirective with template</h4>
|
||||
|
||||
<!-- #docregion appUnless-1 -->
|
||||
<!-- #docregion myUnless-1 -->
|
||||
<p *appUnless="condition">Show this sentence unless the condition is true.</p>
|
||||
<!-- #enddocregion appUnless-1 -->
|
||||
<!-- #enddocregion myUnless-1 -->
|
||||
|
||||
<p *appUnless="condition" class="code unless">
|
||||
(A) <p *appUnless="condition" class="code unless">
|
||||
(A) <p *myUnless="condition" class="code unless">
|
||||
</p>
|
||||
|
||||
<ng-template [appUnless]="condition">
|
||||
<p class="code unless">
|
||||
(A) <ng-template [appUnless]="condition">
|
||||
(A) <ng-template [myUnless]="condition">
|
||||
</p>
|
||||
</ng-template>
|
||||
|
||||
|
@ -8,7 +8,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
|
||||
* Add the template content to the DOM unless the condition is true.
|
||||
// #enddocregion no-docs
|
||||
*
|
||||
* If the expression assigned to `appUnless` evaluates to a truthy value
|
||||
* If the expression assigned to `myUnless` evaluates to a truthy value
|
||||
* then the templated elements are removed removed from the DOM,
|
||||
* the templated elements are (re)inserted into the DOM.
|
||||
*
|
||||
@ -18,8 +18,8 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
|
||||
*
|
||||
* ### Syntax
|
||||
*
|
||||
* - `<div *appUnless="condition">...</div>`
|
||||
* - `<ng-template [appUnless]="condition"><div>...</div></ng-template>`
|
||||
* - `<div *myUnless="condition">...</div>`
|
||||
* - `<ng-template [myUnless]="condition"><div>...</div></ng-template>`
|
||||
*
|
||||
// #docregion no-docs
|
||||
*/
|
||||
|
@ -9,6 +9,6 @@ export class MessageService {
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.messages = [];
|
||||
this.messages.length = 0;
|
||||
}
|
||||
}
|
||||
|
@ -9,6 +9,6 @@ export class MessageService {
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.messages = [];
|
||||
this.messages.length = 0;
|
||||
}
|
||||
}
|
||||
|
@ -9,6 +9,6 @@ export class MessageService {
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.messages = [];
|
||||
this.messages.length = 0;
|
||||
}
|
||||
}
|
||||
|
@ -9,6 +9,6 @@ export class MessageService {
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.messages = [];
|
||||
this.messages.length = 0;
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase _before_ the browser downloads and runs that code.
|
||||
|
||||
This guide explains how to build with the AOT compiler and how to write Angular metadata that AOT can compile.
|
||||
This guide explains how to to build with the AOT compiler and how to write Angular metadata that AOT can compile.
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
@ -409,7 +409,7 @@ function; it can only contain a single `return` statement.
|
||||
|
||||
The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
|
||||
Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
|
||||
for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodule).
|
||||
for these methods to see how macros can simplify configuration of complex Angular modules.
|
||||
|
||||
### Metadata rewriting
|
||||
|
||||
|
@ -179,7 +179,7 @@ to a component's `@Component` decorator:
|
||||
<code-tabs>
|
||||
<code-pane title="src/app/hero-app.component.ts (CSS in file)" path="component-styles/src/app/hero-app.component.1.ts"></code-pane>
|
||||
<code-pane title="src/app/hero-app.component.css" path="component-styles/src/app/hero-app.component.1.css"></code-pane>
|
||||
</code-tabs>
|
||||
</code-tabs>
|
||||
|
||||
<div class="alert is-critical">
|
||||
|
||||
@ -245,8 +245,7 @@ See the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-
|
||||
|
||||
### Non-CSS style files
|
||||
|
||||
If you're building with the CLI,
|
||||
you can write style files in [sass](http://sass-lang.com/), [less](http://lesscss.org/), or [stylus](http://stylus-lang.com/) and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`, `.styl`) as in the following example:
|
||||
You can write style files in [sass](http://sass-lang.com/), [less](http://lesscss.org/), or [stylus](http://stylus-lang.com/) and specify those files in the `styleUrls` metadata, e.g.,
|
||||
|
||||
<code-example>
|
||||
@Component({
|
||||
@ -257,18 +256,10 @@ you can write style files in [sass](http://sass-lang.com/), [less](http://lesscs
|
||||
...
|
||||
</code-example>
|
||||
|
||||
The CLI build process runs the pertinent CSS preprocessor.
|
||||
The CLI build process runs the corresponding CSS pre-processors.
|
||||
|
||||
When generating a component file with `ng generate component`, the CLI emits an empty CSS styles file (`.css`) by default.
|
||||
You can configure the CLI to default to your preferred CSS preprocessor
|
||||
as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
|
||||
"CSS Preprocessor integration").
|
||||
|
||||
<div class="alert is-important">
|
||||
|
||||
Style strings added to the `@Component.styles` array _must be written in CSS_ because the CLI cannot apply a preprocessor to inline styles.
|
||||
|
||||
</div>
|
||||
You can also configure the CLI to default to your preferred CSS pre-processer
|
||||
as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors).
|
||||
|
||||
{@a view-encapsulation}
|
||||
|
||||
|
@ -160,7 +160,7 @@ Providing the `UserService` with an Angular module is a good choice.
|
||||
<div class="l-sub-section">
|
||||
|
||||
To be precise, Angular module providers are registered with the root injector
|
||||
_unless the module is_ [lazy loaded](guide/ngmodule#lazy-load-DI).
|
||||
_unless the module is_ [lazy loaded](guide/ngmodule#lazy-load).
|
||||
In this sample, all modules are _eagerly loaded_ when the application starts,
|
||||
so all module providers are registered with the app's root injector.
|
||||
|
||||
|
@ -8,6 +8,7 @@ See the <live-example downloadOnly name="i18n">i18n Example</live-example> for a
|
||||
an AOT-compiled app, translated into French.
|
||||
|
||||
{@a angular-i18n}
|
||||
|
||||
## Angular and i18n
|
||||
|
||||
Angular simplifies the following aspects of internationalization:
|
||||
@ -61,23 +62,6 @@ For more information about Unicode locale identifiers, see the
|
||||
For a complete list of locales supported by Angular, see
|
||||
[the Angular repository](https://github.com/angular/angular/tree/master/packages/common/locales).
|
||||
|
||||
The locale identifiers used by CLDR and Angular are based on [BCP47](http://www.rfc-editor.org/rfc/bcp/bcp47.txt).
|
||||
These specifications change over time; the following table maps previous identifiers to current ones at
|
||||
time of writing:
|
||||
|
||||
| Locale name | Old locale id | New locale id |
|
||||
|-------------------------------|-------------------|---------------|
|
||||
| Indonesian | in | id |
|
||||
| Hebrew | iw | he |
|
||||
| Romanian Moldova | mo | ro-MD |
|
||||
| Norwegian Bokmål | no, no-NO | nb |
|
||||
| Serbian Latin | sh | sr-Latn |
|
||||
| Filipino | tl | fil |
|
||||
| Portuguese Brazil | pt-BR | pt |
|
||||
| Chinese Simplified | zh-cn, zh-Hans-CN | zh-Hans |
|
||||
| Chinese Traditional | zh-tw, zh-Hant-TW | zh-Hant |
|
||||
| Chinese Traditional Hong Kong | zh-hk | zh-Hant-HK |
|
||||
|
||||
|
||||
## i18n pipes
|
||||
|
||||
@ -94,14 +78,6 @@ If you want to import locale data for other languages, you can do it manually:
|
||||
<code-example path="i18n/doc-files/app.locale_data.ts" region="import-locale" title="src/app/app.module.ts" linenums="false">
|
||||
</code-example>
|
||||
|
||||
The first parameter is an object containing the locale data imported from `@angular/common/locales`.
|
||||
By default, the imported locale data is registered with the locale id that is defined in the Angular
|
||||
locale data itself.
|
||||
If you want to register the imported locale data with another locale id, use the second parameter to
|
||||
specify a custom locale id. For example, Angular's locale data defines the locale id for French as
|
||||
"fr". You can use the second parameter to associate the imported French locale data with the custom
|
||||
locale id "fr-FR" instead of "fr".
|
||||
|
||||
The files in `@angular/common/locales` contain most of the locale data that you
|
||||
need, but some advanced formatting options might only be available in the extra dataset that you can
|
||||
import from `@angular/common/locales/extra`. An error message informs you when this is the case.
|
||||
@ -142,6 +118,7 @@ in the target language.
|
||||
You need to build and deploy a separate version of the app for each supported language.
|
||||
|
||||
{@a i18n-attribute}
|
||||
|
||||
### Mark text with the i18n attribute
|
||||
|
||||
The Angular `i18n` attribute marks translatable content. Place it on every element tag whose fixed
|
||||
@ -167,6 +144,7 @@ To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag
|
||||
|
||||
|
||||
{@a help-translator}
|
||||
|
||||
### Help the translator with a description and meaning
|
||||
|
||||
To translate a text message accurately, the translator may need additional information or context.
|
||||
@ -197,6 +175,7 @@ text messages with different descriptions (not different meanings), then they ar
|
||||
|
||||
|
||||
{@a custom-id}
|
||||
|
||||
### Set a custom id for persistence and maintenance
|
||||
|
||||
The angular i18n extractor tool generates a file with a translation unit entry for each `i18n`
|
||||
@ -271,6 +250,7 @@ the same text, `Bonjour`:
|
||||
|
||||
|
||||
{@a no-element}
|
||||
|
||||
### Translate text without creating an element
|
||||
|
||||
If there is a section of text that you would like to translate, you can wrap it in a `<span>` tag.
|
||||
@ -282,6 +262,7 @@ The `<ng-container>` is transformed into an html comment:
|
||||
</code-example>
|
||||
|
||||
{@a translate-attributes}
|
||||
|
||||
## Add i18n translation attributes
|
||||
|
||||
You also can translate attributes.
|
||||
@ -305,6 +286,7 @@ You also can assign a meaning, description, and id with the `i18n-x="<meaning>|<
|
||||
syntax.
|
||||
|
||||
{@a plural-ICU}
|
||||
|
||||
## Translate singular and plural
|
||||
|
||||
Different languages have different pluralization rules.
|
||||
@ -360,6 +342,7 @@ for two, three, or any other number if the pluralization rules were different. F
|
||||
</div>
|
||||
|
||||
{@a select-ICU}
|
||||
|
||||
## Select among alternative text messages
|
||||
|
||||
If your template needs to display different text messages depending on the value of a variable, you
|
||||
@ -377,6 +360,7 @@ The message maps those values to the appropriate translations:
|
||||
</code-example>
|
||||
|
||||
{@a nesting-ICUS}
|
||||
|
||||
## Nesting plural and select ICU expressions
|
||||
|
||||
You can also nest different ICU expressions together, as shown in this example:
|
||||
@ -385,6 +369,7 @@ You can also nest different ICU expressions together, as shown in this example:
|
||||
</code-example>
|
||||
|
||||
{@a ng-xi18n}
|
||||
|
||||
## Create a translation source file with _ng xi18n_
|
||||
|
||||
Use the `ng xi18n` command provided by the CLI to extract the text messages marked with `i18n` into
|
||||
@ -409,6 +394,7 @@ package, or you can manually use the CLI Webpack plugin `ExtractI18nPlugin` from
|
||||
</div>
|
||||
|
||||
{@a other-formats}
|
||||
|
||||
### Other translation formats
|
||||
|
||||
Angular i18n tooling supports three translation formats:
|
||||
@ -436,6 +422,7 @@ The sample in this guide uses the default XLIFF 1.2 format.
|
||||
</div>
|
||||
|
||||
{@a ng-xi18n-options}
|
||||
|
||||
### Other options
|
||||
|
||||
You can specify the output path used by the CLI to extract your translation source file with
|
||||
@ -469,6 +456,7 @@ file. This information is not used by Angular, but external translation tools ma
|
||||
|
||||
|
||||
{@a translate}
|
||||
|
||||
## Translate text messages
|
||||
|
||||
The `ng xi18n` command generates a translation source file named `messages.xlf` in the project `src`
|
||||
@ -478,6 +466,7 @@ The next step is to translate this source file into the specific language
|
||||
translation files. The example in this guide creates a French translation file.
|
||||
|
||||
{@a localization-folder}
|
||||
|
||||
### Create a localization folder
|
||||
|
||||
Most apps are translated into more than one other language. For this reason, it is standard practice
|
||||
@ -511,6 +500,7 @@ For this example:
|
||||
If you were translating to other languages, you would repeat these steps for each target language.
|
||||
|
||||
{@a translate-text-nodes}
|
||||
|
||||
### Translate text nodes
|
||||
|
||||
In a large translation project, you would send the `messages.fr.xlf` file to a French translator who
|
||||
@ -554,6 +544,7 @@ This sample file is easy to translate without a special editor or knowledge of F
|
||||
</div>
|
||||
|
||||
{@a translate-plural-select}
|
||||
|
||||
## Translate plural and select expressions
|
||||
|
||||
_Plural_ and _select_ ICU expressions are extracted separately, so they require special attention
|
||||
@ -564,6 +555,7 @@ elsewhere in the source template. In this example, you know the translation unit
|
||||
must be just below the translation unit for the logo.
|
||||
|
||||
{@a translate-plural}
|
||||
|
||||
### Translate _plural_
|
||||
|
||||
To translate a `plural`, translate its ICU format match values:
|
||||
@ -575,6 +567,7 @@ You can add or remove plural cases, with each language having its own cardinalit
|
||||
[CLDR plural rules](http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html).)
|
||||
|
||||
{@a translate-select}
|
||||
|
||||
### Translate _select_
|
||||
|
||||
Below is the content of our example `select` ICU expression in the component template:
|
||||
@ -605,6 +598,7 @@ Here they are together, after translation:
|
||||
</code-example>
|
||||
|
||||
{@a translate-nested}
|
||||
|
||||
### Translate a nested expression
|
||||
|
||||
A nested expression is similar to the previous examples. As in the previous example, there are
|
||||
@ -627,6 +621,7 @@ The entire template translation is complete. The next section describes how to l
|
||||
into the app.
|
||||
|
||||
{@a app-pre-translation}
|
||||
|
||||
### The app and its translation file
|
||||
|
||||
The sample app and its translation file are now as follows:
|
||||
@ -645,6 +640,7 @@ The sample app and its translation file are now as follows:
|
||||
</code-tabs>
|
||||
|
||||
{@a merge}
|
||||
|
||||
## Merge the completed translation file into the app
|
||||
|
||||
To merge the translated text into component templates, compile the app with the completed
|
||||
@ -660,11 +656,12 @@ format that Angular understands, such as `.xtb`.
|
||||
How you provide this information depends upon whether you compile with
|
||||
the JIT compiler or the AOT compiler.
|
||||
|
||||
* With [AOT](guide/i18n#merge-aot), you pass the information as a CLI parameter.
|
||||
* With [JIT](guide/i18n#merge-jit), you provide the information at bootstrap time.
|
||||
* With [AOT](guide/i18n#aot), you pass the information as a CLI parameter.
|
||||
* With [JIT](guide/i18n#jit), you provide the information at bootstrap time.
|
||||
|
||||
|
||||
{@a merge-aot}
|
||||
{@a aot}
|
||||
|
||||
### Merge with the AOT compiler
|
||||
|
||||
The AOT (_Ahead-of-Time_) compiler is part of a build process that produces a small, fast,
|
||||
@ -688,7 +685,8 @@ guide:
|
||||
ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr
|
||||
</code-example>
|
||||
|
||||
{@a merge-jit}
|
||||
{@a jit}
|
||||
|
||||
### Merge with the JIT compiler
|
||||
|
||||
The JIT compiler compiles the app in the browser as the app loads.
|
||||
@ -715,29 +713,3 @@ Then provide the `LOCALE_ID` in the main module:
|
||||
|
||||
<code-example path="i18n/doc-files/app.module.ts" title="src/app/app.module.ts" linenums="false">
|
||||
</code-example>
|
||||
|
||||
|
||||
{@a missing-translation}
|
||||
### Report missing translations
|
||||
By default, when a translation is missing, the build succeeds but generates a warning such as
|
||||
`Missing translation for message "foo"`. You can configure the level of warning that is generated by
|
||||
the Angular compiler:
|
||||
|
||||
* Error: throw an error. If you are using AOT compilation, the build will fail. If you are using JIT
|
||||
compilation, the app will fail to load.
|
||||
* Warning (default): show a 'Missing translation' warning in the console or shell.
|
||||
* Ignore: do nothing.
|
||||
|
||||
If you use the AOT compiler, specify the warning level by using the CLI parameter
|
||||
`--missingTranslation`. The example below shows how to set the warning level to error:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
ng serve --aot --missingTranslation=error
|
||||
</code-example>
|
||||
|
||||
If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding
|
||||
the 'MissingTranslationStrategy' property. The example below shows how to set the warning level to
|
||||
error:
|
||||
|
||||
<code-example path="i18n/doc-files/main.3.ts" title="src/main.ts">
|
||||
</code-example>
|
||||
|
@ -140,7 +140,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
|
||||
</tr>
|
||||
<tr style='vertical-align:top'>
|
||||
<td>
|
||||
<code>ngOnDestroy()</code>
|
||||
<code>ngOnDestroy</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user