codecraft-tv / angular-course

Official repository for the Angular: From Theory To Practice Book

Angular from Theory to Practice

This is the official repository for the Angular course on https://angular.codecraft.tv

• Each folder is a chapter in the book, ordered by prefix number.
• Each chapter has a subfolder for each lecture, again ordered by prefix number.
• Each lecture has an index.adoc file which contains the content for that lecture.
• Each lecture folder may also contain code and images folders which contain any code or images needed to support that lecture.

Contributions

Any contributions you make to this effort are greatly appreciated, from a typo to a code change.

Contributors added to the CONTRIBUTORS.adoc will be added to the published book on Amazon the next time it's released (changes are not pushed in real-time to Amazon).

License & Copyright

The materials herein are all © 2016-2019 Asim Hussain.

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License

angular-course's Issues

link for Angular-CLI Activity code doesn't work

Upate HTTP Core video to use HTTPClient API

Re-record video for HTTP Core Client Module lecture

How to hide loading once you already selected an item in the dropdown options?

Once you already selected an item in the dropdown options, it still trigger the observable and display loading. Means, it still calling an api,

Update content for lecture RxJS & Angular to Angular 7 and RxJS 6

The content refers to the old import mechanisms and doesn't use pipes, update it.

missing source nested routes

https://github.com/codecraft-tv/angular-course/tree/current/12.routing/5.nested-routes/code
doesn not have any source code depicting how to do nested routes

Update code for the Angular CLI section to be Angular 7

The source code for the activity section is still Angular 5, update to Angular 7.

runcode broken for user-interaction-and-outputs

https://stackblitz.com/github/codecraft-tv/angular-course/tree/current/1.quickstart/9.user-interaction-and-outputs/code launches page with:
Something went wrong with this repository.
If you think this is a bug, please file an issue in our repo!

Found a mistake in your Pipe activity solution.

Line 13 should be:
text = text.replace(new RegExp(\\b${word}\\b, "gi"), "$%#@!");

otherwise if the input is
"Hell, hell, what the hello hell hello" will only get the second "hell" replaced.

RxJS Section - It's not bolding RxJS

Just saying

RxJS stands for Reactive Extensions for JavaScript

https://codecraft.tv/courses/angular/reactive-programming-with-rxjs/observables-and-rxjs/

Unit testing http

When I replace the search method with a simple getAll method e.g.
getUsers(term:string) { let apiURL = ${this.apiRoot}?term=${term}&media=music&limit=20; return this.http.get<[]>(this.apiURL);

and call
getUsers('U2')

the test fails with no matching url.

Other similar code on the web will pass, but then the test expect(service.results.length).toBe(1+X);
will not fail.

Any ideas appreciated.

Update content for ReactiveForms lecture to use RxJS 6 and Pipes

https://codecraft.tv/courses/angular/forms/reactive-model-form/

Update to Pipes.

Upate HTTP Core lecture to use HTTPClient API

Use HttpClientModule instead.
Talk about some of the features of HttpClientModule

In built-in Pipes, Percent pip section not currect

In this url:
https://codecraft.tv/courses/angular/pipes/built-in-pipes/
Under the seciton "Percent Pipes", you wrote:

<p ngNonBindable>{{ 42 | percent: '10.4-4' }}</p>
<p>{{ 0.123456 | percent : "10.4-4" }}</p>

Instead of "42" need to be :" 0.123456"
But I didn't understand if the "42" is the common known joke, or its a mistake,
so i opened an issue about it :)

Loading libraries in the global scope in the angular.json file

Description

In the Angular CLI chapter on the section of Global Library Installation, the path provided when loading the libraries in the node_modules directory may not be correct.

Error

The path provided looks like this '../node_modules/bootstrap/dist/css/bootstrap.css'.

Correction

The path should resemble this './node_modules/bootstrap/dist/css/bootstrap.css'

Source

https://github.com/codecraft-tv/angular-course/blob/current/3.angular-cli/1.overview/index.adoc

Update section on Jasmine testing since we are now testing using Angular scafolding

https://codecraft.tv/courses/angular/unit-testing/jasmine-and-karma/#_running_jasmine_tests

ERROR in src/app/app.module.ts(5,10): error TS2305: Module '"./app.component"' has no exported member 'AppComponent'.

facing this issue while following sequence in angular CLI

Double check API for Itunes - does it have CORS issues or need JSONP support any more?

If not remove CORS info from lectures.

Update content for Observables & RxJS to Angular 7 and RxJS 6

The content references https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js instead of Angular project in the example

The content doesn't use the pipe operator

Update RxJS Activity content

Point to better/latest links to docs.
Point to distinctUntilKeyChanged instead of distinctUntilChanged
Be clearer about the goal, the activity blitz just has a single TODO.

Update content for Pipes section to RxJS 6

• Content error, says: [source,typescript]cript.ts
• AsyncPipe needs to be updated to use RxJS 6 and pipeable operators.

Update video for ReactiveForms lecture to use RxJS 6 and Pipes

I think we can just make a callout here...

Update video for Pipes section to RxJS 6

Needs to use RxJS 6 and Pipes. Either update the video or make a callout.

Unhandled promise rejection in Quick Start - Domain Model

Came across below error on domain model chapter, could you pls take a look.

Unhandled Promise rejection: Unexpected value 'JokeListComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@component annotation. ; Zone: ; Task: null ; Value: Error: Unexpected value 'JokeListComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@component annotation.
at syntaxError (util.ts:100)
at eval (metadata_resolver.ts:620)
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (metadata_resolver.ts:600)
at JitCompiler.loadModules (compiler.ts:127)
at JitCompiler.compileModuleAndComponents (compiler.ts:107)
at JitCompiler.compileModuleAsync (compiler.ts:61)
at CompilerImpl.compileModuleAsync (compiler_factory.ts:57)
at compileNgModuleFactory__PRE_R3 (application_ref.ts:43)
at PlatformRef.bootstrapModule (application_ref.ts:262) Error: Unexpected value 'JokeListComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@component annotation.
at syntaxError (https://github-g2mxbh.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/compiler.umd.js:2500:21)
at eval (https://github-g2mxbh.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/compiler.umd.js:18757:44)
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (https://github-g2mxbh.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/compiler.umd.js:18739:58)
at JitCompiler.loadModules (https://github-g2mxbh.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/compiler.umd.js:26085:55)
at JitCompiler.compileModuleAndComponents (https://github-g2mxbh.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/compiler.umd.js:26066:40)
at JitCompiler.compileModuleAsync (https://github-g2mxbh.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/compiler.umd.js:26026:41)
at CompilerImpl.compileModuleAsync (https://github-g2mxbh.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js:202:35)
at compileNgModuleFactory__PRE_R3 (https://github-g2mxbh.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/core.umd.js:17664:25)
at PlatformRef.bootstrapModule (https://github-g2mxbh.stackblitz.io/turbo_modules/@angular/[email protected]/bundles/core.umd.js:17847:20)

code and video mismatch

in the code https://github.com/codecraft-tv/angular-course/blob/current/5.built-in-directives/2.ngfor/code/src/main.ts#L40
*ngfor is on ul element for GroupByCountry example, and <li> is only wrapping the country name. there is an extra empty line after the inner ul displayed., which is after each country. (I don't know why <ul> element has to have an extra line though, can you show me?)

However, in the video https://codecraft.tv/courses/angular/built-in-directives/ngfor/
the *ngfor is on li element and the inner ul element is wrapped as part of the <li>
there is no extra empty line between each <li>, or say each country.

Update video for lecture RxJS & Angular to Angular 7 and RxJS 6

Again, needs to be updated for the new import mechanisms and pipe operators (maybe look at adding a callout instead if the changes are not too different)

Replace in the pipe activity

https://codecraft.tv/courses/angular/pipes/activity/

The solution only replace the first occurrence of each bad word.
Could use regex to replace globally.

Thanks for the amazing content !!!!

Update section on unit testing HTTP to use RxJS 6

https://codecraft.tv/courses/angular/unit-testing/http-and-jsonp/

Image missing in Components practice activity

https://codecraft.tv/courses/angular/components/activity/

Just says

Like so: image::./images/activity_example.gif[]

[class] vs [ngClass]

https://github.com/codecraft-tv/angular-course/blob/current/5.built-in-directives/4.ngstyle-and-ngclass/index.adoc#alternative-syntax-1

Important	The above syntax removes all the existing classes for that element and replaces them with just 'text-success'.

The above statement isn't true anymore.

Convert from ReflectiveInjector.resolveAndCreate to Injector.create

This need to be done in a few places

Injectors/Providers/Tokens lectures.

RE: Videos, the injectors + providers videos can just be updated with callouts.
Tokens will probably need to be re-recorded since it's already got a callout!

Update section on JSONP to use new JSONP logic

Update video for Observables & RxJS to Angular 7 and RxJS 6

The video for this section also needs to be updated! It's completely out of date with RxJS 6.