├── .gitignore
├── Chapter-01
    ├── 1008
    │   ├── How-to-do-it
    │   │   ├── app.js
    │   │   └── index.html
    │   └── README.md
    ├── 1499
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── article.component.ts
    │   │   │   ├── ng1.module.ts
    │   │   │   ├── ng2.module.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 2842
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── article.component.ts
    │   │   │   ├── article.service.ts
    │   │   │   ├── ng1.module.ts
    │   │   │   ├── ng2.module.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 4137
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── ng1.module.ts
    │   │   │   ├── ng2.module.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 5637
    │   ├── How-to-do-it
    │   │   ├── app.js
    │   │   └── index.html
    │   └── README.md
    ├── 7756
    │   ├── How-to-do-it
    │   │   ├── app.js
    │   │   └── index.html
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app.js
    │   │   └── index.html
    └── 0431
    │   ├── How-to-do-it
    │       ├── app.js
    │       └── index.html
    │   └── README.md
├── Chapter-02
    ├── 1315
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   └── feedback.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article.component.ts
    │   │       └── feedback.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 2048
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article-list.component.ts
    │   │   │   └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 3211
    │   ├── How-it-works
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article-list.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article-list.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 3292
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   └── click-to-reveal.directive.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 4437
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 4907
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   └── feedback.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 5094
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 6172
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── ad-section.component.ts
    │   │   │   ├── app.module.ts
    │   │   │   └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 6543
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   └── attribution.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article.component.ts
    │   │       └── attribution.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 6577
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 7386
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── feedback.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article.component.ts
    │   │       ├── feedback.component.ts
    │   │       └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 8313
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── logo.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 8565
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    └── 8611
    │   ├── How-to-do-it
    │       ├── app
    │       │   ├── app.module.ts
    │       │   ├── article.component.ts
    │       │   └── text-editor.component.ts
    │       ├── index.html
    │       ├── main.ts
    │       └── system-config.js
    │   └── README.md
├── Chapter-03
    ├── 2816
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article-editor.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       └── article-editor.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 3052
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article-editor.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 4076
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       └── article-editor.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 5116
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article-editor.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       └── article-editor.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 7811
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article-editor.component.ts
    │   │   │   └── delay.validator.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 8574
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article-editor.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   ├── There's-more-(1-of-2)
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article-editor.component.ts
    │   │   │   └── max-word-count.validator.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── There's-more-(2-of-2)
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article-editor.component.ts
    │   │       └── max-word-count.validator.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 9302
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article-editor.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       └── article-editor.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    └── 0771
    │   ├── How-it-works
    │       ├── app
    │       │   ├── app.module.ts
    │       │   └── article-editor.component.ts
    │       ├── index.html
    │       ├── main.ts
    │       └── system-config.js
    │   ├── How-to-do-it
    │       ├── app
    │       │   ├── app.module.ts
    │       │   └── article-editor.component.ts
    │       ├── index.html
    │       ├── main.ts
    │       └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │       ├── app
    │           ├── app.module.ts
    │           └── article-editor.component.ts
    │       ├── index.html
    │       ├── main.ts
    │       └── system-config.js
├── Chapter-04
    ├── 4362
    │   ├── How-to-do-it
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 5195
    │   ├── How-to-do-it-(1-of-2)
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── How-to-do-it-(2-of-2)
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 5244
    │   ├── How-to-do-it
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 6828
    │   ├── How-to-do-it
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 8496
    │   ├── How-to-do-it
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 9315
    │   ├── How-to-do-it
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    └── 0905
    │   ├── How-to-do-it
    │       ├── app
    │       │   ├── app.module.ts
    │       │   └── article.component.ts
    │       ├── index.html
    │       ├── main.ts
    │       └── system-config.js
    │   └── README.md
├── Chapter-05
    ├── 2417
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── node.component.ts
    │   │   │   ├── publish-subscribe.service.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 4112
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── inner.component.ts
    │   │   │   └── outer.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 4121
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │   │   └── article.json
    │   │   └── system-config.js
    │   └── README.md
    ├── 4839
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── click-observer.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   ├── There's-more
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── click-observer.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── There's-more:-Native-RxJS-Implementation
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       └── click-observer.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 6957
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── authentication.service.ts
    │   │   │   └── login.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── authentication.service.ts
    │   │       └── login.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    └── 8629
    │   ├── How-to-do-it
    │       ├── app
    │       │   ├── api.service.ts
    │       │   ├── app.module.ts
    │       │   └── search.component.ts
    │       ├── index.html
    │       ├── main.ts
    │       ├── static
    │       │   └── response.json
    │       └── system-config.js
    │   └── README.md
├── Chapter-06
    ├── 1355
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── default.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │   │   └── response.json
    │   │   └── system-config.js
    │   └── README.md
    ├── 3308
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── default.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │   │   └── response.json
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article.component.ts
    │   │       ├── default.component.ts
    │   │       └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │       └── response.json
    │   │   └── system-config.js
    ├── 4553
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article-detail.component.ts
    │   │   │   ├── article-list.component.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── default.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │   │   └── response.json
    │   │   └── system-config.js
    │   └── README.md
    ├── 6135
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── auth.service.ts
    │   │   │   ├── default.component.ts
    │   │   │   ├── login.component.ts
    │   │   │   ├── logout.component.ts
    │   │   │   ├── profile.component.ts
    │   │   │   ├── root.component.ts
    │   │   │   └── route-guards.service.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │   │   └── response.json
    │   │   └── system-config.js
    │   └── README.md
    ├── 6214
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── default.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │   │   └── response.json
    │   │   └── system-config.js
    │   └── README.md
    ├── 7892
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article-detail.component.ts
    │   │   │   ├── article-list.component.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── default.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │   │   └── response.json
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article-detail.component.ts
    │   │       ├── article-list.component.ts
    │   │       ├── article.component.ts
    │   │       ├── default.component.ts
    │   │       └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │       └── response.json
    │   │   └── system-config.js
    ├── 8004
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── default.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   ├── static
    │   │   │   └── response.json
    │   │   └── system-config.js
    │   └── README.md
    └── 9983
    │   ├── How-to-do-it
    │       ├── app
    │       │   ├── app.module.ts
    │       │   ├── article.component.ts
    │       │   ├── default.component.ts
    │       │   └── root.component.ts
    │       ├── index.html
    │       ├── main.ts
    │       ├── static
    │       │   └── response.json
    │       └── system-config.js
    │   ├── README.md
    │   └── There's-more:-Route-Order-Considerations
    │       ├── app
    │           ├── app.module.ts
    │           ├── article.component.ts
    │           ├── default.component.ts
    │           └── root.component.ts
    │       ├── index.html
    │       ├── main.ts
    │       ├── static
    │           └── response.json
    │       └── system-config.js
├── Chapter-07
    ├── 1109
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article-source.interface.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── article.service.ts
    │   │   │   ├── default-view.component.ts
    │   │   │   ├── editor-article.service.ts
    │   │   │   ├── editor-view.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   ├── There's-more
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article-source.interface.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── article.service.ts
    │   │   │   ├── default-view.component.ts
    │   │   │   ├── editor-article.service.ts
    │   │   │   ├── editor-view.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── There's-more:-Refactoring-with-Directive-Providers
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article-source.interface.ts
    │   │       ├── article.component.ts
    │   │       ├── article.service.ts
    │   │       ├── default-view.component.ts
    │   │       ├── editor-article.service.ts
    │   │       ├── editor-view.directive.ts
    │   │       └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 2102
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── article.module.ts
    │   │   │   ├── article.service.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   ├── There's-more:-Integrating-Different-Services-into-Different-Components
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── article.module.ts
    │   │   │   ├── article.service.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── There's-more:-Service-Instantiation
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article.component.ts
    │   │       ├── article.module.ts
    │   │       ├── article.service.ts
    │   │       └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 3032
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── logo-url.token.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article.component.ts
    │   │       ├── editor-article.service.ts
    │   │       ├── editor-view.directive.ts
    │   │       └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 4263
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── root.component.ts
    │   │   ├── article.service.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    └── 0049
    │   ├── How-to-do-it
    │       ├── app
    │       │   ├── app.module.ts
    │       │   ├── article.component.ts
    │       │   ├── article.factory.ts
    │       │   ├── article.service.ts
    │       │   ├── article.token.ts
    │       │   ├── default-view.directive.ts
    │       │   ├── editor-view.directive.ts
    │       │   └── root.component.ts
    │       ├── index.html
    │       ├── main.ts
    │       └── system-config.js
    │   └── README.md
├── Chapter-08
    ├── 1053
    │   └── How-to-do-it
    │   │   └── tsconfig.json
    ├── 1332
    │   └── How-to-do-it
    │   │   └── package.json
    ├── 2283
    │   └── How-to-do-it
    │   │   ├── article.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── package.json
    ├── 3310
    │   └── How-to-do-it
    │   │   ├── index.html
    │   │   ├── package.json
    │   │   └── webpack.config.js
    ├── 6323
    │   └── How-to-do-it
    │   │   └── app
    │   │       ├── app.component.ts
    │   │       ├── app.module.ts
    │   │       ├── index.html
    │   │       └── main.ts
    ├── 7185
    │   └── How-to-do-it
    │   │   ├── bs-config.json
    │   │   ├── index.html
    │   │   ├── package.json
    │   │   └── webpack.config.js
    └── 7479
    │   └── How-to-do-it
    │       ├── index.html
    │       ├── main.ts
    │       └── polyfills.ts
├── Chapter-09
    ├── 3107
    │   ├── How-to-do-it
    │   │   └── src
    │   │   │   └── app
    │   │   │       ├── magic-eight-ball.service.spec.ts
    │   │   │       └── magic-eight-ball.service.ts
    │   └── There's-more
    │   │   └── src
    │   │       └── app
    │   │           ├── magic-eight-ball.service.spec.ts
    │   │           └── magic-eight-ball.service.ts
    ├── 3444
    │   └── How-to-do-it
    │   │   └── src
    │   │       └── app
    │   │           └── magic-eight-ball
    │   │               ├── magic-eight-ball.component.spec.ts
    │   │               └── magic-eight-ball.component.ts
    ├── 3935
    │   └── How-to-do-it
    │   │   └── src
    │   │       └── app
    │   │           └── article
    │   │               ├── article.component.spec.ts
    │   │               └── article.component.ts
    ├── 3998
    │   └── How-to-do-it
    │   │   ├── karma.conf.js
    │   │   ├── package.json
    │   │   ├── src
    │   │       ├── article.spec.ts
    │   │       └── article.ts
    │   │   └── tsconfig.json
    ├── 6651
    │   └── How-to-do-it
    │   │   └── src
    │   │       └── app
    │   │           └── magic-eight-ball
    │   │               ├── magic-eight-ball.component.spec.ts
    │   │               └── magic-eight-ball.component.ts
    └── 8985
    │   └── How-to-do-it
    │       ├── app
    │           ├── app.component.ts
    │           ├── app.module.ts
    │           └── main.ts
    │       ├── e2e
    │           ├── app.e2e-spec.ts
    │           ├── app.po.ts
    │           ├── bs-config.json
    │           └── tsconfig.json
    │       ├── index.html
    │       ├── package.json
    │       ├── protractor.conf.js
    │       └── tsconfig.json
├── Chapter-10
    ├── 1463
    │   └── How-to-do-it
    │   │   └── app.component.ts
    ├── 1859
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   └── article.component.ts
    │   │   ├── index.html
    │   │   ├── loader.js
    │   │   ├── main.ts
    │   │   ├── system-config.js
    │   │   └── web-worker-main.ts
    │   └── README.md
    ├── 3362
    │   └── How-to-do-it
    │   │   └── app.component.ts
    ├── 4909
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   └── README.md
    ├── 8676
    │   └── How-to-do-it
    │   │   └── app.component.ts
    ├── 0279
    │   ├── How-to-do-it
    │   │   ├── app
    │   │   │   ├── app.module.ts
    │   │   │   ├── article.component.ts
    │   │   │   ├── article.module.ts
    │   │   │   ├── link.component.ts
    │   │   │   └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    │   ├── README.md
    │   └── There's-more
    │   │   ├── app
    │   │       ├── app.module.ts
    │   │       ├── article.component.ts
    │   │       ├── article.module.ts
    │   │       ├── auth.module.ts
    │   │       ├── auth.service.ts
    │   │       ├── link.component.ts
    │   │       └── root.component.ts
    │   │   ├── index.html
    │   │   ├── main.ts
    │   │   └── system-config.js
    ├── 0591
    │   └── How-to-do-it
    │   │   └── index.html
    └── 0623
    │   ├── How-to-do-it
    │       ├── add-random.pipe.ts
    │       ├── app.component.ts
    │       └── main.ts
    │   └── There's-more
    │       └── add-random.pipe.ts
├── LICENSE
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .editorconfig
3 | 


--------------------------------------------------------------------------------
/Chapter-01/0431/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="//code.angularjs.org/1.5.8/angular.js"></script>
 5 |     <script src="app.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <div ng-app="articleApp">
 9 |       <article></article>
10 |     </div>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/Chapter-01/0431/README.md:
--------------------------------------------------------------------------------
1 | # Componentizing Directives Using controllerAs Encapsulation


--------------------------------------------------------------------------------
/Chapter-01/1008/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="//code.angularjs.org/1.5.8/angular.js"></script>
 5 |     <script src="app.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <div ng-app="articleApp">
 9 |       <header></header>
10 |       <article></article>
11 |     </div>
12 |   </body>
13 | </html>


--------------------------------------------------------------------------------
/Chapter-01/1008/README.md:
--------------------------------------------------------------------------------
1 | # Migrating an Application to Component Directives


--------------------------------------------------------------------------------
/Chapter-01/1499/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Input} from '@angular/core';
 2 | import {downgradeComponent} from '@angular/upgrade/static';
 3 | import {Ng1AppModule} from './ng1.module';
 4 | 
 5 | @Component({
 6 |   selector: 'ng2-article',
 7 |   template: `
 8 |     <h1>{{title}}</h1>
 9 |     <p>Written by: {{author}}</p>
10 |   `
11 | })
12 | export class ArticleComponent {
13 |   @Input() author:string
14 |   title:string = 'Unicycle Jousting Recognized as Olympic Sport';
15 | }
16 | 
17 | Ng1AppModule.directive(
18 |   'ng1Article',
19 |   downgradeComponent({
20 |     component: ArticleComponent, 
21 |     inputs: ['author']
22 |   }));


--------------------------------------------------------------------------------
/Chapter-01/1499/How-to-do-it/app/ng1.module.ts:
--------------------------------------------------------------------------------
1 | import 'angular';
2 | 
3 | export const Ng1AppModule = angular.module('Ng1AppModule', []);


--------------------------------------------------------------------------------
/Chapter-01/1499/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'root',
5 |   template: ``
6 | })
7 | export class RootComponent {}


--------------------------------------------------------------------------------
/Chapter-01/1499/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
 1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 2 | 
 3 | import {Ng1AppModule} from './app/ng1.module';
 4 | import {Ng2AppModule} from './app/ng2.module';
 5 | 
 6 | platformBrowserDynamic()
 7 |   .bootstrapModule(Ng2AppModule)
 8 |   .then(ref => {
 9 |     ref.instance.upgrade.bootstrap(document.body, [Ng1AppModule.name]);
10 |   });
11 | 


--------------------------------------------------------------------------------
/Chapter-01/1499/README.md:
--------------------------------------------------------------------------------
1 | # Downgrading Angular 2 Components to Angular 1 Directives with downgradeComponent


--------------------------------------------------------------------------------
/Chapter-01/2842/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
1 | export const ng1Article = {
2 |   template: `
3 |     <h1>{{article.title}}</h1>
4 |     <p>{{article.author}}</p>
5 |   `,
6 |   controller: (ArticleService, $scope) => {
7 |     $scope.article = ArticleService.article;
8 |   }
9 | };


--------------------------------------------------------------------------------
/Chapter-01/2842/How-to-do-it/app/article.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | 
 3 | @Injectable()
 4 | export class ArticleService {
 5 |   article:Object = {
 6 |     title: 'Research Shows Moon Not Actually Made of Cheese',
 7 |     author: 'Jake Hsu'
 8 |   };
 9 | }
10 | 
11 | 


--------------------------------------------------------------------------------
/Chapter-01/2842/How-to-do-it/app/ng1.module.ts:
--------------------------------------------------------------------------------
1 | import 'angular';
2 | import {ng1Article} from './article.component';
3 | import {ArticleService} from './article.service';
4 | import {downgradeInjectable} from '@angular/upgrade/static';
5 | 
6 | export const Ng1AppModule = angular.module('Ng1AppModule', [])
7 |   .component('ng1Article', ng1Article)
8 |   .factory('ArticleService', downgradeInjectable(ArticleService));
9 |   


--------------------------------------------------------------------------------
/Chapter-01/2842/How-to-do-it/app/ng2.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {UpgradeModule} from '@angular/upgrade/static';
 4 | import {RootComponent} from './root.component';
 5 | import {ArticleService} from './article.service';
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule,
10 |     UpgradeModule,
11 |   ],
12 |   declarations: [
13 |     RootComponent
14 |   ],
15 |   providers: [
16 |     ArticleService
17 |   ],
18 |   bootstrap: [
19 |     RootComponent
20 |   ]
21 | })
22 | export class Ng2AppModule {
23 |   constructor(public upgrade: UpgradeModule){}
24 | }


--------------------------------------------------------------------------------
/Chapter-01/2842/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'root',
5 |   template: ``
6 | })
7 | export class RootComponent {}


--------------------------------------------------------------------------------
/Chapter-01/2842/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
 1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 2 | 
 3 | import {Ng1AppModule} from './app/ng1.module';
 4 | import {Ng2AppModule} from './app/ng2.module';
 5 | 
 6 | platformBrowserDynamic()
 7 |   .bootstrapModule(Ng2AppModule)
 8 |   .then(ref => {
 9 |     ref.instance.upgrade.bootstrap(document.body, [Ng1AppModule.name]);
10 |   });
11 | 


--------------------------------------------------------------------------------
/Chapter-01/2842/README.md:
--------------------------------------------------------------------------------
1 | # Downgrade Angular 2 Providers to Angular 1 Services with downgradeInjectable


--------------------------------------------------------------------------------
/Chapter-01/4137/How-to-do-it/app/ng1.module.ts:
--------------------------------------------------------------------------------
1 | import 'angular';
2 | 
3 | export const Ng1AppModule = angular.module('Ng1AppModule', []);


--------------------------------------------------------------------------------
/Chapter-01/4137/How-to-do-it/app/ng2.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule, Component} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {UpgradeModule} from '@angular/upgrade/static';
 4 | import {RootComponent} from './root.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     UpgradeModule,
10 |   ],
11 |   bootstrap: [
12 |     RootComponent
13 |   ],
14 |   declarations: [
15 |     RootComponent
16 |   ]
17 | })
18 | export class Ng2AppModule {
19 |   constructor(public upgrade: UpgradeModule){}
20 | }


--------------------------------------------------------------------------------
/Chapter-01/4137/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'root',
5 |   template: `
6 |     <p>Angular 2 bootstrapped successfully!</p>
7 |   `
8 | })
9 | export class RootComponent {}


--------------------------------------------------------------------------------
/Chapter-01/4137/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
 1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 2 | 
 3 | import {Ng1AppModule} from './app/ng1.module';
 4 | import {Ng2AppModule} from './app/ng2.module';
 5 | 
 6 | platformBrowserDynamic()
 7 |   .bootstrapModule(Ng2AppModule)
 8 |   .then(ref => {
 9 |     ref.instance.upgrade.bootstrap(document.body, [Ng1AppModule.name]);
10 |   });
11 | 


--------------------------------------------------------------------------------
/Chapter-01/4137/README.md:
--------------------------------------------------------------------------------
1 | # Connecting Angular 1 and Angular 2 with UpgradeModule


--------------------------------------------------------------------------------
/Chapter-01/5637/How-to-do-it/app.js:
--------------------------------------------------------------------------------
 1 | angular.module('articleApp', [])
 2 | .service('ArticleData', function() {
 3 | 	var title = 'Incumbent Senator Ousted by Stalk of Broccoli';
 4 | 	this.getTitle = function() {
 5 |   	return title;
 6 |   };
 7 |   this.author = 'Jake';
 8 | })
 9 | .component('article', {
10 |   controller: function(ArticleData) {
11 |     this.title = ArticleData.getTitle();
12 |     this.author = ArticleData.author;
13 |   },
14 |   template: `
15 |     <h1>{{ $ctrl.title }}</h1>
16 |     <p>Written by: {{ $ctrl.author }}</p>
17 |   `
18 | });
19 | 


--------------------------------------------------------------------------------
/Chapter-01/5637/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="//code.angularjs.org/1.5.8/angular.js"></script>
 5 |     <script src="app.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <div ng-app="articleApp">
 9 |       <article></article>
10 |     </div>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/Chapter-01/5637/README.md:
--------------------------------------------------------------------------------
1 | # Normalizing Service Types


--------------------------------------------------------------------------------
/Chapter-01/7756/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="//code.angularjs.org/1.5.8/angular.js"></script>
 5 |     <script src="app.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <div ng-app="articleApp">
 9 |       <article></article>
10 |     </div>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/Chapter-01/7756/README.md:
--------------------------------------------------------------------------------
1 | # Implementing a Basic Component in Angular 1.5


--------------------------------------------------------------------------------
/Chapter-01/7756/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="//code.angularjs.org/1.5.8/angular.js"></script>
 5 |     <script src="app.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <div ng-app="articleApp">
 9 |       <article></article>
10 |     </div>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/Chapter-02/1315/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | import {FeedbackComponent} from './feedback.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent,
12 |     FeedbackComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-02/1315/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/1315/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/1315/README.md:
--------------------------------------------------------------------------------
1 | # Configuring Mutual Parent-Child Awareness with ViewChild and forwardRef


--------------------------------------------------------------------------------
/Chapter-02/1315/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | import {FeedbackComponent} from './feedback.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent,
12 |     FeedbackComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-02/1315/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/1315/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/2048/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | import {ArticleListComponent} from './article-list.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent,
12 |     ArticleListComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleListComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-02/2048/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Input, ngOnInit, ngOnDestroy} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h1>
 7 |       <ng-content></ng-content>{{articleTitle}}
 8 |     </h1>
 9 |   `
10 | })
11 | export class ArticleComponent implements OnInit, OnDestroy {
12 |   @Input() articleTitle:string;
13 |   
14 |   ngOnInit() {
15 |     console.log('created', this.articleTitle);
16 |   }
17 |   
18 |   ngOnDestroy() {
19 |     console.log('destroyed', this.articleTitle);
20 |   }
21 | }


--------------------------------------------------------------------------------
/Chapter-02/2048/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article-list></article-list>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/2048/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/2048/README.md:
--------------------------------------------------------------------------------
1 | # Utilizing Component Lifecycle Hooks


--------------------------------------------------------------------------------
/Chapter-02/3211/How-it-works/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleListComponent} from './article-list.component';
 4 | 
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleListComponent
12 |   ],
13 |   bootstrap: [
14 |     ArticleListComponent
15 |   ]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/Chapter-02/3211/How-it-works/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article-list></article-list>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/3211/How-it-works/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/3211/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleListComponent} from './article-list.component';
 4 | 
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleListComponent
12 |   ],
13 |   bootstrap: [
14 |     ArticleListComponent
15 |   ]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/Chapter-02/3211/How-to-do-it/app/article-list.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article-list',
 5 |   template: `
 6 |     <div *ngFor="let article of articles; let i = index">
 7 |       <h1 *ngIf="article.active">
 8 |         {{i}}: {{article.title}}
 9 |       </h1>
10 |     </div>
11 |   `
12 | })
13 | export class ArticleListComponent {
14 |   articles:Array<Object> = [
15 |     {title: 'Foo', active: true}, 
16 |     {title: 'Bar', active: false},
17 |     {title: 'Baz', active: true}
18 |   ];
19 | }
20 | 


--------------------------------------------------------------------------------
/Chapter-02/3211/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article-list></article-list>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/3211/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/3211/README.md:
--------------------------------------------------------------------------------
1 | # Using ngFor and ngIf Structural Directives for Model-based DOM Control


--------------------------------------------------------------------------------
/Chapter-02/3292/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | import {ClickToRevealDirective} from './click-to-reveal.directive';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent,
12 |     ClickToRevealDirective
13 |   ],
14 |   bootstrap: [
15 |     ArticleComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-02/3292/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h1 click-to-reveal>{{title}}</h1>
 7 |   `,
 8 |   styles: [`
 9 |     h1 {
10 |       text-overflow: ellipsis;
11 |       white-space: nowrap;
12 |       overflow: hidden;
13 |       max-width: 300px;
14 |     }
15 |   `]
16 | })
17 | export class ArticleComponent { 
18 |   title:string = `Presidential Candidates Respond to 
19 |     Allegations Involving Ability to Dunk`;
20 | }
21 | 


--------------------------------------------------------------------------------
/Chapter-02/3292/How-to-do-it/app/click-to-reveal.directive.ts:
--------------------------------------------------------------------------------
 1 | import {Directive, HostListener} from '@angular/core';
 2 | 
 3 | @Directive({
 4 |   selector: '[click-to-reveal]'
 5 | })
 6 | export class ClickToRevealDirective {
 7 |   @HostListener('click', ['$event.target'])
 8 |   reveal(target) {
 9 |     target.style['white-space'] = 'normal'; 
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/Chapter-02/3292/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/3292/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/3292/README.md:
--------------------------------------------------------------------------------
1 | # Attaching Behavior to DOM Elements with Directives


--------------------------------------------------------------------------------
/Chapter-02/4437/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | 
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent
12 |   ],
13 |   bootstrap: [
14 |     ArticleComponent
15 |   ]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/Chapter-02/4437/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h1>{{title}}</h1>
 7 |     <p>Shares: {{shareCt}}</p>
 8 |     <button (click)="share()">Share</button>
 9 |   `
10 | })
11 | export class ArticleComponent {
12 |   title:string = 'Police Apprehend Tiramisu Thieves';
13 |   shareCt:number = 0;
14 |   share():void {
15 |     ++this.shareCt;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/Chapter-02/4437/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/4437/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/4437/README.md:
--------------------------------------------------------------------------------
1 | # Registering Handlers on Native Browser Events


--------------------------------------------------------------------------------
/Chapter-02/4437/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | 
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent
12 |   ],
13 |   bootstrap: [
14 |     ArticleComponent
15 |   ]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/Chapter-02/4437/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h1>{{ title }}</h1>
 7 |     <p>Shares: {{ shareCt }}</p>
 8 |     <button (click)="share($event)">Share</button>
 9 |   `
10 | })
11 | export class ArticleComponent {
12 |   title:string = 'Police Apprehend Tiramisu Thieves';
13 |   shareCt:number = 0;
14 |   share(e:Event):void {
15 |     console.log(e);  // MouseEvent
16 |     ++this.shareCt;
17 |   }
18 | }
19 | 
20 | 


--------------------------------------------------------------------------------
/Chapter-02/4437/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/4437/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/4907/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | import {FeedbackComponent} from './feedback.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent,
12 |     FeedbackComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-02/4907/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <feedback [val]="likes"></feedback>
 7 |   `
 8 | })
 9 | export class ArticleComponent {
10 |   likes:number = 0;
11 |   
12 |   incrementLikes():void {
13 |     this.likes++;
14 |   }
15 | }


--------------------------------------------------------------------------------
/Chapter-02/4907/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/4907/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/4907/README.md:
--------------------------------------------------------------------------------
1 | # Referencing a Parent Component from a Child Component


--------------------------------------------------------------------------------
/Chapter-02/5094/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | 
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent
12 |   ],
13 |   bootstrap: [
14 |     ArticleComponent
15 |   ]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/Chapter-02/5094/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <input #title (keyup)="0">
 7 |     <h1>{{title.value}}</h1>
 8 |   `
 9 | })
10 | export class ArticleComponent {}
11 | 


--------------------------------------------------------------------------------
/Chapter-02/5094/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/5094/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/5094/README.md:
--------------------------------------------------------------------------------
1 | # Referencing Elements with Template Variables


--------------------------------------------------------------------------------
/Chapter-02/5094/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | 
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent
12 |   ],
13 |   bootstrap: [
14 |     ArticleComponent
15 |   ]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/Chapter-02/5094/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <input #title (keyup)="setTitle(title.value)">
 7 |     <h1>{{myTitle}}</h1>
 8 |   `
 9 | })
10 | export class ArticleComponent {
11 |   myTitle:string;
12 |   
13 |   setTitle(val:string) {
14 |     this.myTitle = val;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/Chapter-02/5094/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/5094/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/6172/How-to-do-it/app/ad-section.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'ad-section',
 5 |   template: `
 6 |     <a href="#">{{adText}}</a>
 7 |     <ng-content select="p"></ng-content>
 8 |   `
 9 | })
10 | export class AdSectionComponent {
11 |   adText:string = 'Selfie sticks 40% off!';
12 | }
13 | 


--------------------------------------------------------------------------------
/Chapter-02/6172/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | import {AdSectionComponent} from './ad-section.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent,
12 |     AdSectionComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-02/6172/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h1>{{title}}</h1>
 7 |     <ad-section>
 8 |       <p>U.S. senators are up in arms following the recent ruling
 9 |          stripping them of their beloved selfie sticks.</p>
10 |       <p>A bipartisan committee drafted a resolution to smuggle
11 |          selfie sticks onto the floor by any means necessary.</p>
12 |     </ad-section>
13 |   `
14 | })
15 | export class ArticleComponent { 
16 |   title:string = 'Selfie Sticks Banned from Senate Floor';
17 | }
18 | 


--------------------------------------------------------------------------------
/Chapter-02/6172/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/6172/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/6172/README.md:
--------------------------------------------------------------------------------
1 | # Projecting Nested Content Using ngContent


--------------------------------------------------------------------------------
/Chapter-02/6543/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | import {AttributionComponent} from './attribution.component';
 5 | 
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule
10 |   ],
11 |   declarations: [
12 |     ArticleComponent, 
13 |     AttributionComponent
14 |   ],
15 |   bootstrap: [
16 |     ArticleComponent
17 |   ]
18 | })
19 | export class AppModule {}
20 | 


--------------------------------------------------------------------------------
/Chapter-02/6543/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h1>{{title}}</h1>
 7 |     <attribution [author]="name"></attribution>
 8 |   `
 9 | })
10 | export class ArticleComponent {
11 |   title:string = 'Belching Choir Begins World Tour';
12 |   name:string = 'Jake';
13 | }
14 | 


--------------------------------------------------------------------------------
/Chapter-02/6543/How-to-do-it/app/attribution.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Input} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'attribution',
 5 |   template: `
 6 |     <h3>Written by: {{author}} </h3>
 7 |   `
 8 | })
 9 | export class AttributionComponent { 
10 |   @Input() author:string;
11 | }
12 | 


--------------------------------------------------------------------------------
/Chapter-02/6543/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/6543/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/6543/README.md:
--------------------------------------------------------------------------------
1 | # Passing Members From a Parent Component Into a Child Component


--------------------------------------------------------------------------------
/Chapter-02/6543/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | import {AttributionComponent} from './attribution.component';
 5 | 
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule
10 |   ],
11 |   declarations: [
12 |     ArticleComponent, 
13 |     AttributionComponent
14 |   ],
15 |   bootstrap: [
16 |     ArticleComponent
17 |   ]
18 | })
19 | export class AppModule {}
20 | 


--------------------------------------------------------------------------------
/Chapter-02/6543/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h1>{{title}}</h1>
 7 |     <attribution bind-author="name"></attribution>
 8 |   `
 9 | })
10 | export class ArticleComponent {
11 |   title:string = 'Belching Choir Begins World Tour';
12 |   name:string = 'Jake';
13 | }
14 | 


--------------------------------------------------------------------------------
/Chapter-02/6543/There's-more/app/attribution.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Input} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'attribution',
 5 |   template: `
 6 |     <h3>Written by: {{author}} </h3>
 7 |   `
 8 | })
 9 | export class AttributionComponent { 
10 |   @Input() author:string;
11 | }
12 | 


--------------------------------------------------------------------------------
/Chapter-02/6543/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/6543/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/6577/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | 
 5 | @NgModule({
 6 |   imports: [BrowserModule],
 7 |   declarations: [ArticleComponent],
 8 |   bootstrap: [ArticleComponent]
 9 | })
10 | export class AppModule {}
11 | 


--------------------------------------------------------------------------------
/Chapter-02/6577/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <p>{{currentDate|date}}</p>
 7 |     <h1>{{title}}</h1>
 8 |     <h3>Written by: {{author}}</h3>
 9 |   `
10 | })
11 | export class ArticleComponent {
12 |   currentDate:date = new Date();
13 |   title:string = `
14 |     Flight Security Restrictions to Include 
15 |     Insults, Mean Faces
16 |   `;
17 |   author:string = 'Jake';
18 | }
19 | 


--------------------------------------------------------------------------------
/Chapter-02/6577/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/6577/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/6577/README.md:
--------------------------------------------------------------------------------
1 | # Using Decorators to Build and Style a Simple Component


--------------------------------------------------------------------------------
/Chapter-02/6577/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | 
 5 | @NgModule({
 6 |   imports: [BrowserModule],
 7 |   declarations: [ArticleComponent],
 8 |   bootstrap: [ArticleComponent]
 9 | })
10 | export class AppModule {}
11 | 


--------------------------------------------------------------------------------
/Chapter-02/6577/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <p>{{currentDate|date}}</p>
 7 |     <h1>{{title}}</h1>
 8 |     <h3>Written by: {{author}}</h3>
 9 |   `,
10 |   styles: [`
11 |     h3 {
12 |       font-style: italic;
13 |     }
14 |   `]
15 | })
16 | export class ArticleComponent {
17 |   currentDate:date = new Date();
18 |   title:string = `
19 |     Flight Security Restrictions to Include 
20 |     Insults, Mean Faces
21 |   `;
22 |   author:string = 'Jake';
23 | }
24 | 


--------------------------------------------------------------------------------
/Chapter-02/6577/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/6577/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/7386/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {RootComponent} from './root.component';
 4 | import {ArticleComponent} from './article.component';
 5 | import {FeedbackComponent} from './feedback.component';
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule
10 |   ],
11 |   declarations: [
12 |     RootComponent,
13 |     ArticleComponent,
14 |     FeedbackComponent
15 |   ],
16 |   bootstrap: [
17 |     RootComponent
18 |   ]
19 | })
20 | export class AppModule {}
21 | 


--------------------------------------------------------------------------------
/Chapter-02/7386/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <article>
 7 |       <feedback></feedback>
 8 |     </article>
 9 |   `
10 | })
11 | export class RootComponent {}


--------------------------------------------------------------------------------
/Chapter-02/7386/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <root></root>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/7386/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/7386/README.md:
--------------------------------------------------------------------------------
1 | # Configuring Mutual Parent-Child Awareness with ContentChild and forwardRef


--------------------------------------------------------------------------------
/Chapter-02/7386/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {RootComponent} from './root.component';
 4 | import {ArticleComponent} from './article.component';
 5 | import {FeedbackComponent} from './feedback.component';
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule
10 |   ],
11 |   declarations: [
12 |     RootComponent,
13 |     ArticleComponent,
14 |     FeedbackComponent
15 |   ],
16 |   bootstrap: [
17 |     RootComponent
18 |   ]
19 | })
20 | export class AppModule {}
21 | 


--------------------------------------------------------------------------------
/Chapter-02/7386/There's-more/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <article>
 7 |       <feedback></feedback>
 8 |     </article>
 9 |   `
10 | })
11 | export class RootComponent {}


--------------------------------------------------------------------------------
/Chapter-02/7386/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <root></root>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/7386/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/8313/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {LogoComponent} from './logo.component';
 4 | 
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     LogoComponent
12 |   ],
13 |   bootstrap: [
14 |     LogoComponent
15 |   ]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/Chapter-02/8313/How-to-do-it/app/logo.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'logo',
 5 |   template: '<img [src]="logoUrl">'
 6 | })
 7 | export class LogoComponent {
 8 |   logoUrl:string =
 9 |     '//angular.io/resources/images/logos/standard/logo-nav.png';
10 | }
11 | 


--------------------------------------------------------------------------------
/Chapter-02/8313/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <logo></logo>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/8313/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/8313/README.md:
--------------------------------------------------------------------------------
1 | # Binding to Native Element Attributes


--------------------------------------------------------------------------------
/Chapter-02/8565/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | 
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent
12 |   ],
13 |   bootstrap: [
14 |     ArticleComponent
15 |   ]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/Chapter-02/8565/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/8565/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/8565/README.md:
--------------------------------------------------------------------------------
1 | # Attribute Property Binding


--------------------------------------------------------------------------------
/Chapter-02/8611/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ArticleComponent} from './article.component';
 4 | import {TextEditorComponent} from './text-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     ArticleComponent,
12 |     TextEditorComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-02/8611/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h1>{{title}}</h1>
 7 |     <p>Word count: {{wordCount}}</p>
 8 |     <text-editor (countUpdate)="updateWordCount($event)">
 9 |     </text-editor>
10 |   `
11 | })
12 | export class ArticleComponent { 
13 |   title:string =  `
14 |     Maternity Ward Resorts to Rock Paper Scissors Following 
15 |     Baby Mixup`;
16 |   wordCount:number = 0;
17 |   
18 |   updateWordCount(e:number):void {
19 |     this.wordCount = e;
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/Chapter-02/8611/How-to-do-it/app/text-editor.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, EventEmitter, Output} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'text-editor',
 5 |   template: `
 6 |     <textarea (keyup)="emitWordCount($event)"></textarea>
 7 |   `
 8 | })
 9 | export class TextEditorComponent {  
10 |   @Output() countUpdate = new EventEmitter<number>();
11 |   
12 |   emitWordCount(e:Event) {
13 |     this.countUpdate.emit(
14 |       (e.target.value.match(/\S+/g) || []).length);
15 |   }
16 | } 
17 | 
18 | 


--------------------------------------------------------------------------------
/Chapter-02/8611/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-02/8611/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-02/8611/README.md:
--------------------------------------------------------------------------------
1 | # Generating and Capturing Custom Events Using EventEmitter 


--------------------------------------------------------------------------------
/Chapter-03/0771/How-it-works/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {FormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     FormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/How-it-works/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/How-it-works/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {FormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     FormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/How-to-do-it/app/article-editor.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article-editor',
 5 |   template: `
 6 |     <input [(ngModel)]="title">
 7 |     <input [(ngModel)]="title">
 8 |     <h2>{{title}}</h2>
 9 |   `
10 | })
11 | export class ArticleEditorComponent {
12 |   title:string;
13 | }
14 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/README.md:
--------------------------------------------------------------------------------
1 | # Implementing simple two-way data binding with ngModel


--------------------------------------------------------------------------------
/Chapter-03/0771/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {FormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     FormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/There's-more/app/article-editor.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article-editor',
 5 |   template: `
 6 |     <input [value]="title" (input)="title=$event.target.value">
 7 |     <input [value]="title" (input)="title=$event.target.value">
 8 |     <h2>{{title}}</h2>
 9 |   `
10 | })
11 | export class ArticleEditorComponent {
12 |   title:string = '';
13 | }
14 | 
15 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/0771/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/2816/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent } from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ReactiveFormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent 
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/2816/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/2816/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/2816/README.md:
--------------------------------------------------------------------------------
1 | # Bundling FormControls with a FormArray


--------------------------------------------------------------------------------
/Chapter-03/2816/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent } from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ReactiveFormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent 
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/2816/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/2816/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/3052/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent } from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ReactiveFormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent 
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/3052/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/3052/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/3052/README.md:
--------------------------------------------------------------------------------
1 | # Bundling Controls with a FormGroup


--------------------------------------------------------------------------------
/Chapter-03/4076/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {FormsComponent} from '@angular/forms';
 4 | import {ArticleComponent} from './article.component';
 5 | 
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule,
10 |     FormsComponent
11 |   ],
12 |   declarations: [
13 |     ArticleComponent
14 |   ],
15 |   bootstrap: [
16 |     ArticleComponent
17 |   ]
18 | })
19 | export class AppModule {}
20 | 


--------------------------------------------------------------------------------
/Chapter-03/4076/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     JAKE
 7 |   `
 8 | })
 9 | export class ArticleComponent {}
10 | 


--------------------------------------------------------------------------------
/Chapter-03/4076/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article></article>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/4076/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/4076/README.md:
--------------------------------------------------------------------------------
1 | # Implementing basic field validation with formControl


--------------------------------------------------------------------------------
/Chapter-03/4076/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent } from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ReactiveFormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent 
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/4076/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/4076/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/5116/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {FormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     FormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent 
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/5116/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/5116/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/5116/README.md:
--------------------------------------------------------------------------------
1 | # Implementing basic forms with NgForm


--------------------------------------------------------------------------------
/Chapter-03/5116/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {FormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     FormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent 
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/5116/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/5116/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/7811/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ReactiveFormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/7811/How-to-do-it/app/delay.validator.ts:
--------------------------------------------------------------------------------
 1 | import {FormControl, Validator} from '@angular/forms';
 2 | 
 3 | export class DelayValidator implements Validator {
 4 |   static validate(c:FormControl):Promise<{[key:string]:any}> {
 5 |     if (c.pristine && !c.value) {
 6 |       return new Promise;
 7 |     }
 8 |     if (!c.delayPromise) {
 9 |       c.delayPromise = new Promise((resolve) => {
10 |         setTimeout(() => {
11 |           console.log('resolve');
12 |           resolve();
13 |         }, 5000);
14 |       });
15 |     }
16 |     return c.delayPromise;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/Chapter-03/7811/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/7811/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/7811/README.md:
--------------------------------------------------------------------------------
1 | # Creating and using a custom asynchronous validator with Promises


--------------------------------------------------------------------------------
/Chapter-03/8574/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ReactiveFormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent 
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/8574/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/8574/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/8574/README.md:
--------------------------------------------------------------------------------
1 | # Creating and using a custom validator


--------------------------------------------------------------------------------
/Chapter-03/8574/There's-more-(1-of-2)/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | import {MaxWordCountValidator} from './max-word-count.validator';
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule,
10 |     ReactiveFormsModule
11 |   ],
12 |   declarations: [
13 |     ArticleEditorComponent,
14 |     MaxWordCountValidator
15 |   ],
16 |   bootstrap: [
17 |     ArticleEditorComponent 
18 |   ]
19 | })
20 | export class AppModule {}
21 | 


--------------------------------------------------------------------------------
/Chapter-03/8574/There's-more-(1-of-2)/app/max-word-count.validator.ts:
--------------------------------------------------------------------------------
 1 | import {Directive} from '@angular/core';
 2 | import {Validator, FormControl, NG_VALIDATORS} from '@angular/forms';
 3 | 
 4 | @Directive({
 5 |   selector: '[max-word-count]',
 6 |   providers: [{
 7 |     provide:NG_VALIDATORS, 
 8 |     useExisting: MaxWordCountValidator, 
 9 |     multi: true
10 |   }]
11 | })
12 | export class MaxWordCountValidator implements Validator {
13 |   validate(c:FormControl):{[key:string]:any} {
14 |     let wordCt:number = ((c.value || '').match(/\S+/g) || []).length;
15 |     return wordCt <= 10 ? 
16 |       null :
17 |       {maxwords: {limit:10, actual:wordCt}};
18 |   }
19 | }


--------------------------------------------------------------------------------
/Chapter-03/8574/There's-more-(1-of-2)/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/8574/There's-more-(1-of-2)/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/8574/There's-more-(2-of-2)/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | import {MaxWordCountValidator} from './max-word-count.validator';
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule,
10 |     ReactiveFormsModule
11 |   ],
12 |   declarations: [
13 |     ArticleEditorComponent,
14 |     MaxWordCountValidator
15 |   ],
16 |   bootstrap: [
17 |     ArticleEditorComponent 
18 |   ]
19 | })
20 | export class AppModule {}
21 | 


--------------------------------------------------------------------------------
/Chapter-03/8574/There's-more-(2-of-2)/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/8574/There's-more-(2-of-2)/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/9302/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ReactiveFormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent 
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/9302/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/9302/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-03/9302/README.md:
--------------------------------------------------------------------------------
1 | # Implementing basic forms with FormBuilder and formControlName


--------------------------------------------------------------------------------
/Chapter-03/9302/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {ArticleEditorComponent} from './article-editor.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ReactiveFormsModule
10 |   ],
11 |   declarations: [
12 |     ArticleEditorComponent 
13 |   ],
14 |   bootstrap: [
15 |     ArticleEditorComponent 
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-03/9302/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article-editor></article-editor>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-03/9302/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-04/0905/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {HttpModule} from '@angular/http';
 4 | import {ArticleComponent} from './article.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     HttpModule
10 |   ],
11 |   declarations: [
12 |     ArticleComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-04/0905/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {Http} from '@angular/http';
 3 | import 'rxjs/Rx';
 4 | 
 5 | @Component({
 6 |   selector: 'article',
 7 |   template: `
 8 |     <p></p>
 9 |   `
10 | })
11 | export class ArticleComponent {
12 |   constructor(private http:Http) {
13 |     // For demo purposes, have this plunk request itself to
14 |     // avoid cross origin errors
15 |     console.log(
16 |       http.get('//run.plnkr.co/plunks/TBtcNDRelAOHDVpIuWw1')
17 |       .toPromise());
18 |   }
19 | }


--------------------------------------------------------------------------------
/Chapter-04/0905/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-04/0905/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-04/0905/README.md:
--------------------------------------------------------------------------------
1 | # Converting an Http Service Observable into a ZoneAwarePromise


--------------------------------------------------------------------------------
/Chapter-04/4362/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 5 |     <script src="system-config.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       System.import('system-config.js')
10 |         .then(function() {
11 |           System.import('main.ts');
12 |         });
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter-04/4362/README.md:
--------------------------------------------------------------------------------
1 | # Cancelling Asynchronous Actions with Promise.race()


--------------------------------------------------------------------------------
/Chapter-04/5195/How-to-do-it-(1-of-2)/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 5 |     <script src="system-config.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       System.import('system-config.js')
10 |         .then(function() {
11 |           System.import('main.ts');
12 |         });
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter-04/5195/How-to-do-it-(2-of-2)/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 5 |     <script src="system-config.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       System.import('system-config.js')
10 |         .then(function() {
11 |           System.import('main.ts');
12 |         });
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter-04/5195/README.md:
--------------------------------------------------------------------------------
1 | # Understanding and Implementing Basic Promises


--------------------------------------------------------------------------------
/Chapter-04/5195/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 5 |     <script src="system-config.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       System.import('system-config.js')
10 |         .then(function() {
11 |           System.import('main.ts');
12 |         });
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter-04/5244/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 5 |     <script src="system-config.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       System.import('system-config.js')
10 |         .then(function() {
11 |           System.import('main.ts');
12 |         });
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter-04/5244/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
 1 | import {Observable} from 'rxjs/Rx';
 2 | 
 3 | var outerResolve, outerReject;
 4 | 
 5 | const p1 = new Promise((resolve, reject) => {
 6 |   outerResolve = resolve;
 7 |   outerReject = reject;
 8 | });
 9 | 
10 | var o1 = Observable.fromPromise(p1);
11 | 
12 | o1.subscribe(
13 |   // onNext handler
14 |   () => console.log('resolved!'),
15 |   // onError handler
16 |   () => console.log('rejected'),
17 |   // onCompleted handler
18 |   () => console.log('finished!'));
19 |   
20 | outerResolve();
21 | // "resolved!"
22 | // "finished!"


--------------------------------------------------------------------------------
/Chapter-04/5244/README.md:
--------------------------------------------------------------------------------
1 | # Converting a Promise into an Observable


--------------------------------------------------------------------------------
/Chapter-04/6828/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 5 |     <script src="system-config.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       System.import('system-config.js')
10 |         .then(function() {
11 |           System.import('main.ts');
12 |         });
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter-04/6828/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
 1 | var p = new Promise((resolve, reject) => { 
 2 |   // executor will immediately throw an exception, forcing
 3 |   // a reject
 4 |   throw 123; 
 5 | })
 6 | .then(
 7 |   // child promise resolved handler
 8 |   data => console.log('resolved', data), 
 9 |   // child promise rejected handler
10 |   data => console.log('rejected', data));
11 | 
12 | // "rejected", 123


--------------------------------------------------------------------------------
/Chapter-04/6828/README.md:
--------------------------------------------------------------------------------
1 | # Chaining Promises and Promise Handlers


--------------------------------------------------------------------------------
/Chapter-04/6828/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 5 |     <script src="system-config.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       System.import('system-config.js')
10 |         .then(function() {
11 |           System.import('main.ts');
12 |         });
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter-04/8496/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 5 |     <script src="system-config.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       System.import('system-config.js')
10 |         .then(function() {
11 |           System.import('main.ts');
12 |         });
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter-04/8496/README.md:
--------------------------------------------------------------------------------
1 | # Implementing Promise Barriers with Promise.all()


--------------------------------------------------------------------------------
/Chapter-04/9315/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 5 |     <script src="system-config.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       System.import('system-config.js')
10 |         .then(function() {
11 |           System.import('main.ts');
12 |         });
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/Chapter-04/9315/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
 1 | const a = Promise.resolve('baz');
 2 | console.log(a);
 3 | // Promise {status: 'resolved', value: 'baz'}
 4 | 
 5 | const b = Promise.resolve(a);
 6 | console.log(b);
 7 | // Promise {status: 'resolved', value: 'baz'}
 8 | 
 9 | console.log(a === b);
10 | // true
11 | 
12 | const c = Promise.reject('qux');
13 | // Error qux
14 | console.log(c)
15 | // Promise {status: 'rejected', value: 'qux'}
16 | 
17 | const d = Promise.resolve(c);
18 | console.log(d);
19 | // Promise {status: 'rejected', value: 'qux'}
20 | 
21 | console.log(c === d);
22 | // true
23 | 


--------------------------------------------------------------------------------
/Chapter-04/9315/README.md:
--------------------------------------------------------------------------------
1 | # Creating Promise Wrappers with Promise.resolve() and Promise.reject()


--------------------------------------------------------------------------------
/Chapter-05/2417/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {RootComponent} from './root.component';
 4 | import {NodeComponent} from './node.component';
 5 | import {PubSubService} from './publish-subscribe.service';
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule
10 |   ],
11 |   declarations: [
12 |     RootComponent,
13 |     NodeComponent
14 |   ],
15 |   providers: [
16 |     PubSubService
17 |   ],
18 |   bootstrap: [
19 |     RootComponent
20 |   ]
21 | })
22 | export class AppModule {}
23 | 


--------------------------------------------------------------------------------
/Chapter-05/2417/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <node subscribeChannel="foo" 
 7 |           publishChannel="bar">
 8 |     </node>
 9 |     <node subscribeChannel="bar" 
10 |           publishChannel="foo">
11 |     </node>
12 |   `
13 | })
14 | export class RootComponent {}


--------------------------------------------------------------------------------
/Chapter-05/2417/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <root></root>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-05/2417/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-05/2417/README.md:
--------------------------------------------------------------------------------
1 | # Building a Generalized Publish-Subscribe Service to Replace $broadcast, $emit, and $on


--------------------------------------------------------------------------------
/Chapter-05/4112/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {OuterComponent} from './outer.component';
 4 | import {InnerComponent} from './inner.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     OuterComponent,
12 |     InnerComponent
13 |   ],
14 |   bootstrap: [
15 |     OuterComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-05/4112/How-to-do-it/app/inner.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Input} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'inner',
 5 |   template: `<p>{{val}}`
 6 | })
 7 | export class InnerComponent {
 8 |   @Input() val:number;
 9 | }
10 | 


--------------------------------------------------------------------------------
/Chapter-05/4112/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <outer></outer>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-05/4112/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-05/4112/README.md:
--------------------------------------------------------------------------------
1 | # Using QueryLists and Observables to Follow Changes in ViewChildren


--------------------------------------------------------------------------------
/Chapter-05/4121/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {HttpModule} from '@angular/http';
 4 | import {ArticleComponent} from './article.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     HttpModule
10 |   ],
11 |   declarations: [
12 |     ArticleComponent
13 |   ],
14 |   bootstrap: [
15 |     ArticleComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-05/4121/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <article></article>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-05/4121/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-05/4121/How-to-do-it/static/article.json:
--------------------------------------------------------------------------------
1 | {
2 |   "title": "Orthopedic Doctors Ask City for More Sidewalk Cracks",
3 |   "author": "Jake Hsu"
4 | }


--------------------------------------------------------------------------------
/Chapter-05/4121/README.md:
--------------------------------------------------------------------------------
1 | # Basic Utilization of Observables with Http


--------------------------------------------------------------------------------
/Chapter-05/4839/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ClickObserverComponent} from './click-observer.component';
 4 | 
 5 | @NgModule({
 6 |   imports: [
 7 |     BrowserModule
 8 |   ],
 9 |   declarations: [
10 |     ClickObserverComponent
11 |   ],
12 |   bootstrap: [
13 |     ClickObserverComponent
14 |   ]
15 | })
16 | export class AppModule {}
17 | 


--------------------------------------------------------------------------------
/Chapter-05/4839/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <click-observer></click-observer>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-05/4839/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-05/4839/README.md:
--------------------------------------------------------------------------------
1 | # Implementing a Publish-Subscribe Model using Subjects


--------------------------------------------------------------------------------
/Chapter-05/4839/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ClickObserverComponent} from './click-observer.component';
 4 | 
 5 | @NgModule({
 6 |   imports: [
 7 |     BrowserModule
 8 |   ],
 9 |   declarations: [
10 |     ClickObserverComponent
11 |   ],
12 |   bootstrap: [
13 |     ClickObserverComponent
14 |   ]
15 | })
16 | export class AppModule {}
17 | 


--------------------------------------------------------------------------------
/Chapter-05/4839/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <click-observer></click-observer>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-05/4839/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-05/4839/There's-more:-Native-RxJS-Implementation/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ClickObserverComponent} from './click-observer.component';
 4 | 
 5 | @NgModule({
 6 |   imports: [
 7 |     BrowserModule
 8 |   ],
 9 |   declarations: [
10 |     ClickObserverComponent
11 |   ],
12 |   bootstrap: [
13 |     ClickObserverComponent
14 |   ]
15 | })
16 | export class AppModule {}
17 | 


--------------------------------------------------------------------------------
/Chapter-05/4839/There's-more:-Native-RxJS-Implementation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <click-observer></click-observer>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-05/4839/There's-more:-Native-RxJS-Implementation/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-05/6957/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {LoginComponent} from './login.component';
 4 | import {AuthService} from './authentication.service';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     LoginComponent
12 |   ],
13 |   providers: [
14 |     AuthService  
15 |   ],
16 |   bootstrap: [
17 |     LoginComponent
18 |   ]
19 | })
20 | export class AppModule {}
21 | 


--------------------------------------------------------------------------------
/Chapter-05/6957/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <login></login>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-05/6957/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-05/6957/README.md:
--------------------------------------------------------------------------------
1 | # Creating an Observable Authentication Service using BehaviorSubjects


--------------------------------------------------------------------------------
/Chapter-05/6957/There's-more/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {LoginComponent} from './login.component';
 4 | import {AuthService} from './authentication.service';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     LoginComponent
12 |   ],
13 |   providers: [
14 |     AuthService  
15 |   ],
16 |   bootstrap: [
17 |     LoginComponent
18 |   ]
19 | })
20 | export class AppModule {}
21 | 


--------------------------------------------------------------------------------
/Chapter-05/6957/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <login></login>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-05/6957/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-05/8629/How-to-do-it/app/api.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | import {Http} from '@angular/http';
 3 | import {Observable} from 'rxjs/Rx';
 4 | 
 5 | @Injectable()
 6 | export class APIService {
 7 |   constructor(private http_:Http) {}
 8 |   
 9 |   search(query:string):Observable<string> {
10 |     return this.http_
11 |       .get('static/response.json')
12 |       .map(r => r.json()['prefix'] + query)
13 |       .concatMap(
14 |         x => Observable.of(x).delay(Math.random()*1000));
15 |   }
16 | }


--------------------------------------------------------------------------------
/Chapter-05/8629/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {SearchComponent} from './search.component';
 4 | import {APIService} from './api.service';
 5 | import {HttpModule} from '@angular/http';
 6 | import {ReactiveFormsModule} from '@angular/forms';
 7 | 
 8 | @NgModule({
 9 |   imports: [
10 |     BrowserModule,
11 |     HttpModule,
12 |     ReactiveFormsModule
13 |   ],
14 |   declarations: [
15 |     SearchComponent
16 |   ],
17 |   providers: [
18 |     APIService
19 |   ],
20 |   bootstrap: [
21 |     SearchComponent
22 |   ]
23 | })
24 | export class AppModule {}
25 | 


--------------------------------------------------------------------------------
/Chapter-05/8629/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |   </head>
 9 |   <body>
10 |     <search></search>
11 |     
12 |     <script>
13 |       System.import('system-config.js')
14 |         .then(function() {
15 |           System.import('main.ts');
16 |         });
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Chapter-05/8629/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 


--------------------------------------------------------------------------------
/Chapter-05/8629/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-05/8629/README.md:
--------------------------------------------------------------------------------
1 | # Building a Full-Featured AutoComplete with Observables


--------------------------------------------------------------------------------
/Chapter-06/1355/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Article component!'
5 | })
6 | export class ArticleComponent {}
7 | 


--------------------------------------------------------------------------------
/Chapter-06/1355/How-to-do-it/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/1355/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {Router} from '@angular/router';
 3 | 
 4 | @Component({
 5 |   selector: 'root',
 6 |   template: `
 7 |     <h1>Root component</h1>
 8 |     <button (click)="visitDefault()">Default</button>
 9 |     <button (click)="visitArticle()">Article</button>
10 |     <router-outlet></router-outlet>
11 |   `
12 | })
13 | export class RootComponent {
14 |   constructor(private router:Router) {}
15 | 
16 |   visitDefault():void {
17 |     this.router.navigate(['']);
18 |   }
19 |   visitArticle():void {
20 |     this.router.navigate(['article']);
21 |   }
22 | } 
23 | 


--------------------------------------------------------------------------------
/Chapter-06/1355/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/1355/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/1355/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/1355/README.md:
--------------------------------------------------------------------------------
1 | # Selecting a LocationStrategy for Path Construction


--------------------------------------------------------------------------------
/Chapter-06/3308/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Article component!'
5 | })
6 | export class ArticleComponent {}
7 | 


--------------------------------------------------------------------------------
/Chapter-06/3308/How-to-do-it/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/3308/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/3308/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/3308/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/3308/README.md:
--------------------------------------------------------------------------------
1 | # Building Stateful Route Behavior with RouterLinkActive


--------------------------------------------------------------------------------
/Chapter-06/3308/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Article component!'
5 | })
6 | export class ArticleComponent {}
7 | 


--------------------------------------------------------------------------------
/Chapter-06/3308/There's-more/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/3308/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/3308/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/3308/There's-more/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/4553/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   template: `
 5 |     <h2>Article component!</h2>
 6 |     <router-outlet></router-outlet>
 7 |   `
 8 | })
 9 | export class ArticleComponent {}
10 | 


--------------------------------------------------------------------------------
/Chapter-06/4553/How-to-do-it/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/4553/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>Root component</h1>
 7 |     <a [routerLink]="['']">
 8 |        Default</a>
 9 |     <a [routerLink]="['article', {listData: 'foo'}]">
10 |        Article</a>
11 |     <router-outlet></router-outlet>
12 |   `
13 | })
14 | export class RootComponent {}
15 | 


--------------------------------------------------------------------------------
/Chapter-06/4553/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/4553/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/4553/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/4553/README.md:
--------------------------------------------------------------------------------
1 | # Working with Matrix URL Parameters and Routing Arrays


--------------------------------------------------------------------------------
/Chapter-06/6135/How-to-do-it/app/default.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   template: `
 5 |     <h2>Default view!</h2>
 6 |   `
 7 | })
 8 | export class DefaultComponent {}
 9 | 
10 | 


--------------------------------------------------------------------------------
/Chapter-06/6135/How-to-do-it/app/logout.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: ''
5 | })
6 | export class LogoutComponent{}
7 | 


--------------------------------------------------------------------------------
/Chapter-06/6135/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/6135/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/6135/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/6135/README.md:
--------------------------------------------------------------------------------
1 | # Adding Route Authentication Controls with Route Guards


--------------------------------------------------------------------------------
/Chapter-06/6214/How-to-do-it/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/6214/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>Root component</h1>
 7 |     <router-outlet></router-outlet>
 8 |   `
 9 | })
10 | export class RootComponent {} 
11 | 


--------------------------------------------------------------------------------
/Chapter-06/6214/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/6214/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/6214/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/6214/README.md:
--------------------------------------------------------------------------------
1 | # Setting Up an Application to Support Simple Routes


--------------------------------------------------------------------------------
/Chapter-06/7892/How-to-do-it/app/article-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ActivatedRoute} from '@angular/router';
 3 | 
 4 | @Component({
 5 |   template: `
 6 |     <h3>Article Detail</h3>
 7 |     <p>Showing article {{ articleId }}</p>
 8 |     <a [routerLink]="'../'">Back up</a>
 9 |   `
10 | })
11 | export class ArticleDetailComponent {
12 |   articleId:number;
13 |   constructor(private activatedRoute_: ActivatedRoute) {
14 |     activatedRoute_.params
15 |       .subscribe(params => this.articleId = params['articleId']);
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/How-to-do-it/app/article-list.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   template: `
 5 |     <h3>Article List</h3>
 6 |     <p *ngFor="let articleId of articleIds">
 7 |       <a [routerLink]="articleId">
 8 |         Article {{articleId}}
 9 |       </a>
10 |     </p>
11 |   `
12 | })
13 | export class ArticleListComponent {
14 |   articleIds:Array<number> = [1,2,3,4,5];
15 | }
16 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   template: `
 5 |     <h2>Article component!</h2>
 6 |     <router-outlet></router-outlet>
 7 |   `
 8 | })
 9 | export class ArticleComponent {}
10 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/How-to-do-it/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>Root component</h1>
 7 |     <a [routerLink]="['']">
 8 |        Default</a>
 9 |     <a [routerLink]="['article']">
10 |        Article</a>
11 |     <router-outlet></router-outlet>
12 |   `
13 | })
14 | export class RootComponent {}
15 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/7892/README.md:
--------------------------------------------------------------------------------
1 | # Implementing Nested Views with Route Parameters and Child Routes


--------------------------------------------------------------------------------
/Chapter-06/7892/There's-more/app/article-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {Observable} from 'rxjs/Observable';
 3 | import {ActivatedRoute, Params} from '@angular/router';
 4 | 
 5 | @Component({
 6 |   template: `
 7 |     <h3>Article Detail</h3>
 8 |     <p>Showing article {{ (params | async).articleId }}</p>
 9 |     <a [routerLink]="'../'">Back up</a>
10 |   `
11 | })
12 | export class ArticleDetailComponent {
13 |   params:Observable<Params>;
14 |   constructor(private activatedRoute_: ActivatedRoute) {
15 |     this.params = activatedRoute_.params;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/There's-more/app/article-list.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   template: `
 5 |     <h3>Article List</h3>
 6 |     <p *ngFor="let articleId of articleIds">
 7 |       <a [routerLink]="articleId">
 8 |         Article {{articleId}}
 9 |       </a>
10 |     </p>
11 |   `
12 | })
13 | export class ArticleListComponent {
14 |   articleIds:Array<number> = [1,2,3,4,5];
15 | }
16 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   template: `
 5 |     <h2>Article component!</h2>
 6 |     <router-outlet></router-outlet>
 7 |   `
 8 | })
 9 | export class ArticleComponent {}
10 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/There's-more/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/There's-more/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>Root component</h1>
 7 |     <a [routerLink]="['']">
 8 |        Default</a>
 9 |     <a [routerLink]="['article']">
10 |        Article</a>
11 |     <router-outlet></router-outlet>
12 |   `
13 | })
14 | export class RootComponent {}
15 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/7892/There's-more/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/8004/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Article component!'
5 | })
6 | export class ArticleComponent {}
7 | 


--------------------------------------------------------------------------------
/Chapter-06/8004/How-to-do-it/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/8004/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {Router} from '@angular/router';
 3 | 
 4 | @Component({
 5 |   selector: 'root',
 6 |   template: `
 7 |     <h1>Root component</h1>
 8 |     <button (click)="visitDefault()">Default</button>
 9 |     <button (click)="visitArticle()">Article</button>
10 |     <router-outlet></router-outlet>
11 |   `
12 | })
13 | export class RootComponent {
14 |   constructor(private router:Router) {}
15 | 
16 |   visitDefault():void {
17 |     this.router.navigate(['']);
18 |   }
19 |   visitArticle():void {
20 |     this.router.navigate(['article']);
21 |   }
22 | } 
23 | 


--------------------------------------------------------------------------------
/Chapter-06/8004/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/8004/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/8004/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/8004/README.md:
--------------------------------------------------------------------------------
1 | # Navigating with the Router Service


--------------------------------------------------------------------------------
/Chapter-06/9983/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Article component!'
5 | })
6 | export class ArticleComponent {}
7 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/How-to-do-it/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>Root component</h1>
 7 |     <a [routerLink]="['']">Default</a>
 8 |     <a [routerLink]="['article']">Article</a>
 9 |     <router-outlet></router-outlet>
10 |   `
11 | })
12 | export class RootComponent {} 
13 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-06/9983/README.md:
--------------------------------------------------------------------------------
1 | # Navigating with routerLinks


--------------------------------------------------------------------------------
/Chapter-06/9983/There's-more:-Route-Order-Considerations/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Article component!'
5 | })
6 | export class ArticleComponent {}
7 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/There's-more:-Route-Order-Considerations/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   template: 'Default component!'
5 | })
6 | export class DefaultComponent {} 
7 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/There's-more:-Route-Order-Considerations/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>Root component</h1>
 7 |     <a [routerLink]="[defaultPath]">Default</a>
 8 |     <a [routerLink]="[articlePath]">Article</a>
 9 |     <router-outlet></router-outlet>
10 |   `
11 | })
12 | export class RootComponent {
13 |   defaultPath:string = '';
14 |   articlePath:string = 'article';
15 | } 
16 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/There's-more:-Route-Order-Considerations/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/There's-more:-Route-Order-Considerations/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-06/9983/There's-more:-Route-Order-Considerations/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 |   "prefix": "You searched for "
3 | }


--------------------------------------------------------------------------------
/Chapter-07/0049/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Inject} from '@angular/core';
 2 | import {ArticleToken} from './article.token';
 3 | 
 4 | @Component({
 5 |   selector: 'article',
 6 |   template: `
 7 |     <h2>{{article.title}}</h2>
 8 |     <p>{{article.body}}</p>
 9 |     <p *ngIf="article.notes">
10 |       <i>Notes: {{article.notes}}</i>
11 |     </p>
12 |   `
13 | })
14 | export class ArticleComponent {
15 |   article:Object;
16 |   
17 |   constructor(@Inject(ArticleToken) private articleService_) { 
18 |     this.article = articleService_.getArticle();
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/Chapter-07/0049/How-to-do-it/app/article.factory.ts:
--------------------------------------------------------------------------------
 1 | import {ArticleService} from './article.service';
 2 | 
 3 | export function articleFactory(enableEditor?:boolean):ArticleService {
 4 |   return (articleService:ArticleService) => {
 5 |     if (enableEditor) {
 6 |       articleService.enableEditor();
 7 |     }
 8 |     return articleService;
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/Chapter-07/0049/How-to-do-it/app/article.token.ts:
--------------------------------------------------------------------------------
1 | import {OpaqueToken} from '@angular/core';
2 | 
3 | export const ArticleToken = new OpaqueToken('app.article');
4 | 


--------------------------------------------------------------------------------
/Chapter-07/0049/How-to-do-it/app/default-view.directive.ts:
--------------------------------------------------------------------------------
 1 | import {Directive} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | import {articleFactory} from './article.factory';
 4 | import {ArticleToken} from './article.token';
 5 | 
 6 | @Directive({
 7 |   selector: '[default-view]',
 8 |   providers: [    
 9 |     {provide: ArticleToken, 
10 |       useFactory: articleFactory(),
11 |       deps: [ArticleService]
12 |     }
13 |   ]
14 | })
15 | export class DefaultViewDirective {}
16 | 


--------------------------------------------------------------------------------
/Chapter-07/0049/How-to-do-it/app/editor-view.directive.ts:
--------------------------------------------------------------------------------
 1 | import {Directive} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | import {articleFactory} from './article.factory';
 4 | import {ArticleToken} from './article.token';
 5 | 
 6 | @Directive({
 7 |   selector: '[editor-view]',
 8 |   providers: [    
 9 |     {provide: ArticleToken,
10 |       useFactory: articleFactory(true),
11 |       deps: [ArticleService]
12 |     }
13 |   ]
14 | })
15 | export class EditorViewDirective {}
16 | 


--------------------------------------------------------------------------------
/Chapter-07/0049/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <article default-view></article>
 7 |     <article editor-view></article>
 8 |   `
 9 | })
10 | export class RootComponent {}
11 | 


--------------------------------------------------------------------------------
/Chapter-07/0049/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-07/0049/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/0049/README.md:
--------------------------------------------------------------------------------
1 | # Building a Provider-configured Service with useFactory


--------------------------------------------------------------------------------
/Chapter-07/1109/How-to-do-it/app/article-source.interface.ts:
--------------------------------------------------------------------------------
1 | export interface ArticleSourceInterface {
2 |   getArticle():Article
3 | }
4 | 
5 | export interface Article {
6 |   title:string, 
7 |   body:string, 
8 |   notes?:string 
9 | }


--------------------------------------------------------------------------------
/Chapter-07/1109/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | import {Article} from './article-source.interface';
 4 | 
 5 | @Component({
 6 |   selector: 'article',
 7 |   template: `
 8 |     <h2>{{article.title}}</h2>
 9 |     <p>{{article.body}}</p>
10 |     <p *ngIf="article.notes">
11 |       <i>Notes: {{article.notes}}</i>
12 |     </p>
13 |   `
14 | })
15 | export class ArticleComponent {
16 |   article:Article;
17 |   
18 |   constructor(private articleService_:ArticleService) { 
19 |     this.article = articleService_.getArticle();
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/How-to-do-it/app/article.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | import {Article, ArticleSourceInterface} from './article-source.interface';
 3 | 
 4 | @Injectable()
 5 | export class ArticleService implements ArticleSourceInterface {
 6 |   private title_:string = 
 7 |     "Researchers Determine Ham Sandwich Not Turing Complete";
 8 |   private body_:string = 
 9 |     "Computer science community remains skeptical";
10 | 
11 |   getArticle():Article {
12 |     return {
13 |       title: this.title_,
14 |       body: this.body_
15 |     };
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/How-to-do-it/app/default-view.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | 
 4 | @Component({
 5 |   selector: 'default-view',
 6 |   template: `
 7 |     <h3>Default view</h3>
 8 |     <ng-content></ng-content>
 9 |   `,  
10 |   providers: [ArticleService]
11 | })
12 | export class DefaultViewComponent {}
13 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/How-to-do-it/app/editor-view.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component } from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | import {EditorArticleService} from './editor-article.service';
 4 | 
 5 | @Component({
 6 |   selector: 'editor-view',
 7 |   template: `
 8 |     <h3>Editor view</h3>
 9 |     <ng-content></ng-content>
10 |   `,
11 |   providers: [
12 |     {provide: ArticleService, useClass: EditorArticleService}
13 |   ]
14 | })
15 | export class EditorViewComponent {}
16 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <default-view>
 7 |       <article></article>
 8 |     </default-view>
 9 |     <hr />
10 |     <editor-view>
11 |       <article></article>
12 |     </editor-view>
13 |   `
14 | })
15 | export class RootComponent {}
16 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/README.md:
--------------------------------------------------------------------------------
1 | # Service Injection Aliasing with useClass and useExisting


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more/app/article-source.interface.ts:
--------------------------------------------------------------------------------
1 | export interface ArticleSourceInterface {
2 |   getArticle():Article
3 | }
4 | 
5 | export interface Article {
6 |   title:string, 
7 |   body:string, 
8 |   notes?:string 
9 | }


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | import {Article} from './article-source.interface';
 4 | 
 5 | @Component({
 6 |   selector: 'article',
 7 |   template: `
 8 |     <h2>{{article.title}}</h2>
 9 |     <p>{{article.body}}</p>
10 |     <p *ngIf="article.notes">
11 |       <i>Notes: {{article.notes}}</i>
12 |     </p>
13 |   `
14 | })
15 | export class ArticleComponent {
16 |   article:Article;
17 |   
18 |   constructor(private articleService_:ArticleService) { 
19 |     this.article = articleService_.getArticle();
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more/app/default-view.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | 
 4 | @Component({
 5 |   selector: 'default-view',
 6 |   template: `
 7 |     <h3>Default view</h3>
 8 |     <ng-content></ng-content>
 9 |   `
10 | })
11 | export class DefaultViewComponent {}
12 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more/app/editor-view.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component } from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | import {EditorArticleService} from './editor-article.service';
 4 | 
 5 | @Component({
 6 |   selector: 'editor-view',
 7 |   template: `
 8 |     <h3>Editor view</h3>
 9 |     <ng-content></ng-content>
10 |   `,
11 |   providers: [
12 |     {provide: ArticleService, useExisting: EditorArticleService}
13 |   ]
14 | })
15 | export class EditorViewComponent {}
16 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <default-view>
 7 |       <article></article>
 8 |     </default-view>
 9 |     <editor-view>
10 |       <article></article>
11 |     </editor-view>
12 |     <default-view>
13 |       <article></article>
14 |     </default-view>
15 |     <editor-view>
16 |       <article></article>
17 |     </editor-view>
18 |   `
19 | })
20 | export class RootComponent {}
21 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more:-Refactoring-with-Directive-Providers/app/article-source.interface.ts:
--------------------------------------------------------------------------------
1 | export interface ArticleSourceInterface {
2 |   getArticle():Article
3 | }
4 | 
5 | export interface Article {
6 |   title:string, 
7 |   body:string, 
8 |   notes?:string 
9 | }


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more:-Refactoring-with-Directive-Providers/app/default-view.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | 
 4 | @Component({
 5 |   selector: 'default-view',
 6 |   template: `
 7 |     <h3>Default view</h3>
 8 |     <ng-content></ng-content>
 9 |   `
10 | })
11 | export class DefaultViewComponent {}
12 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more:-Refactoring-with-Directive-Providers/app/editor-view.directive.ts:
--------------------------------------------------------------------------------
 1 | import {Directive } from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | import {EditorArticleService} from './editor-article.service';
 4 | 
 5 | @Directive({
 6 |   selector: '[editor-view]',
 7 |   providers: [
 8 |     {provide: ArticleService, useExisting: EditorArticleService}
 9 |   ]
10 | })
11 | export class EditorViewDirective {}
12 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more:-Refactoring-with-Directive-Providers/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <article></article>
 7 |     <article editor-view></article>
 8 |     <article></article>
 9 |     <article editor-view></article>
10 |   `
11 | })
12 | export class RootComponent {}
13 | 


--------------------------------------------------------------------------------
/Chapter-07/1109/There's-more:-Refactoring-with-Directive-Providers/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {RootComponent} from './root.component';
 4 | import {ArticleModule} from './article.module';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ArticleModule
10 |   ],
11 |   declarations: [
12 |     RootComponent
13 |   ],
14 |   bootstrap: [
15 |     RootComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | 
 4 | @Component({
 5 |   selector: 'article',
 6 |   template: `
 7 |     <p>Article component!</p>
 8 |   `
 9 | })
10 | export class ArticleComponent {
11 |   constructor(private articleService_:ArticleService) {}
12 | }
13 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/How-to-do-it/app/article.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {ArticleComponent} from './article.component';
 3 | import {ArticleService} from './article.service';
 4 | 
 5 | @NgModule({
 6 |   declarations: [
 7 |     ArticleComponent
 8 |   ],
 9 |   providers: [
10 |     ArticleService  
11 |   ],
12 |   bootstrap: [
13 |     ArticleComponent
14 |   ],
15 |   exports: [
16 |     ArticleComponent  
17 |   ]
18 | })
19 | export class ArticleModule {}
20 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/How-to-do-it/app/article.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | 
3 | @Injectable()
4 | export class ArticleService {
5 |   constructor() { 
6 |     console.log('ArticleService constructor!');
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>app component!</h1>
 7 |     <article></article>
 8 |     <article></article>
 9 |   `
10 | })
11 | export class RootComponent {}
12 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/README.md:
--------------------------------------------------------------------------------
1 | # Controlling Service Instance Creation and Injection with NgModule


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Integrating-Different-Services-into-Different-Components/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {RootComponent} from './root.component';
 4 | import {ArticleModule} from './article.module';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ArticleModule
10 |   ],
11 |   declarations: [
12 |     RootComponent
13 |   ],
14 |   bootstrap: [
15 |     RootComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Integrating-Different-Services-into-Different-Components/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | 
 4 | @Component({
 5 |   selector: 'article',
 6 |   template: `
 7 |     <p>Article component!</p>
 8 |   `,
 9 |   providers: [
10 |     ArticleService
11 |   ]
12 | })
13 | export class ArticleComponent {
14 |   constructor(private articleService_:ArticleService) {}
15 | }
16 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Integrating-Different-Services-into-Different-Components/app/article.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {ArticleComponent} from './article.component';
 3 | 
 4 | @NgModule({
 5 |   declarations: [
 6 |     ArticleComponent
 7 |   ],
 8 |   bootstrap: [
 9 |     ArticleComponent
10 |   ],
11 |   exports: [
12 |     ArticleComponent  
13 |   ]
14 | })
15 | export class ArticleModule {}
16 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Integrating-Different-Services-into-Different-Components/app/article.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | 
3 | @Injectable()
4 | export class ArticleService {
5 |   constructor() { 
6 |     console.log('ArticleService constructor!');
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Integrating-Different-Services-into-Different-Components/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>app component!</h1>
 7 |     <article></article>
 8 |     <article></article>
 9 |   `
10 | })
11 | export class RootComponent {}
12 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Integrating-Different-Services-into-Different-Components/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Service-Instantiation/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {RootComponent} from './root.component';
 4 | import {ArticleModule} from './article.module';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule,
 9 |     ArticleModule
10 |   ],
11 |   declarations: [
12 |     RootComponent
13 |   ],
14 |   bootstrap: [
15 |     RootComponent
16 |   ]
17 | })
18 | export class AppModule {}
19 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Service-Instantiation/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | 
 4 | @Component({
 5 |   selector: 'article',
 6 |   template: `
 7 |     <p>Article component!</p>
 8 |   `,
 9 |   providers: [
10 |     ArticleService
11 |   ]
12 | })
13 | export class ArticleComponent {
14 |   constructor(private articleService_:ArticleService) {}
15 | }
16 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Service-Instantiation/app/article.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {ArticleComponent} from './article.component';
 3 | 
 4 | @NgModule({
 5 |   declarations: [
 6 |     ArticleComponent
 7 |   ],
 8 |   bootstrap: [
 9 |     ArticleComponent
10 |   ],
11 |   exports: [
12 |     ArticleComponent  
13 |   ]
14 | })
15 | export class ArticleModule {}
16 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Service-Instantiation/app/article.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | 
3 | @Injectable()
4 | export class ArticleService {
5 |   constructor() { 
6 |     console.log('ArticleService constructor!');
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Service-Instantiation/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>app component!</h1>
 7 |     <button (click)="toggle=!toggle">Toggle</button>
 8 |     <article></article>
 9 |     <article *ngIf="toggle"></article>
10 |   `
11 | })
12 | export class RootComponent {}
13 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Service-Instantiation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-07/2102/There's-more:-Service-Instantiation/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Inject} from '@angular/core';
 2 | import {LOGO_URL} from './logo-url.token';
 3 | 
 4 | @Component({
 5 |   selector: 'article',
 6 |   template: `
 7 |     <img src="{{logoUrl}}">
 8 |     <h2>Fool and His Money Reunited at Last</h2>
 9 |     <p>Author: Jake Hsu</p>
10 |   `
11 | })
12 | export class ArticleComponent {
13 |   logoUrl:string;
14 |   
15 |   constructor(@Inject(LOGO_URL) private logoUrl_) {
16 |     this.logoUrl = logoUrl_;
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/How-to-do-it/app/logo-url.token.ts:
--------------------------------------------------------------------------------
1 | import {OpaqueToken} from '@angular/core';
2 | 
3 | export const LOGO_URL = new OpaqueToken('logo.url');
4 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <article></article>
 7 |   `
 8 | })
 9 | export class RootComponent {}
10 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/README.md:
--------------------------------------------------------------------------------
1 | # Injecting a Value as a Service with useValue and OpaqueTokens


--------------------------------------------------------------------------------
/Chapter-07/3032/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Inject} from '@angular/core';
 2 | import {EditorArticleService} from './editor-article.service';
 3 | 
 4 | @Component({
 5 |   selector: 'article',
 6 |   template: `
 7 |     <h2>{{title}}</h2>
 8 |     <p>{{body}}</p>
 9 |   `
10 | })
11 | export class ArticleComponent {
12 |   title:string;
13 |   body:string;
14 |   
15 |   constructor(private editorArticleService_:EditorArticleService) {
16 |     let article = editorArticleService_.getArticle();
17 |     this.title = article.title;
18 |     this.body = article.body;
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/There's-more/app/editor-article.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | 
 3 | export const MockEditorArticleService = {
 4 |   getArticle: () => ({ 
 5 |     title: "Mock title",
 6 |     body: "Mock body"
 7 |   })
 8 | };
 9 | 
10 | @Injectable()
11 | export class EditorArticleService {
12 |   private title_:string = 
13 |     "Prominent Vegan Embroiled in Scrambled Eggs Scandal";
14 |   private body_:string = 
15 |     "Tofu Farming Alliance retracted their endorsement.";
16 | 
17 |   getArticle() {
18 |     return {
19 |       title: this.title_,
20 |       body: this.body_
21 |     };
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/There's-more/app/editor-view.directive.ts:
--------------------------------------------------------------------------------
1 | import {Directive} from '@angular/core';
2 | import {EditorArticleService} from './editor-article.service';
3 | 
4 | @Directive({
5 |   selector: '[editor-view]',
6 |   providers: [EditorArticleService]
7 | })
8 | export class EditorViewDirective {}
9 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/There's-more/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <article></article>
 7 |     <article editor-view></article>
 8 |   `
 9 | })
10 | export class RootComponent {}
11 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-07/3032/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/4263/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {RootComponent} from './root.component';
 4 | import {ArticleService} from './article.service';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     BrowserModule
 9 |   ],
10 |   declarations: [
11 |     RootComponent
12 |   ],
13 |   providers: [
14 |     ArticleService  
15 |   ],
16 |   bootstrap: [
17 |     RootComponent
18 |   ]
19 | })
20 | export class AppModule {}
21 | 


--------------------------------------------------------------------------------
/Chapter-07/4263/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {ArticleService} from './article.service';
 3 | 
 4 | @Component({
 5 |   selector: 'root',
 6 |   template: `
 7 |     <h1>app component!</h1>
 8 |     <button (click)="fillArticle()">Show article</button>
 9 |     <h2>{{title}}</h2>
10 |   `
11 | })
12 | export class RootComponent {
13 |   title:string;
14 | 
15 |   constructor(private articleService_:ArticleService) {}
16 |   
17 |   fillArticle():void {
18 |     this.title = this.articleService_.getTitle();    
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/Chapter-07/4263/How-to-do-it/article.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | 
 3 | @Injectable()
 4 | export class ArticleService {
 5 |   private title_:string = `
 6 |     CFO Yodels Quarterly Earnings Call, Stock Skyrockets
 7 |   `;
 8 |   getTitle() {
 9 |     return this.title_;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/Chapter-07/4263/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/"> 
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-07/4263/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-07/4263/README.md:
--------------------------------------------------------------------------------
1 | # Injecting a Simple Service into a Component


--------------------------------------------------------------------------------
/Chapter-08/1053/How-to-do-it/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "emitDecoratorMetadata": true,
 7 |     "experimentalDecorators": true,
 8 |     "noImplicitAny": true
 9 |   }
10 | }


--------------------------------------------------------------------------------
/Chapter-08/2283/How-to-do-it/article.ts:
--------------------------------------------------------------------------------
1 | export const article = "Cool story, bro";


--------------------------------------------------------------------------------
/Chapter-08/2283/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <script src="node_modules/systemjs/dist/system.js">
 4 |     </script>
 5 |     <script src="node_modules/typescript/lib/typescript.js">
 6 |     </script>
 7 |     <script>
 8 |       System.config({
 9 |         transpiler: 'typescript'
10 |       });
11 |       System.import('main.ts');
12 |     </script>
13 |   </head>
14 |     <body>
15 |       <h1 id="text"></h1>
16 |     </body>
17 | </html>


--------------------------------------------------------------------------------
/Chapter-08/2283/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {article} from './article.ts';
2 | 
3 | document.getElementById('text')
4 |   .innerHTML = article;


--------------------------------------------------------------------------------
/Chapter-08/2283/How-to-do-it/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "lite-server": "lite-server"
 4 |   },
 5 |   "devDependencies": {
 6 |     "lite-server": "^2.2.2",
 7 |     "systemjs": "^0.19.38",
 8 |     "typescript": "^2.0.3"
 9 |   }
10 | }


--------------------------------------------------------------------------------
/Chapter-08/3310/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>Angular 2 Minimum Viable Application</title>
 4 |     <script src="node_modules/zone.js/dist/zone.js">
 5 |     </script>
 6 |     <script src="node_modules/reflect-metadata/Reflect.js">
 7 |     </script>
 8 |     <script src="dist/bundle.js">
 9 |     </script>
10 |   </head>
11 |   <body>
12 |     <app-root></app-root>
13 |   </body>
14 | </html>


--------------------------------------------------------------------------------
/Chapter-08/3310/How-to-do-it/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   entry: "./app/main.js",
3 |   output: {
4 |     path: "./dist",
5 |     filename: "bundle.js"
6 |   }
7 | };


--------------------------------------------------------------------------------
/Chapter-08/6323/How-to-do-it/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | @Component({
3 |   selector: 'app-root',
4 |   template: '<h1>AppComponent template!</h1>'
5 | })
6 | export class AppComponent {}


--------------------------------------------------------------------------------
/Chapter-08/6323/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | @NgModule({
 6 |   imports: [ BrowserModule ],
 7 |   declarations: [ AppComponent ],
 8 |   bootstrap: [ AppComponent ]
 9 | })
10 | export class AppModule {}


--------------------------------------------------------------------------------
/Chapter-08/6323/How-to-do-it/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);


--------------------------------------------------------------------------------
/Chapter-08/7185/How-to-do-it/bs-config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "server": { "baseDir": "./dist" }
3 | }


--------------------------------------------------------------------------------
/Chapter-08/7185/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 | <html>
2 |   <head>
3 |     <title>Angular 2 Minimum Viable Application</title>
4 |   </head>
5 |   <body>
6 |     <app-root></app-root>
7 |   </body>
8 | </html>


--------------------------------------------------------------------------------
/Chapter-08/7185/How-to-do-it/webpack.config.js:
--------------------------------------------------------------------------------
 1 | varHtmlWebpackPlugin = require('html-webpack-plugin');
 2 | 
 3 | module.exports = {
 4 |   entry: "./src/main.js",
 5 |   output: {
 6 |     path: "./dist",
 7 |     filename: "bundle.js"
 8 |   },
 9 |   plugins: [new HtmlWebpackPlugin({
10 |     template: './src/index.html'
11 |   })]
12 | };


--------------------------------------------------------------------------------
/Chapter-08/7479/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 | <html>
2 |   <head>
3 |     <title>Angular 2 Minimum Viable Application</title>
4 |   </head>head>
5 |   <body>
6 |     <app-root></app-root>
7 |     <script src="dist/bundle.js"></script>
8 |   </body>
9 | </html>


--------------------------------------------------------------------------------
/Chapter-08/7479/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import './polyfills';
2 | import {platformBrowserDynamic}
3 |   from '@angular/platform-browser-dynamic';
4 | import {AppModule} from './app/app.module';
5 | 
6 | platformBrowserDynamic().bootstrapModule(AppModule);


--------------------------------------------------------------------------------
/Chapter-08/7479/How-to-do-it/polyfills.ts:
--------------------------------------------------------------------------------
1 | import "reflect-metadata";
2 | import "zone.js";


--------------------------------------------------------------------------------
/Chapter-09/3444/How-to-do-it/src/app/magic-eight-ball/magic-eight-ball.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { MagicEightBallService } from '../magic-eight-ball.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-magic-eight-ball',
 6 |   template: `
 7 |     <button (click)="update()">Click me!</button>
 8 |     <h1>{{ result }}</h1>
 9 |   `
10 | })
11 | export class MagicEightBallComponent {
12 |   result: string = '';
13 | 
14 |   constructor(private magicEightBallService: MagicEightBallService) {}
15 | 
16 |   update() {
17 |     this.result = this.magicEightBallService.reveal();
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/Chapter-09/3935/How-to-do-it/src/app/article/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | @Component({
 3 |   selector: 'app-article',
 4 |   template: `
 5 |     <h1>
 6 |     {{ title }}
 7 |     </h1>
 8 |   `
 9 | })
10 | export class ArticleComponent {
11 |   title: string = 'Captain Hook Sues Over Spork Snafu';
12 | }


--------------------------------------------------------------------------------
/Chapter-09/3998/How-to-do-it/karma.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(config) {
 2 |   config.set({
 3 |     browsers: ['PhantomJS'],
 4 |     frameworks: [
 5 |       'jasmine'
 6 |     ],
 7 |     files: [
 8 |       'src/*.spec.js'
 9 |     ],
10 |     plugins : [
11 |       'karma-webpack',
12 |       'karma-jasmine', 
13 |       'karma-phantomjs-launcher'
14 |     ],
15 |     preprocessors: {
16 |       'src/*.spec.js': ['webpack']
17 |     }
18 |   })
19 | }


--------------------------------------------------------------------------------
/Chapter-09/3998/How-to-do-it/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "test": "concurrently 'npm run tsc:w' 'karma start karma.conf.js'",
 4 |     "tsc": "tsc",
 5 |     "tsc:w": "tsc -w"
 6 |   },
 7 |   "devDependencies": {
 8 |     "@types/jasmine": "^2.5.35",
 9 |     "concurrently": "^3.1.0",
10 |     "jasmine-core": "^2.5.2",
11 |     "karma": "^1.3.0",
12 |     "karma-cli": "^1.0.1",
13 |     "karma-jasmine": "^1.0.2",
14 |     "karma-phantomjs-launcher": "^1.0.2",
15 |     "karma-webpack": "^1.8.0",
16 |     "typescript": "^2.0.3",
17 |     "webpack": "^1.13.2"
18 |   }
19 | }


--------------------------------------------------------------------------------
/Chapter-09/3998/How-to-do-it/src/article.spec.ts:
--------------------------------------------------------------------------------
1 | import {Article} from './article';
2 | 
3 | describe('Article unit tests', () => {
4 |   it('Has correct title', () => {
5 |     let a = new Article();
6 |     expect(a.title)
7 |       .toBe("Lab Mice Strike for Improved Working Conditions, Benefits");
8 |   });
9 | });


--------------------------------------------------------------------------------
/Chapter-09/3998/How-to-do-it/src/article.ts:
--------------------------------------------------------------------------------
1 | export class Article {
2 |   title:string =
3 |     "Lab Mice Strike for Improved Working Conditions, Benefits"
4 | }


--------------------------------------------------------------------------------
/Chapter-09/3998/How-to-do-it/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "target": "es5",
4 |     "module": "commonjs",
5 |     "moduleResolution": "node"
6 |   }
7 | }


--------------------------------------------------------------------------------
/Chapter-09/6651/How-to-do-it/src/app/magic-eight-ball/magic-eight-ball.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | import { MagicEightBallService } from '../magic-eight-ball.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-magic-eight-ball',
 6 |   template: `
 7 |     <button (click)="update()">Click me!</button>
 8 |     <h1>{{ result }}</h1>
 9 |   `
10 | })
11 | export class MagicEightBallComponent {
12 |   result: string = '';
13 | 
14 |   constructor(private magicEightBallService: MagicEightBallService) {}
15 | 
16 |   update() {
17 |     this.result = this.magicEightBallService.reveal();
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/Chapter-09/8985/How-to-do-it/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'app-root',
5 |   template: '<h1>AppComponent template!</h1>'
6 | })
7 | export class AppComponent {}
8 | 


--------------------------------------------------------------------------------
/Chapter-09/8985/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | @NgModule({
 6 |   imports: [ BrowserModule ],
 7 |   declarations: [ AppComponent ],
 8 |   bootstrap: [ AppComponent ]
 9 | })
10 | export class AppModule {}
11 | 


--------------------------------------------------------------------------------
/Chapter-09/8985/How-to-do-it/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-09/8985/How-to-do-it/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('App E2E Test Suite', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should have the correct h1 text', () => {
11 |     page.navigate();
12 | 
13 |     expect(page.getHeaderText())
14 |       .toEqual('AppComponent template!');
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/Chapter-09/8985/How-to-do-it/e2e/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, element, by } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigate() {
 5 |     browser.get('/');
 6 |   }
 7 | 
 8 |   getHeaderText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/Chapter-09/8985/How-to-do-it/e2e/bs-config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "open": false
3 | }


--------------------------------------------------------------------------------
/Chapter-09/8985/How-to-do-it/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "emitDecoratorMetadata": true,
 7 |     "experimentalDecorators": true,
 8 |     "noImplicitAny": true
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/Chapter-09/8985/How-to-do-it/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | exports.config = {
 2 |   specs: [
 3 |     './e2e/**/*.e2e-spec.ts'
 4 |   ],
 5 |   capabilities: {
 6 |     'browserName': 'chrome'
 7 |   },
 8 |   baseUrl: 'http://localhost:3000/',
 9 |   framework: 'jasmine',
10 |   useAllAngular2AppRoots: true,
11 |   beforeLaunch: function() {
12 |     require('ts-node').register({
13 |       project: 'e2e'
14 |     });
15 |   }
16 | }


--------------------------------------------------------------------------------
/Chapter-09/8985/How-to-do-it/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "emitDecoratorMetadata": true,
 7 |     "experimentalDecorators": true,
 8 |     "noImplicitAny": true
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/Chapter-10/0279/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h1>{{title}}</h1>
 7 |   `
 8 | })
 9 | export class ArticleComponent {
10 |   title:string = 
11 |     'Baboon\'s Stock Picks Crush Top-Performing Hedge Fund';
12 | }
13 | 
14 | 


--------------------------------------------------------------------------------
/Chapter-10/0279/How-to-do-it/app/article.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {ArticleComponent} from './article.component';
 3 | import {Routes, RouterModule} from '@angular/router';
 4 | 
 5 | const articleRoutes:Routes = [
 6 |   {
 7 |     path: '',
 8 |     component: ArticleComponent
 9 |   }
10 | ];
11 | 
12 | @NgModule({
13 |   imports: [
14 |     RouterModule.forChild(articleRoutes)
15 |   ],
16 |   declarations: [
17 |     ArticleComponent
18 |   ],
19 |   exports: [
20 |     ArticleComponent
21 |   ]
22 | })
23 | export class ArticleModule {}


--------------------------------------------------------------------------------
/Chapter-10/0279/How-to-do-it/app/link.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'app-link',
5 |   template: `
6 |     <a routerLink="/article">article</a>
7 |   `
8 | })
9 | export class LinkComponent {}


--------------------------------------------------------------------------------
/Chapter-10/0279/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'root',
 5 |   template: `
 6 |     <h1>Root component</h1>
 7 |     <router-outlet></router-outlet>
 8 |   `
 9 | })
10 | export class RootComponent {}


--------------------------------------------------------------------------------
/Chapter-10/0279/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-10/0279/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-10/0279/README.md:
--------------------------------------------------------------------------------
1 | # Configuring an application to use lazy loading


--------------------------------------------------------------------------------
/Chapter-10/0279/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {AuthService} from './auth.service';
 3 | 
 4 | @Component({
 5 |   selector: 'article',
 6 |   template: `
 7 |     <h1>{{title}}</h1>
 8 |   `
 9 | })
10 | export class ArticleComponent {
11 |   title:string = 
12 |     'Baboon\'s Stock Picks Crush Top-Performing Hedge Fund';
13 | 
14 |   constructor(private authService_:AuthService) {
15 |     console.log(authService_);
16 |   }
17 | }
18 | 
19 | 


--------------------------------------------------------------------------------
/Chapter-10/0279/There's-more/app/article.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {ArticleComponent} from './article.component';
 3 | import {Routes, RouterModule} from '@angular/router';
 4 | import {AuthModule} from './auth.module';
 5 | 
 6 | const articleRoutes:Routes = [
 7 |   {
 8 |     path: '',
 9 |     component: ArticleComponent
10 |   }
11 | ];
12 | 
13 | @NgModule({
14 |   imports: [
15 |     RouterModule.forChild(articleRoutes),
16 |     AuthModule
17 |   ],
18 |   declarations: [
19 |     ArticleComponent
20 |   ],
21 |   exports: [
22 |     ArticleComponent
23 |   ]
24 | })
25 | export class ArticleModule {}


--------------------------------------------------------------------------------
/Chapter-10/0279/There's-more/app/auth.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule, ModuleWithProviders} from "@angular/core";
 2 | import {AuthService} from "./auth.service";
 3 | 
 4 | @NgModule({})
 5 | export class AuthModule {
 6 |   static forRoot():ModuleWithProviders {
 7 |     return {
 8 |       ngModule: AuthModule,
 9 |       providers: [
10 |         AuthService
11 |       ]
12 |     };
13 |   }
14 | }


--------------------------------------------------------------------------------
/Chapter-10/0279/There's-more/app/auth.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | 
3 | @Injectable()
4 | export class AuthService {
5 |   constructor() {
6 |     console.log('instantiated AuthService');
7 |   }
8 | }


--------------------------------------------------------------------------------
/Chapter-10/0279/There's-more/app/link.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'app-link',
5 |   template: `
6 |     <a routerLink="/article">article</a>
7 |   `
8 | })
9 | export class LinkComponent {}


--------------------------------------------------------------------------------
/Chapter-10/0279/There's-more/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {AuthService} from './auth.service';
 3 | 
 4 | @Component({
 5 |   selector: 'root',
 6 |   template: `
 7 |     <h1>Root component</h1>
 8 |     <router-outlet></router-outlet>
 9 |   `
10 | })
11 | export class RootComponent {
12 |   constructor(private authService_:AuthService) {
13 |     console.log(authService_);
14 |   }
15 | }


--------------------------------------------------------------------------------
/Chapter-10/0279/There's-more/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-10/0279/There's-more/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-10/0623/How-to-do-it/add-random.pipe.ts:
--------------------------------------------------------------------------------
 1 | import {Pipe, PipeTransform} from '@angular/core';
 2 | 
 3 | @Pipe({
 4 |   name: 'addRandomPipe',
 5 |   pure: false
 6 | })
 7 | export class AddRandomPipe implements PipeTransform {
 8 |   transform(value:string):string {
 9 |     return value + Math.random();
10 |   }
11 | }


--------------------------------------------------------------------------------
/Chapter-10/0623/How-to-do-it/app.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, ChangeDetectionStrategy }
 2 |   from '@angular/core';
 3 | import {AddRandomPipe} from './add-random.pipe';
 4 | 
 5 | @Component({
 6 |   selector: 'app-root',
 7 |   template: `
 8 |     <input #t>
 9 |     <button (click)="update(t.value)">Save</button>
10 |     <h1>{{ title | addRandomPipe }}</h1>
11 |   `,
12 |   changeDetection: ChangeDetectionStrategy.OnPush
13 | })
14 | export class AppComponent {
15 |   title:string = '';
16 |   update(newTitle:string) {
17 |     this.title = newTitle;
18 |   }
19 | }


--------------------------------------------------------------------------------
/Chapter-10/0623/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic}
2 |   from '@angular/platform-browser-dynamic';
3 | import {enableProdMode} from '@angular/core';
4 | import {AppModule} from './app/';
5 | 
6 | enableProdMode();
7 | platformBrowserDynamic().bootstrapModule(AppModule);


--------------------------------------------------------------------------------
/Chapter-10/0623/There's-more/add-random.pipe.ts:
--------------------------------------------------------------------------------
 1 | import {Pipe, PipeTransform} from '@angular/core';
 2 | 
 3 | @Pipe({
 4 |   name: 'addRandomPipe',
 5 |   pure: false
 6 | })
 7 | export class AddRandomPipe implements PipeTransform {
 8 |   cache:Object = {};
 9 |   transform(input:string):string {
10 |     let value = this.cache[input];
11 |     if (!value || value.expire < Date.now()) {
12 |       value = {
13 |         text: input + Math.random(),
14 |         // Expires in one second
15 |         expire: Date.now() + 1000
16 |       }
17 |       this.cache[input] = value;
18 |     }
19 |     return value.text;
20 |   }
21 | }


--------------------------------------------------------------------------------
/Chapter-10/1463/How-to-do-it/app.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, ViewEncapsulation} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   template: `
 6 |     <h1>
 7 |     {{title}}
 8 |     </h1>
 9 |   `,
10 |   styles: [`
11 |     h1 {
12 |     color: red;
13 |     }
14 |   `],
15 |   encapsulation: ViewEncapsulation.Emulated
16 | })
17 | export class AppComponent {
18 |   title = 'app works!';
19 | }


--------------------------------------------------------------------------------
/Chapter-10/1859/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {WorkerAppModule} from '@angular/platform-webworker';
 3 | import {AppModule} from './app.module';
 4 | import {ArticleComponent} from './article.component';
 5 | 
 6 | @NgModule({
 7 |   imports: [
 8 |     WorkerAppModule
 9 |   ], 
10 |   bootstrap: [
11 |     ArticleComponent
12 |   ],
13 |   declarations: [
14 |     ArticleComponent
15 |   ]
16 | })
17 | export class AppModule {}
18 | 


--------------------------------------------------------------------------------
/Chapter-10/1859/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'article',
 5 |   template: `
 6 |     <h2>{{title}}</h2>
 7 |   `
 8 | })
 9 | export class ArticleComponent {
10 |   title:string = 'Survey Indicates Sippy Cup Best Way to Drink Rare Wine';
11 | }
12 | 
13 | 


--------------------------------------------------------------------------------
/Chapter-10/1859/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <article></article>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-10/1859/How-to-do-it/loader.js:
--------------------------------------------------------------------------------
1 | importScripts(
2 |   "https://unpkg.com/systemjs/dist/system.js",
3 |   "https://unpkg.com/zone.js/dist/zone.min.js",
4 |   "https://unpkg.com/reflect-metadata/Reflect.js",
5 |   "./system-config.js");
6 | 
7 | System.import("./web-worker-main.ts");


--------------------------------------------------------------------------------
/Chapter-10/1859/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {PlatformRef} from '@angular/core';
2 | import {UiArguments, FnArg, PRIMITIVE, ClientMessageBrokerFactory} from '@angular/platform-webworker';
3 | import {bootstrapWorkerUi} from "@angular/platform-webworker";
4 | 
5 | bootstrapWorkerUi(window.location.href + "loader.js");
6 | 
7 | 


--------------------------------------------------------------------------------
/Chapter-10/1859/README.md:
--------------------------------------------------------------------------------
1 | # Configuring the Angular 2 Renderer to use Web Workers


--------------------------------------------------------------------------------
/Chapter-10/4909/How-to-do-it/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {RootComponent} from './root.component';
 4 | import {ArticleComponent} from './article.component';
 5 | 
 6 | 
 7 | @NgModule({
 8 |   imports: [
 9 |     BrowserModule
10 |   ],
11 |   declarations: [
12 |     ArticleComponent,
13 |     RootComponent
14 |   ],
15 |   bootstrap: [
16 |     RootComponent
17 |   ]
18 | })
19 | export class AppModule {}
20 | 


--------------------------------------------------------------------------------
/Chapter-10/4909/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {Subject} from 'rxjs/Subject';
 3 | import {Observable} from 'rxjs/Observable';
 4 | 
 5 | @Component({
 6 |   selector: 'root',
 7 |   template: `
 8 |   	<button (click)="shareSubject.next($event)">Share!</button>
 9 |   	<article [shares]="shareEmitter"></article>
10 |   `
11 | })
12 | export class RootComponent  {
13 |   shareSubject:Subject<Event> = new Subject();
14 |   shareEmitter:Observable<Event> = this.shareSubject.asObservable();
15 | }
16 | 


--------------------------------------------------------------------------------
/Chapter-10/4909/How-to-do-it/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
 5 |     <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
 6 |     <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 7 |     <script src="system-config.js"></script>
 8 |     <base href="/">
 9 |   </head>
10 |   <body>
11 |     <root></root>
12 |     
13 |     <script>
14 |       System.import('system-config.js')
15 |         .then(function() {
16 |           System.import('main.ts');
17 |         });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Chapter-10/4909/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 | 
6 | 


--------------------------------------------------------------------------------
/Chapter-10/4909/README.md:
--------------------------------------------------------------------------------
1 | # Configuring components to use explicit change detection with OnPush


--------------------------------------------------------------------------------
/Chapter-10/8676/How-to-do-it/app.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, NgZone} from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   template: `<button (click)="foo()">foo</button>`
 6 | })
 7 | export class AppComponent {
 8 |   constructor(private zone:NgZone) {
 9 |     zone.onStable.subscribe(() => console.log('stable'));
10 |     zone.onUnstable.subscribe(() => console.log('unstable'));
11 |   }
12 |   foo() {
13 |     setTimeout(() => console.log('timeout handler'), 1000);
14 |   }
15 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular-2-cookbook
2 | Source code for Angular 2 Cookbook
3 | 


--------------------------------------------------------------------------------