├── Chapter 01
├── 1008
│ ├── README.md
│ └── How-to-do-it
│ │ └── index.html
├── 1499
│ ├── README.md
│ └── How-to-do-it
│ │ ├── app
│ │ ├── ng1.module.ts
│ │ ├── root.component.ts
│ │ └── article.component.ts
│ │ └── main.ts
├── 2842
│ ├── README.md
│ └── How-to-do-it
│ │ ├── app
│ │ ├── root.component.ts
│ │ ├── article.component.ts
│ │ ├── article.service.ts
│ │ ├── ng1.module.ts
│ │ └── ng2.module.ts
│ │ └── main.ts
├── 4137
│ ├── README.md
│ └── How-to-do-it
│ │ ├── app
│ │ ├── ng1.module.ts
│ │ ├── root.component.ts
│ │ └── ng2.module.ts
│ │ └── main.ts
├── 5637
│ ├── README.md
│ └── How-to-do-it
│ │ ├── index.html
│ │ └── app.js
├── 7756
│ ├── README.md
│ ├── How-to-do-it
│ │ └── index.html
│ └── There's-more
│ │ └── index.html
└── 0431
│ ├── README.md
│ └── How-to-do-it
│ └── index.html
├── Chapter 02
├── 1315
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
├── 2048
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── app.module.ts
│ │ └── article.component.ts
│ │ └── index.html
├── 3211
│ ├── README.md
│ ├── How-it-works
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── app.module.ts
│ │ │ └── article-list.component.ts
│ │ └── index.html
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── app.module.ts
│ │ └── article-list.component.ts
│ │ └── index.html
├── 3292
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── click-to-reveal.directive.ts
│ │ ├── app.module.ts
│ │ └── article.component.ts
│ │ └── index.html
├── 4437
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── app.module.ts
│ │ │ └── article.component.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ ├── app.module.ts
│ │ └── article.component.ts
│ │ └── index.html
├── 4907
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── article.component.ts
│ │ └── app.module.ts
│ │ └── index.html
├── 5094
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── article.component.ts
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ ├── article.component.ts
│ │ └── app.module.ts
│ │ └── index.html
├── 6172
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── ad-section.component.ts
│ │ ├── app.module.ts
│ │ └── article.component.ts
│ │ └── index.html
├── 6543
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── attribution.component.ts
│ │ │ ├── article.component.ts
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ ├── attribution.component.ts
│ │ ├── article.component.ts
│ │ └── app.module.ts
│ │ └── index.html
├── 6577
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── app.module.ts
│ │ │ └── article.component.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ ├── app.module.ts
│ │ └── article.component.ts
│ │ └── index.html
├── 7386
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── root.component.ts
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ ├── root.component.ts
│ │ └── app.module.ts
│ │ └── index.html
├── 8313
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── logo.component.ts
│ │ └── app.module.ts
│ │ └── index.html
├── 8565
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
└── 8611
│ ├── README.md
│ └── How-to-do-it
│ ├── main.ts
│ ├── app
│ ├── app.module.ts
│ ├── text-editor.component.ts
│ └── article.component.ts
│ └── index.html
├── Chapter 06
├── 1355
│ ├── README.md
│ └── How-to-do-it
│ │ ├── static
│ │ └── response.json
│ │ ├── app
│ │ ├── article.component.ts
│ │ ├── default.component.ts
│ │ └── root.component.ts
│ │ ├── main.ts
│ │ └── index.html
├── 3308
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── static
│ │ │ └── response.json
│ │ ├── app
│ │ │ ├── article.component.ts
│ │ │ └── default.component.ts
│ │ ├── main.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── static
│ │ └── response.json
│ │ ├── app
│ │ ├── article.component.ts
│ │ └── default.component.ts
│ │ ├── main.ts
│ │ └── index.html
├── 4553
│ ├── README.md
│ └── How-to-do-it
│ │ ├── static
│ │ └── response.json
│ │ ├── app
│ │ ├── default.component.ts
│ │ ├── article.component.ts
│ │ └── root.component.ts
│ │ ├── main.ts
│ │ └── index.html
├── 6135
│ ├── README.md
│ └── How-to-do-it
│ │ ├── static
│ │ └── response.json
│ │ ├── app
│ │ ├── logout.component.ts
│ │ └── default.component.ts
│ │ ├── main.ts
│ │ └── index.html
├── 6214
│ ├── README.md
│ └── How-to-do-it
│ │ ├── static
│ │ └── response.json
│ │ ├── app
│ │ ├── default.component.ts
│ │ └── root.component.ts
│ │ ├── main.ts
│ │ └── index.html
├── 7892
│ ├── How-to-do-it
│ │ ├── static
│ │ │ └── response.json
│ │ ├── app
│ │ │ ├── default.component.ts
│ │ │ ├── article.component.ts
│ │ │ ├── root.component.ts
│ │ │ ├── article-list.component.ts
│ │ │ └── article-detail.component.ts
│ │ ├── main.ts
│ │ └── index.html
│ ├── README.md
│ └── There's-more
│ │ ├── static
│ │ └── response.json
│ │ ├── app
│ │ ├── default.component.ts
│ │ ├── article.component.ts
│ │ ├── root.component.ts
│ │ ├── article-list.component.ts
│ │ └── article-detail.component.ts
│ │ ├── main.ts
│ │ └── index.html
├── 8004
│ ├── README.md
│ └── How-to-do-it
│ │ ├── static
│ │ └── response.json
│ │ ├── app
│ │ ├── article.component.ts
│ │ ├── default.component.ts
│ │ └── root.component.ts
│ │ ├── main.ts
│ │ └── index.html
└── 9983
│ ├── README.md
│ ├── How-to-do-it
│ ├── static
│ │ └── response.json
│ ├── app
│ │ ├── article.component.ts
│ │ ├── default.component.ts
│ │ └── root.component.ts
│ ├── main.ts
│ └── index.html
│ └── There's-more_-Route-Order-Considerations
│ ├── static
│ └── response.json
│ ├── app
│ ├── article.component.ts
│ ├── default.component.ts
│ └── root.component.ts
│ ├── main.ts
│ └── index.html
├── Chapter 03
├── 2816
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
├── 3052
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
├── 4076
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── article.component.ts
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
├── 5116
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
├── 7811
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── app.module.ts
│ │ └── delay.validator.ts
│ │ └── index.html
├── 8574
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ └── app.module.ts
│ │ └── index.html
│ ├── There's-more-(1-of-2)
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── app.module.ts
│ │ │ └── max-word-count.validator.ts
│ │ └── index.html
│ └── There's-more-(2-of-2)
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
├── 9302
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
└── 0771
│ ├── README.md
│ ├── How-it-works
│ ├── main.ts
│ ├── app
│ │ └── app.module.ts
│ └── index.html
│ ├── How-to-do-it
│ ├── main.ts
│ ├── app
│ │ ├── article-editor.component.ts
│ │ └── app.module.ts
│ └── index.html
│ └── There's-more
│ ├── main.ts
│ ├── app
│ ├── article-editor.component.ts
│ └── app.module.ts
│ └── index.html
├── Chapter 04
├── 4362
│ ├── README.md
│ └── How-to-do-it
│ │ └── index.html
├── 5195
│ ├── README.md
│ ├── There's-more
│ │ └── index.html
│ ├── How-to-do-it-(1-of-2)
│ │ └── index.html
│ └── How-to-do-it-(2-of-2)
│ │ └── index.html
├── 5244
│ ├── README.md
│ └── How-to-do-it
│ │ ├── index.html
│ │ └── main.ts
├── 6828
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ └── index.html
│ └── There's-more
│ │ └── index.html
├── 8496
│ ├── README.md
│ └── How-to-do-it
│ │ └── index.html
├── 9315
│ ├── README.md
│ └── How-to-do-it
│ │ ├── index.html
│ │ └── main.ts
└── 0905
│ ├── README.md
│ └── How-to-do-it
│ ├── main.ts
│ ├── app
│ ├── app.module.ts
│ └── article.component.ts
│ └── index.html
├── Chapter 05
├── 2417
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── root.component.ts
│ │ └── app.module.ts
│ │ └── index.html
├── 4112
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── inner.component.ts
│ │ └── app.module.ts
│ │ └── index.html
├── 4121
│ ├── README.md
│ └── How-to-do-it
│ │ ├── static
│ │ └── article.json
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
├── 4839
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ └── app.module.ts
│ │ └── index.html
│ ├── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more_-Native-RxJS-Implementation
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
├── 6957
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ └── app.module.ts
│ │ └── index.html
└── 8629
│ ├── README.md
│ └── How-to-do-it
│ ├── static
│ └── response.json
│ ├── main.ts
│ ├── app
│ ├── api.service.ts
│ └── app.module.ts
│ └── index.html
├── Chapter 07
├── 1109
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── article-source.interface.ts
│ │ │ ├── root.component.ts
│ │ │ ├── default-view.component.ts
│ │ │ ├── editor-view.component.ts
│ │ │ ├── article.service.ts
│ │ │ └── article.component.ts
│ │ └── index.html
│ ├── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── article-source.interface.ts
│ │ │ ├── default-view.component.ts
│ │ │ ├── editor-view.component.ts
│ │ │ ├── root.component.ts
│ │ │ └── article.component.ts
│ │ └── index.html
│ └── There's-more_-Refactoring-with-Directive-Providers
│ │ ├── main.ts
│ │ └── app
│ │ ├── article-source.interface.ts
│ │ ├── root.component.ts
│ │ ├── default-view.component.ts
│ │ └── editor-view.directive.ts
├── 2102
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── article.service.ts
│ │ │ ├── root.component.ts
│ │ │ ├── article.component.ts
│ │ │ ├── article.module.ts
│ │ │ └── app.module.ts
│ │ └── index.html
│ ├── There's-more_-Service-Instantiation
│ │ ├── main.ts
│ │ ├── app
│ │ │ ├── article.service.ts
│ │ │ ├── root.component.ts
│ │ │ ├── article.module.ts
│ │ │ ├── article.component.ts
│ │ │ └── app.module.ts
│ │ └── index.html
│ └── There's-more_-Integrating-Different-Services-into-Different-Components
│ │ ├── main.ts
│ │ └── app
│ │ ├── article.service.ts
│ │ ├── root.component.ts
│ │ ├── article.module.ts
│ │ ├── article.component.ts
│ │ └── app.module.ts
├── 3032
│ ├── README.md
│ ├── How-to-do-it
│ │ ├── app
│ │ │ ├── logo-url.token.ts
│ │ │ ├── root.component.ts
│ │ │ └── article.component.ts
│ │ ├── main.ts
│ │ └── index.html
│ └── There's-more
│ │ ├── main.ts
│ │ ├── app
│ │ ├── root.component.ts
│ │ ├── editor-view.directive.ts
│ │ ├── article.component.ts
│ │ └── editor-article.service.ts
│ │ └── index.html
├── 4263
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── article.service.ts
│ │ ├── app
│ │ ├── app.module.ts
│ │ └── root.component.ts
│ │ └── index.html
└── 0049
│ ├── README.md
│ └── How-to-do-it
│ ├── app
│ ├── article.token.ts
│ ├── root.component.ts
│ ├── article.factory.ts
│ ├── default-view.directive.ts
│ ├── editor-view.directive.ts
│ └── article.component.ts
│ ├── main.ts
│ └── index.html
├── Chapter 10
├── 1463
│ └── How-to-do-it
│ │ └── app.component.ts
├── 1859
│ ├── README.md
│ └── How-to-do-it
│ │ ├── loader.js
│ │ ├── main.ts
│ │ ├── app
│ │ ├── article.component.ts
│ │ └── app.module.ts
│ │ └── index.html
├── 4909
│ ├── README.md
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── app.module.ts
│ │ └── root.component.ts
│ │ └── index.html
├── 8676
│ └── How-to-do-it
│ │ └── app.component.ts
├── 0279
│ ├── README.md
│ ├── There's-more
│ │ ├── app
│ │ │ ├── auth.service.ts
│ │ │ ├── link.component.ts
│ │ │ ├── auth.module.ts
│ │ │ ├── root.component.ts
│ │ │ ├── article.component.ts
│ │ │ └── article.module.ts
│ │ ├── main.ts
│ │ └── index.html
│ └── How-to-do-it
│ │ ├── main.ts
│ │ ├── app
│ │ ├── link.component.ts
│ │ ├── root.component.ts
│ │ ├── article.component.ts
│ │ └── article.module.ts
│ │ └── index.html
└── 0623
│ ├── How-to-do-it
│ ├── main.ts
│ ├── add-random.pipe.ts
│ └── app.component.ts
│ └── There's-more
│ └── add-random.pipe.ts
├── Chapter 09
├── 3444
│ └── How-to-do-it
│ │ └── src
│ │ └── app
│ │ └── magic-eight-ball
│ │ └── magic-eight-ball.component.ts
├── 3935
│ └── How-to-do-it
│ │ └── src
│ │ └── app
│ │ └── article
│ │ └── article.component.ts
├── 3998
│ └── How-to-do-it
│ │ ├── src
│ │ ├── article.ts
│ │ └── article.spec.ts
│ │ ├── tsconfig.json
│ │ ├── karma.conf.js
│ │ └── package.json
├── 6651
│ └── How-to-do-it
│ │ └── src
│ │ └── app
│ │ └── magic-eight-ball
│ │ └── magic-eight-ball.component.ts
└── 8985
│ └── How-to-do-it
│ ├── e2e
│ ├── bs-config.json
│ ├── app.po.ts
│ ├── tsconfig.json
│ └── app.e2e-spec.ts
│ ├── app
│ ├── main.ts
│ ├── app.component.ts
│ └── app.module.ts
│ ├── tsconfig.json
│ └── protractor.conf.js
└── Chapter 08
├── 1053
└── How-to-do-it
│ └── tsconfig.json
├── 2283
└── How-to-do-it
│ ├── article.ts
│ ├── main.ts
│ ├── package.json
│ └── index.html
├── 3310
└── How-to-do-it
│ ├── webpack.config.js
│ └── index.html
├── 6323
└── How-to-do-it
│ └── app
│ ├── main.ts
│ ├── app.component.ts
│ └── app.module.ts
├── 7185
└── How-to-do-it
│ ├── bs-config.json
│ ├── index.html
│ └── webpack.config.js
└── 7479
└── How-to-do-it
├── polyfills.ts
├── index.html
└── main.ts
/Chapter 01/5637/README.md:
--------------------------------------------------------------------------------
1 | # Normalizing Service Types
--------------------------------------------------------------------------------
/Chapter 02/8565/README.md:
--------------------------------------------------------------------------------
1 | # Attribute Property Binding
--------------------------------------------------------------------------------
/Chapter 06/9983/README.md:
--------------------------------------------------------------------------------
1 | # Navigating with routerLinks
--------------------------------------------------------------------------------
/Chapter 02/2048/README.md:
--------------------------------------------------------------------------------
1 | # Utilizing Component Lifecycle Hooks
--------------------------------------------------------------------------------
/Chapter 02/8313/README.md:
--------------------------------------------------------------------------------
1 | # Binding to Native Element Attributes
--------------------------------------------------------------------------------
/Chapter 03/3052/README.md:
--------------------------------------------------------------------------------
1 | # Bundling Controls with a FormGroup
--------------------------------------------------------------------------------
/Chapter 03/5116/README.md:
--------------------------------------------------------------------------------
1 | # Implementing basic forms with NgForm
--------------------------------------------------------------------------------
/Chapter 06/8004/README.md:
--------------------------------------------------------------------------------
1 | # Navigating with the Router Service
--------------------------------------------------------------------------------
/Chapter 02/6172/README.md:
--------------------------------------------------------------------------------
1 | # Projecting Nested Content Using ngContent
--------------------------------------------------------------------------------
/Chapter 03/2816/README.md:
--------------------------------------------------------------------------------
1 | # Bundling FormControls with a FormArray
--------------------------------------------------------------------------------
/Chapter 03/8574/README.md:
--------------------------------------------------------------------------------
1 | # Creating and using a custom validator
--------------------------------------------------------------------------------
/Chapter 04/5244/README.md:
--------------------------------------------------------------------------------
1 | # Converting a Promise into an Observable
--------------------------------------------------------------------------------
/Chapter 04/6828/README.md:
--------------------------------------------------------------------------------
1 | # Chaining Promises and Promise Handlers
--------------------------------------------------------------------------------
/Chapter 01/7756/README.md:
--------------------------------------------------------------------------------
1 | # Implementing a Basic Component in Angular 1.5
--------------------------------------------------------------------------------
/Chapter 02/4437/README.md:
--------------------------------------------------------------------------------
1 | # Registering Handlers on Native Browser Events
--------------------------------------------------------------------------------
/Chapter 02/5094/README.md:
--------------------------------------------------------------------------------
1 | # Referencing Elements with Template Variables
--------------------------------------------------------------------------------
/Chapter 04/5195/README.md:
--------------------------------------------------------------------------------
1 | # Understanding and Implementing Basic Promises
--------------------------------------------------------------------------------
/Chapter 05/4121/README.md:
--------------------------------------------------------------------------------
1 | # Basic Utilization of Observables with Http
--------------------------------------------------------------------------------
/Chapter 07/4263/README.md:
--------------------------------------------------------------------------------
1 | # Injecting a Simple Service into a Component
--------------------------------------------------------------------------------
/Chapter 10/0279/README.md:
--------------------------------------------------------------------------------
1 | # Configuring an application to use lazy loading
--------------------------------------------------------------------------------
/Chapter 01/1008/README.md:
--------------------------------------------------------------------------------
1 | # Migrating an Application to Component Directives
--------------------------------------------------------------------------------
/Chapter 02/3292/README.md:
--------------------------------------------------------------------------------
1 | # Attaching Behavior to DOM Elements with Directives
--------------------------------------------------------------------------------
/Chapter 04/4362/README.md:
--------------------------------------------------------------------------------
1 | # Cancelling Asynchronous Actions with Promise.race()
--------------------------------------------------------------------------------
/Chapter 04/8496/README.md:
--------------------------------------------------------------------------------
1 | # Implementing Promise Barriers with Promise.all()
--------------------------------------------------------------------------------
/Chapter 06/1355/README.md:
--------------------------------------------------------------------------------
1 | # Selecting a LocationStrategy for Path Construction
--------------------------------------------------------------------------------
/Chapter 06/6214/README.md:
--------------------------------------------------------------------------------
1 | # Setting Up an Application to Support Simple Routes
--------------------------------------------------------------------------------
/Chapter 09/8985/How-to-do-it/e2e/bs-config.json:
--------------------------------------------------------------------------------
1 | {
2 | "open": false
3 | }
--------------------------------------------------------------------------------
/Chapter 01/4137/README.md:
--------------------------------------------------------------------------------
1 | # Connecting Angular 1 and Angular 2 with UpgradeModule
--------------------------------------------------------------------------------
/Chapter 02/4907/README.md:
--------------------------------------------------------------------------------
1 | # Referencing a Parent Component from a Child Component
--------------------------------------------------------------------------------
/Chapter 02/6577/README.md:
--------------------------------------------------------------------------------
1 | # Using Decorators to Build and Style a Simple Component
--------------------------------------------------------------------------------
/Chapter 03/0771/README.md:
--------------------------------------------------------------------------------
1 | # Implementing simple two-way data binding with ngModel
--------------------------------------------------------------------------------
/Chapter 03/4076/README.md:
--------------------------------------------------------------------------------
1 | # Implementing basic field validation with formControl
--------------------------------------------------------------------------------
/Chapter 05/4839/README.md:
--------------------------------------------------------------------------------
1 | # Implementing a Publish-Subscribe Model using Subjects
--------------------------------------------------------------------------------
/Chapter 05/8629/README.md:
--------------------------------------------------------------------------------
1 | # Building a Full-Featured AutoComplete with Observables
--------------------------------------------------------------------------------
/Chapter 06/3308/README.md:
--------------------------------------------------------------------------------
1 | # Building Stateful Route Behavior with RouterLinkActive
--------------------------------------------------------------------------------
/Chapter 06/4553/README.md:
--------------------------------------------------------------------------------
1 | # Working with Matrix URL Parameters and Routing Arrays
--------------------------------------------------------------------------------
/Chapter 06/6135/README.md:
--------------------------------------------------------------------------------
1 | # Adding Route Authentication Controls with Route Guards
--------------------------------------------------------------------------------
/Chapter 07/0049/README.md:
--------------------------------------------------------------------------------
1 | # Building a Provider-configured Service with useFactory
--------------------------------------------------------------------------------
/Chapter 07/1109/README.md:
--------------------------------------------------------------------------------
1 | # Service Injection Aliasing with useClass and useExisting
--------------------------------------------------------------------------------
/Chapter 08/2283/How-to-do-it/article.ts:
--------------------------------------------------------------------------------
1 | export const article = "Cool story, bro";
--------------------------------------------------------------------------------
/Chapter 10/1859/README.md:
--------------------------------------------------------------------------------
1 | # Configuring the Angular 2 Renderer to use Web Workers
--------------------------------------------------------------------------------
/Chapter 01/0431/README.md:
--------------------------------------------------------------------------------
1 | # Componentizing Directives Using controllerAs Encapsulation
--------------------------------------------------------------------------------
/Chapter 02/8611/README.md:
--------------------------------------------------------------------------------
1 | # Generating and Capturing Custom Events Using EventEmitter
--------------------------------------------------------------------------------
/Chapter 03/9302/README.md:
--------------------------------------------------------------------------------
1 | # Implementing basic forms with FormBuilder and formControlName
--------------------------------------------------------------------------------
/Chapter 04/0905/README.md:
--------------------------------------------------------------------------------
1 | # Converting an Http Service Observable into a ZoneAwarePromise
--------------------------------------------------------------------------------
/Chapter 07/3032/README.md:
--------------------------------------------------------------------------------
1 | # Injecting a Value as a Service with useValue and OpaqueTokens
--------------------------------------------------------------------------------
/Chapter 02/6543/README.md:
--------------------------------------------------------------------------------
1 | # Passing Members From a Parent Component Into a Child Component
--------------------------------------------------------------------------------
/Chapter 03/7811/README.md:
--------------------------------------------------------------------------------
1 | # Creating and using a custom asynchronous validator with Promises
--------------------------------------------------------------------------------
/Chapter 05/4112/README.md:
--------------------------------------------------------------------------------
1 | # Using QueryLists and Observables to Follow Changes in ViewChildren
--------------------------------------------------------------------------------
/Chapter 05/8629/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 06/1355/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 06/3308/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 06/3308/There's-more/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 06/4553/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 06/6135/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 06/6214/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/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/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 06/8004/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 06/9983/How-to-do-it/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 07/2102/README.md:
--------------------------------------------------------------------------------
1 | # Controlling Service Instance Creation and Injection with NgModule
--------------------------------------------------------------------------------
/Chapter 08/7185/How-to-do-it/bs-config.json:
--------------------------------------------------------------------------------
1 | {
2 | "server": { "baseDir": "./dist" }
3 | }
--------------------------------------------------------------------------------
/Chapter 08/7479/How-to-do-it/polyfills.ts:
--------------------------------------------------------------------------------
1 | import "reflect-metadata";
2 | import "zone.js";
--------------------------------------------------------------------------------
/Chapter 02/1315/README.md:
--------------------------------------------------------------------------------
1 | # Configuring Mutual Parent-Child Awareness with ViewChild and forwardRef
--------------------------------------------------------------------------------
/Chapter 02/3211/README.md:
--------------------------------------------------------------------------------
1 | # Using ngFor and ngIf Structural Directives for Model-based DOM Control
--------------------------------------------------------------------------------
/Chapter 04/9315/README.md:
--------------------------------------------------------------------------------
1 | # Creating Promise Wrappers with Promise.resolve() and Promise.reject()
--------------------------------------------------------------------------------
/Chapter 05/6957/README.md:
--------------------------------------------------------------------------------
1 | # Creating an Observable Authentication Service using BehaviorSubjects
--------------------------------------------------------------------------------
/Chapter 10/4909/README.md:
--------------------------------------------------------------------------------
1 | # Configuring components to use explicit change detection with OnPush
--------------------------------------------------------------------------------
/Chapter 01/2842/README.md:
--------------------------------------------------------------------------------
1 | # Downgrade Angular 2 Providers to Angular 1 Services with downgradeInjectable
--------------------------------------------------------------------------------
/Chapter 02/7386/README.md:
--------------------------------------------------------------------------------
1 | # Configuring Mutual Parent-Child Awareness with ContentChild and forwardRef
--------------------------------------------------------------------------------
/Chapter 01/1499/README.md:
--------------------------------------------------------------------------------
1 | # Downgrading Angular 2 Components to Angular 1 Directives with downgradeComponent
--------------------------------------------------------------------------------
/Chapter 05/2417/README.md:
--------------------------------------------------------------------------------
1 | # Building a Generalized Publish-Subscribe Service to Replace $broadcast, $emit, and $on
--------------------------------------------------------------------------------
/Chapter 06/9983/There's-more_-Route-Order-Considerations/static/response.json:
--------------------------------------------------------------------------------
1 | {
2 | "prefix": "You searched for "
3 | }
--------------------------------------------------------------------------------
/Chapter 01/1499/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/ng1.module.ts:
--------------------------------------------------------------------------------
1 | import 'angular';
2 |
3 | export const Ng1AppModule = angular.module('Ng1AppModule', []);
--------------------------------------------------------------------------------
/Chapter 08/2283/How-to-do-it/main.ts:
--------------------------------------------------------------------------------
1 | import {article} from './article.ts';
2 |
3 | document.getElementById('text')
4 | .innerHTML = article;
--------------------------------------------------------------------------------
/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 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 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 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 09/3998/How-to-do-it/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node"
6 | }
7 | }
--------------------------------------------------------------------------------
/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 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 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/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 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/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/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/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/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/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/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/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/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 08/7185/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Angular 2 Minimum Viable Application
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/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 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/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/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-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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/main.ts:
--------------------------------------------------------------------------------
1 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
2 | import {AppModule} from './app/app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
5 |
--------------------------------------------------------------------------------
/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: 'AppComponent template!
'
5 | })
6 | export class AppComponent {}
--------------------------------------------------------------------------------
/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 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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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 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/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/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/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/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/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/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 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 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/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/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 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)/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/app/default.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | template: `
5 | Default view!
6 | `
7 | })
8 | export class DefaultComponent {}
9 |
10 |
--------------------------------------------------------------------------------
/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/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 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: 'AppComponent template!
'
6 | })
7 | export class AppComponent {}
8 |
--------------------------------------------------------------------------------
/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 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/3032/How-to-do-it/app/root.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'root',
5 | template: `
6 |
7 | `
8 | })
9 | export class RootComponent {}
10 |
--------------------------------------------------------------------------------
/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 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 08/7479/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Angular 2 Minimum Viable Application
4 | head>
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/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 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 | article
7 | `
8 | })
9 | export class LinkComponent {}
--------------------------------------------------------------------------------
/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 | article
7 | `
8 | })
9 | export class LinkComponent {}
--------------------------------------------------------------------------------
/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 | Angular 2 bootstrapped successfully!
7 | `
8 | })
9 | export class RootComponent {}
--------------------------------------------------------------------------------
/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 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 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: `{{val}}`
6 | })
7 | export class InnerComponent {
8 | @Input() val:number;
9 | }
10 |
--------------------------------------------------------------------------------
/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/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 06/4553/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | template: `
5 |
Article component!
6 |
7 | `
8 | })
9 | export class ArticleComponent {}
10 |
--------------------------------------------------------------------------------
/Chapter 06/7892/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | template: `
5 | Article component!
6 |
7 | `
8 | })
9 | export class ArticleComponent {}
10 |
--------------------------------------------------------------------------------
/Chapter 06/7892/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | template: `
5 | Article component!
6 |
7 | `
8 | })
9 | export class ArticleComponent {}
10 |
--------------------------------------------------------------------------------
/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 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 |
7 |
8 |
9 | `
10 | })
11 | export class RootComponent {}
--------------------------------------------------------------------------------
/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 |
7 |
8 |
9 | `
10 | })
11 | export class RootComponent {}
--------------------------------------------------------------------------------
/Chapter 01/2842/How-to-do-it/app/article.component.ts:
--------------------------------------------------------------------------------
1 | export const ng1Article = {
2 | template: `
3 | {{article.title}}
4 | {{article.author}}
5 | `,
6 | controller: (ArticleService, $scope) => {
7 | $scope.article = ArticleService.article;
8 | }
9 | };
--------------------------------------------------------------------------------
/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/3032/There's-more/app/root.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'root',
5 | template: `
6 |
7 |
8 | `
9 | })
10 | export class RootComponent {}
11 |
--------------------------------------------------------------------------------
/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 | Root component
7 |
8 | `
9 | })
10 | export class RootComponent {}
--------------------------------------------------------------------------------
/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/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 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 | Root component
7 |
8 | `
9 | })
10 | export class RootComponent {}
11 |
--------------------------------------------------------------------------------
/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 |
7 | {{title.value}}
8 | `
9 | })
10 | export class ArticleComponent {}
11 |
--------------------------------------------------------------------------------
/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 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 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 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 |
7 |
8 | `
9 | })
10 | export class RootComponent {}
11 |
--------------------------------------------------------------------------------
/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 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 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 | app component!
7 |
8 |
9 | `
10 | })
11 | export class RootComponent {}
12 |
--------------------------------------------------------------------------------
/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 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 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 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 | Written by: {{author}}
7 | `
8 | })
9 | export class AttributionComponent {
10 | @Input() author:string;
11 | }
12 |
--------------------------------------------------------------------------------
/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 | Written by: {{author}}
7 | `
8 | })
9 | export class AttributionComponent {
10 | @Input() author:string;
11 | }
12 |
--------------------------------------------------------------------------------
/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 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/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 01/0431/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
12 |
--------------------------------------------------------------------------------
/Chapter 01/5637/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
12 |
--------------------------------------------------------------------------------
/Chapter 01/7756/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
12 |
--------------------------------------------------------------------------------
/Chapter 01/7756/There's-more/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
12 |
--------------------------------------------------------------------------------
/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: '![]()
'
6 | })
7 | export class LogoComponent {
8 | logoUrl:string =
9 | '//angular.io/resources/images/logos/standard/logo-nav.png';
10 | }
11 |
--------------------------------------------------------------------------------
/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 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 |
6 | {{ title }}
7 |
8 | `
9 | })
10 | export class ArticleComponent {
11 | title: string = 'Captain Hook Sues Over Spork Snafu';
12 | }
--------------------------------------------------------------------------------
/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 | {{title}}
7 | `
8 | })
9 | export class ArticleComponent {
10 | title:string = 'Survey Indicates Sippy Cup Best Way to Drink Rare Wine';
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/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 | {{title}}
7 | `
8 | })
9 | export class ArticleComponent {
10 | title:string =
11 | 'Baboon\'s Stock Picks Crush Top-Performing Hedge Fund';
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/Chapter 01/1008/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
--------------------------------------------------------------------------------
/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 | Default view
8 |
9 | `
10 | })
11 | export class DefaultViewComponent {}
12 |
--------------------------------------------------------------------------------
/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 |
7 | `
8 | })
9 | export class ArticleComponent {
10 | likes:number = 0;
11 |
12 | incrementLikes():void {
13 | this.likes++;
14 | }
15 | }
--------------------------------------------------------------------------------
/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 | app component!
7 |
8 |
9 | `
10 | })
11 | export class RootComponent {}
12 |
--------------------------------------------------------------------------------
/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/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 | {{adText}}
7 |
8 | `
9 | })
10 | export class AdSectionComponent {
11 | adText:string = 'Selfie sticks 40% off!';
12 | }
13 |
--------------------------------------------------------------------------------
/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 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 |
7 |
8 | {{title}}
9 | `
10 | })
11 | export class ArticleEditorComponent {
12 | title:string;
13 | }
14 |
--------------------------------------------------------------------------------
/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 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 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/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 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 | Root component
7 | Default
8 | Article
9 |
10 | `
11 | })
12 | export class RootComponent {}
13 |
--------------------------------------------------------------------------------
/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 | Article component!
8 | `
9 | })
10 | export class ArticleComponent {
11 | constructor(private articleService_:ArticleService) {}
12 | }
13 |
--------------------------------------------------------------------------------
/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 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | `
14 | })
15 | export class RootComponent {}
16 |
--------------------------------------------------------------------------------
/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 |
8 |
9 |
11 |
12 | `
13 | })
14 | export class RootComponent {}
--------------------------------------------------------------------------------
/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 |
7 |
8 |
9 |
10 | `
11 | })
12 | export class RootComponent {}
13 |
--------------------------------------------------------------------------------
/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 | {{title}}
7 |
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/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'article',
5 | template: `
6 | {{title}}
7 |
8 | `
9 | })
10 | export class ArticleComponent {
11 | title:string = 'Belching Choir Begins World Tour';
12 | name:string = 'Jake';
13 | }
14 |
--------------------------------------------------------------------------------
/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 | Default view
8 |
9 | `,
10 | providers: [ArticleService]
11 | })
12 | export class DefaultViewComponent {}
13 |
--------------------------------------------------------------------------------
/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 | Default view
8 |
9 | `
10 | })
11 | export class DefaultViewComponent {}
12 |
--------------------------------------------------------------------------------
/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 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 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 | app component!
7 |
8 |
9 |
10 | `
11 | })
12 | export class RootComponent {}
13 |
--------------------------------------------------------------------------------
/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/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/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 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 | Root component
7 |
8 | Default
9 |
10 | Article
11 |
12 | `
13 | })
14 | export class RootComponent {}
15 |
--------------------------------------------------------------------------------
/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 | Root component
7 |
8 | Default
9 |
10 | Article
11 |
12 | `
13 | })
14 | export class RootComponent {}
15 |
--------------------------------------------------------------------------------
/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 |
7 | {{myTitle}}
8 | `
9 | })
10 | export class ArticleComponent {
11 | myTitle:string;
12 |
13 | setTitle(val:string) {
14 | this.myTitle = val;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/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 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 08/3310/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Angular 2 Minimum Viable Application
4 |
6 |
8 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/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 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 | Root component
7 |
8 | Default
9 |
10 | Article
11 |
12 | `
13 | })
14 | export class RootComponent {}
15 |
--------------------------------------------------------------------------------
/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 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 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 |
7 | {{title}}
8 |
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/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 | Root component
8 |
9 | `
10 | })
11 | export class RootComponent {
12 | constructor(private authService_:AuthService) {
13 | console.log(authService_);
14 | }
15 | }
--------------------------------------------------------------------------------
/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/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/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/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/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 06/7892/How-to-do-it/app/article-list.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | template: `
5 | Article List
6 |
7 |
8 | Article {{articleId}}
9 |
10 |
11 | `
12 | })
13 | export class ArticleListComponent {
14 | articleIds:Array = [1,2,3,4,5];
15 | }
16 |
--------------------------------------------------------------------------------
/Chapter 06/7892/There's-more/app/article-list.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | template: `
5 | Article List
6 |
7 |
8 | Article {{articleId}}
9 |
10 |
11 | `
12 | })
13 | export class ArticleListComponent {
14 | articleIds:Array = [1,2,3,4,5];
15 | }
16 |
--------------------------------------------------------------------------------
/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 |
7 |
8 | {{title}}
9 | `
10 | })
11 | export class ArticleEditorComponent {
12 | title:string = '';
13 | }
14 |
15 |
--------------------------------------------------------------------------------
/Chapter 04/4362/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Chapter 04/5195/There's-more/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Chapter 04/5244/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Chapter 04/6828/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Chapter 04/6828/There's-more/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Chapter 04/8496/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Chapter 04/9315/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
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 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-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 04/5195/How-to-do-it-(1-of-2)/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/Chapter 04/5195/How-to-do-it-(2-of-2)/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/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 | Article component!
8 | `,
9 | providers: [
10 | ArticleService
11 | ]
12 | })
13 | export class ArticleComponent {
14 | constructor(private articleService_:ArticleService) {}
15 | }
16 |
--------------------------------------------------------------------------------
/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/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 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 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 08/2283/How-to-do-it/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
7 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/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 | {{title}}
7 | Shares: {{shareCt}}
8 |
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 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 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 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 | Article component!
8 | `,
9 | providers: [
10 | ArticleService
11 | ]
12 | })
13 | export class ArticleComponent {
14 | constructor(private articleService_:ArticleService) {}
15 | }
16 |
--------------------------------------------------------------------------------
/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 | Root component
7 | Default
8 | Article
9 |
10 | `
11 | })
12 | export class RootComponent {
13 | defaultPath:string = '';
14 | articlePath:string = 'article';
15 | }
16 |
--------------------------------------------------------------------------------
/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 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 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 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 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 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 | {{title}}
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 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 | {{currentDate|date}}
7 | {{title}}
8 | Written by: {{author}}
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 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 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 | Editor view
9 |
10 | `,
11 | providers: [
12 | {provide: ArticleService, useClass: EditorArticleService}
13 | ]
14 | })
15 | export class EditorViewComponent {}
16 |
--------------------------------------------------------------------------------
/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/8676/How-to-do-it/app.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, NgZone} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | template: ``
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 | }
--------------------------------------------------------------------------------
/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/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 | Editor view
9 |
10 | `,
11 | providers: [
12 | {provide: ArticleService, useExisting: EditorArticleService}
13 | ]
14 | })
15 | export class EditorViewComponent {}
16 |
--------------------------------------------------------------------------------
/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 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/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/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/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 07/1109/There's-more/app/root.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'root',
5 | template: `
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | `
19 | })
20 | export class RootComponent {}
21 |
--------------------------------------------------------------------------------
/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/text-editor.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, EventEmitter, Output} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'text-editor',
5 | template: `
6 |
7 | `
8 | })
9 | export class TextEditorComponent {
10 | @Output() countUpdate = new EventEmitter();
11 |
12 | emitWordCount(e:Event) {
13 | this.countUpdate.emit(
14 | (e.target.value.match(/\S+/g) || []).length);
15 | }
16 | }
17 |
18 |
--------------------------------------------------------------------------------
/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-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/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/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/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 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 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 | 
8 | Fool and His Money Reunited at Last
9 | Author: Jake Hsu
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/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 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/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/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 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/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/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 {
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 02/4437/There's-more/app/article.component.ts:
--------------------------------------------------------------------------------
1 | import {Component} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'article',
5 | template: `
6 | {{ title }}
7 | Shares: {{ shareCt }}
8 |
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 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/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/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/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/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/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/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/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 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 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 |
9 |
10 | `
11 | })
12 | export class RootComponent {
13 | shareSubject:Subject = new Subject();
14 | shareEmitter:Observable = this.shareSubject.asObservable();
15 | }
16 |
--------------------------------------------------------------------------------
/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 | {{title}}
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 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 |
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 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 | {{ $ctrl.title }}
16 | Written by: {{ $ctrl.author }}
17 | `
18 | });
19 |
--------------------------------------------------------------------------------
/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 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 |
7 |
8 | {{i}}: {{article.title}}
9 |
10 |
11 | `
12 | })
13 | export class ArticleListComponent {
14 | articles:Array