Merge pull request #1675 from lyutails/lyutails/angular-tasks-standal…

…one-updates Angular - links updates in tasks/modules plus note about design and standalone/modules architecture
rolling-scopes-school · Sep 16, 2024 · d96e3d8 · d96e3d8
2 parents 2d6ab36 + 9dc7924
commit d96e3d8
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 81 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -77,8 +77,9 @@ Fines
 https://www.typescriptlang.org/docs/home.html </br>
 https://www.typescriptlang.org/docs/handbook/basic-types.html </br>
 https://www.typescriptlang.org/play/index.html </br>
-https://cli.angular.io </br>
-https://angular.io/cli </br>
-https://angular.io/tutorial </br>
+https://angular.dev/tools/cli </br>
+https://angular.dev/cli </br>
+[Angular 18 Tutorial](https://angular.dev/tutorials/learn-angular) </br>
+[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
@@ -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
@@ -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