diff --git a/angular/modules/components/README-ENG.md b/angular/modules/components/README-ENG.md index 47ae7848f..7a8306a05 100644 --- a/angular/modules/components/README-ENG.md +++ b/angular/modules/components/README-ENG.md @@ -23,11 +23,12 @@ - [Video](https://www.youtube.com/watch?v=R0nRX8jD2D0&list=PL1w1q3fL4pmj9k1FrJ3Pe91EPub2_h4jF&index=4) - [TODO list management app](https://github.com/pavelrazuvalau/todo-list-management/tree/ce415c7a0746d8b4f70b8898a6e331d7856f50e9) - [Slides](https://slides.com/pavelrazuvalau/angular-intro-components#/3) -- [Docs](https://angular.io/guide/standalone-components) +- [Docs](https://angular.dev/guide/components/importing) ## Practical assignment - [Angular. Components](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/components-directives-pipes.md) +- Test: Angular test (Components) ## Additional materials diff --git a/angular/modules/directives-and-pipes/README-ENG.md b/angular/modules/directives-and-pipes/README-ENG.md index aaca1ff16..1f8c49c0b 100644 --- a/angular/modules/directives-and-pipes/README-ENG.md +++ b/angular/modules/directives-and-pipes/README-ENG.md @@ -27,6 +27,7 @@ Assignment - 3 hours ## Practical assignment - [Angular. Directives & Pipes](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/components-directives-pipes.md) +- Test: Angular test (Directives & Pipes) ## Additional materials diff --git a/angular/modules/forms/README-ENG.md b/angular/modules/forms/README-ENG.md index b3fae7348..b95a31e39 100644 --- a/angular/modules/forms/README-ENG.md +++ b/angular/modules/forms/README-ENG.md @@ -23,6 +23,7 @@ ## Practical assignment - [Angular. Forms](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/forms.md) +- Test: Angular test (Forms) ## Additional materials diff --git a/angular/modules/http/README-ENG.md b/angular/modules/http/README-ENG.md index 6d421d766..7b2a53969 100644 --- a/angular/modules/http/README-ENG.md +++ b/angular/modules/http/README-ENG.md @@ -21,6 +21,7 @@ Assignment - 1 hour ## Practical assignment - [Angular. HTTPClient](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/rxjs-observables-http.md) +- Test: Angular test (HTTP) ## Additional materials diff --git a/angular/modules/modules-and-services/README-ENG.md b/angular/modules/modules-and-services/README-ENG.md index 5d2d82190..388a29f9e 100644 --- a/angular/modules/modules-and-services/README-ENG.md +++ b/angular/modules/modules-and-services/README-ENG.md @@ -11,8 +11,8 @@ ## Approximate time to complete this module: -Theory - 2 hours, -Assignment - 2 hours. +Theory - 2 hours +Assignment - 2 hours ## Theory @@ -24,6 +24,7 @@ Assignment - 2 hours. ## Practical assignment - [Angular. Modules & Services](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/modules-services-routing.md) +- Test: Angular test (Modules, Services) ## Additional materials @@ -38,3 +39,4 @@ Assignment - 2 hours. - [Angular Dependency Injection: Complete Guide](https://blog.angular-university.io/angular-dependency-injection/) - [Using forRoot() and forChild()](https://www.freelancermap.com/freelancer-tips/12255-forroot-forchild-angular) - [Angular Standalone Components: Welcome to a World Without NgModule](https://netbasal.com/angular-standalone-components-welcome-to-a-world-without-ngmodule-abd3963e89c5) +- [Shared Module - любимый антипаттерн angular разработчиков (RU)](https://www.youtube.com/watch?v=XVON1hJuZCo) diff --git a/angular/modules/redux/README-ENG.md b/angular/modules/redux/README-ENG.md index 6b085c6d2..968e7ac2d 100644 --- a/angular/modules/redux/README-ENG.md +++ b/angular/modules/redux/README-ENG.md @@ -9,7 +9,7 @@ ## Approximate time to complete this module: -Theory - 6 hours; +Theory - 6 hours Assignment - 8 hours ## Theory @@ -28,6 +28,7 @@ Assignment - 8 hours ## Practical assignment - [Angular. NgRx](../../../tasks/angular/NgRX.md) +- Test: Angular test (Redux & NgRx) ## Additional materials diff --git a/angular/modules/routing/README-ENG.md b/angular/modules/routing/README-ENG.md index fcf97ad5b..c79bc111d 100644 --- a/angular/modules/routing/README-ENG.md +++ b/angular/modules/routing/README-ENG.md @@ -24,6 +24,7 @@ Assignment - 1 hour ## Practical assignment - [Angular. Routing](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/modules-services-routing.md) +- Test: Angular test (Routing) ## Additional materials diff --git a/angular/modules/rxjs/README-ENG.md b/angular/modules/rxjs/README-ENG.md index 04d832510..cdcc87fdd 100644 --- a/angular/modules/rxjs/README-ENG.md +++ b/angular/modules/rxjs/README-ENG.md @@ -7,7 +7,7 @@ ## Approximate time to complete this module: -Theory - 3 hours; +Theory - 3 hours Assignment - 8 hours ## Theory @@ -33,11 +33,12 @@ Following materials also should be considered as learning sources before startin ## Practical assignment - [Angular. RxJS & Observables](../../../tasks/angular/rxjs-observables-http.md) +- Test: Angular test (RxJS & Observables) ### Self-practice - [Cars and trucks](https://stackblitz.com/edit/angular-rxjs-exercise?file=index.ts) -- [Fruits game](https://www.rxjs-fruits.com) +- [Fruits game 🍎🍌🍒](https://www.rxjs-fruits.com) ## Additional materials diff --git a/angular/modules/signals/README-ENG.md b/angular/modules/signals/README-ENG.md index 2acabd8ed..89dde55e1 100644 --- a/angular/modules/signals/README-ENG.md +++ b/angular/modules/signals/README-ENG.md @@ -4,9 +4,9 @@ ## In this module, students will learn -- The concept of signals -- The benefits of using signals -- Using signals in Angular +- The concept of `Signals` +- The benefits of using Signals +- Using Signals in Angular ## Approximate time to complete the module @@ -24,6 +24,7 @@ Theory - 5 hours ## Practical assignment - [Angular. Signals](../../../tasks/angular/signals.md) +- Test: Angular test (Signals) ## Additional materials diff --git a/angular/modules/unit-test/README-ENG.md b/angular/modules/unit-test/README-ENG.md index 20f3e817c..82bf5d464 100644 --- a/angular/modules/unit-test/README-ENG.md +++ b/angular/modules/unit-test/README-ENG.md @@ -29,16 +29,19 @@ Practice - 4 hours ## Practical assignment - [Angular. Unit testing with Jest](../../../tasks/angular/unit-testing-jest.md) +- Test: Angular test (Unit test) ## Additional materials - [Testing](https://angular.dev/guide/testing) - - [Key qualities of a good unit test](https://www.kenneth-truyers.net/2012/12/15/key-qualities-of-a-good-unit-test/) - [Unit testing in JavaScript](https://www.youtube.com/watch?v=Eu35xM76kKY) - [Code angular-testing-lecture](https://github.com/stas-dolgachov/angular-testing-lecture) - [Best practices for angular unit testing](https://gorillalogic.com/blog/best-practices-for-angular-unit-testing) +- [Testing services](https://angular.dev/guide/testing/services) - [Testing components basics](https://angular.dev/guide/testing/components-basics) +- [Component testing scenarios](https://angular.dev/guide/testing/components-scenarios) +- [HTTP Testing](https://angular.dev/guide/http/testing) - [Migrate Jasmine to Jest](https://jestjs.io/docs/migration-guide) - [Testing pipes](https://angular.dev/guide/testing/pipes) - [Testing attribute directive](https://angular.dev/guide/testing/attribute-directives) diff --git a/tasks/angular/components-directives-pipes.md b/tasks/angular/components-directives-pipes.md index 348f0a27d..674541c74 100644 --- a/tasks/angular/components-directives-pipes.md +++ b/tasks/angular/components-directives-pipes.md @@ -12,6 +12,7 @@ You are to enrich previously generated components with necessary functionality a You can use any UI frameworks/libraries to simplify (facilitate) the creation of your markup. It's recommended to use Angular Material as it’s fully integrated with Angular. **[YouTube client. Main page](https://github.com/rolling-scopes-school/tasks/blob/master/tasks/angular/main.jpg)** +NB: Visual design and colour scheme of the app is by your taste and up to you - just all the necessary components should be created and usually better if they would be on their recommended places, though you can also follow one to one the offered design. #### Components structure @@ -48,6 +49,8 @@ You can use any UI frameworks/libraries to simplify (facilitate) the creation of - Sorting should work in both ascending and descending directions of the values - Filter search results by the value that user types in the input +NB: Though new Angular 18 generates Standalone components by default, and standalone architecture is recommended by Angular developers for all the new projects - in one of the future tasks you'll be asked to implement some of the components as modules to get acquainted with NgModules concept, since they are still widely used in legacy code and a lot of projects were created on Angular 14 and lower versions, and in sake of learning different approaches. + #### Evaluation criteria Maximum score - **100** @@ -76,44 +79,25 @@ Fines ### Useful links -https://angular.io/tutorial - -https://angular.io/tutorial/tour-of-heroes/toh-pt1 - -https://angular.io/tutorial/tour-of-heroes/toh-pt2 - -https://angular.io/tutorial/tour-of-heroes/toh-pt3 - -https://angular.io/guide/architecture-components - -https://angular.io/guide/displaying-data - -https://angular.io/guide/template-syntax - -https://angular.io/guide/lifecycle-hooks - -https://angular.io/guide/component-interaction +[Angular 18 Tutorial](https://angular.dev/tutorials/learn-angular) -https://angular.io/guide/cheatsheet +[Tour of Heroes Tutorial](https://v17.angular.io/tutorial/tour-of-heroes/toh-pt1) -https://angular.io/guide/attribute-directives - -https://angular.io/guide/structural-directives - -https://angular.io/guide/pipes - -https://angular.io/api/core/Directive - -https://angular.io/api/core/Pipe +[Components](https://angular.dev/guide/components) +[Templates syntax](https://angular.dev/guide/templates) +[Components Lifecycle](https://angular.dev/guide/components/lifecycle) +[Components Interaction](https://angular.dev/guide/components/inputs) +[Cheatsheet](https://angular.io/guide/cheatsheet) +[Attribute directives](https://angular.dev/guide/directives/attribute-directives) +[Structural directives](https://angular.dev/guide/directives/structural-directives) +[Pipes](https://angular.dev/guide/pipes) +[api Directive](https://angular.dev/api/core/Directive) +[api Pipes](https://angular.dev/api/core/Pipe) https://github.com/pavelrazuvalau/angular-lectures/tree/master/angular-components - https://github.com/NataliaLoginova/angular-course/tree/main/angular-directives-pipes/src https://medium.com/javascript-everyday/encapsulate-common-behaviors-with-the-aid-of-angular-directives-223ace0cd0ca - https://levelup.gitconnected.com/the-power-of-angular-directives-a-comprehensive-guide-f9f929404b6b - https://levelup.gitconnected.com/what-is-a-pipe-in-angular-how-do-you-use-angular-pipes-650d7ff6d103 - https://towardsdev.com/the-unknown-angular-built-in-pipes-you-need-to-start-using-a8fb1dec2ac1 diff --git a/tasks/angular/forms.md b/tasks/angular/forms.md index bdde40ad0..14d872cab 100644 --- a/tasks/angular/forms.md +++ b/tasks/angular/forms.md @@ -52,6 +52,7 @@ The main goal of this task is to implement forms handling and validation using R - click "Add tag" button to add an extra input - each tag input should be required - form can have up to five "Tag" inputs + - each tag starts with # sign - implement "Reset" button - when clicked all inputs should be reset to their initial values and the "Tags" sub-form should return to having only a single (empty) input @@ -86,14 +87,10 @@ Fines ### Useful links -https://angular.io/start/start-forms - -https://angular.io/guide/reactive-forms - -https://angular.io/guide/forms - -https://angular.io/guide/typed-forms - -https://angular.io/api/forms/FormGroup +[Forms Overview](https://angular.dev/tutorials/learn-angular/15-forms) +[Reactive forms](https://angular.dev/guide/forms/reactive-forms) +[Typed Forms](https://angular.dev/guide/forms/typed-forms) +[Template-driven forms](https://angular.dev/guide/forms/template-driven-forms) +[api FormGroup](https://angular.dev/api/forms/FormGroup) https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/ diff --git a/tasks/angular/intro.md b/tasks/angular/intro.md index 3470d231b..a7ee5707f 100644 --- a/tasks/angular/intro.md +++ b/tasks/angular/intro.md @@ -77,8 +77,9 @@ Fines https://www.typescriptlang.org/docs/home.html
https://www.typescriptlang.org/docs/handbook/basic-types.html
https://www.typescriptlang.org/play/index.html
-https://cli.angular.io
-https://angular.io/cli
-https://angular.io/tutorial
+https://angular.dev/tools/cli
+https://angular.dev/cli
+[Angular 18 Tutorial](https://angular.dev/tutorials/learn-angular)
+[Tour of Heroes Tutorial](https://v17.angular.io/tutorial/tour-of-heroes/toh-pt1) NB Before the start of the first task - you have to create your private school repository in the Dashboard of rs-app https://app.rs.school/course/student/dashboard by clicking on the link in 'Your repository' block, then you perform all the tasks there, unless specified otherwise. diff --git a/tasks/angular/modules-services-routing.md b/tasks/angular/modules-services-routing.md index 6f617fa8a..5b7d486ef 100644 --- a/tasks/angular/modules-services-routing.md +++ b/tasks/angular/modules-services-routing.md @@ -14,7 +14,7 @@ The goal of this task is to implement new pages using modules, services, and rou ### Task requirements To continue with the YouTube app, some structural refactoring is required. -First, your project should be reorganized into the following modules: +First, your project can be reorganized into the following modules (final decision is on your mentor on how many modules to create if you're following standalone approach): - **CoreModule:** This module is designated for global layout components such as Header and Footer, along with global services. It needs to be integrated within the **AppModule** - **YoutubeModule:** This is a feature module for YouTube functionalities. It should contain the main page (previously implemented), the **Detailed Information Page**, and related models, services, etc. @@ -118,29 +118,20 @@ Fines ### Useful links -https://angular.io/tutorial/tour-of-heroes/toh-pt4 +[Angular 18 Tutorial](https://angular.dev/tutorials/learn-angular) -https://angular.io/tutorial/tour-of-heroes/toh-pt5 - -https://angular.io/guide/architecture-modules - -https://angular.io/guide/ngmodules - -https://angular.io/guide/ngmodule-faq +[Tour of Heroes Tutorial](https://angular.io/tutorial/tour-of-heroes/toh-pt4) +[Importing and using components](https://angular.dev/guide/components/importing) +[NgModules](https://angular.dev/guide/ngmodules) +[NgModule FAQ](https://angular.dev/guide/ngmodules/faq) https://angular.io/guide/architecture-services - -https://angular.io/guide/dependency-injection - -https://angular.io/guide/dependency-injection-providers - -https://angular.io/guide/dependency-injection-in-action +[Dependency injection in Angular](https://angular.dev/guide/di) +[Configuring dependency providers](https://angular.dev/guide/di/dependency-injection-providers) +[DI in action](https://angular.dev/guide/di/di-in-action) +[Common Routing Tasks](https://angular.dev/guide/routing/common-router-tasks) +[api Router](https://angular.dev/api#router) +[api RouterLinkActive](https://angular.dev/api/router/RouterLinkActive) +[Lazy loading](https://angular.dev/guide/ngmodules/lazy-loading) https://www.freelancermap.com/blog/using-forroot-and-forchild-to-configure-modules-in-angular/ -https://angular.io/guide/router - -https://angular.io/api/router - -https://angular.io/api/router/RouterLinkActive - -https://angular.io/guide/lazy-loading-ngmodules diff --git a/tasks/angular/rxjs-observables-http.md b/tasks/angular/rxjs-observables-http.md index e22225949..d6b7c1fc0 100644 --- a/tasks/angular/rxjs-observables-http.md +++ b/tasks/angular/rxjs-observables-http.md @@ -67,16 +67,16 @@ https://www.npmjs.com/package/rxjs https://angular.io/tutorial/toh-pt6 -https://angular.io/guide/http +https://angular.dev/guide/http -https://angular.io/api/common/http +https://angular.dev/api#common-http -https://angular.io/api/common/http/HttpClient +https://angular.dev/api/common/http/HttpClient -https://angular.io/api/common/http/HttpResponse +https://angular.dev/api/common/http/HttpResponse -https://angular.io/api/common/http/HttpHeaders +https://angular.dev/api/common/http/HttpHeaders -https://angular.io/api/common/http/HttpParams +https://angular.dev/api/common/http/HttpParams https://pazel.dev/how-to-keep-your-secrets-from-your-source-code-in-an-angular-project