Skip to content

Commit 7e3d289

Browse files
aimxnaimaimxnaim
committed
feat: add home and login components with reactive and template-driven forms
- Implemented HomeComponent to display courses categorized as Beginners and Advanced. - Created LoginReactiveComponent for reactive form-based login. - Developed LoginComponent for template-driven login. - Added necessary CSS styles for both components. - Introduced models for Course and Lesson. - Implemented services for fetching courses and lessons data. - Added custom validators for password strength and course title uniqueness. - Created a pipe to handle error messages in forms. - Set up environment configurations and basic application structure.
1 parent 963ae4c commit 7e3d289

File tree

92 files changed

+29888
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+29888
-0
lines changed

‎deep-dive-forms-advance/.browserslistrc

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# You can see what browsers were selected by your queries by running:
6+
# npx browserslist
7+
8+
> 0.5%
9+
last 2 versions
10+
Firefox ESR
11+
not dead
12+
not IE 9-11 # For IE 9-11 support, remove 'not'.

‎deep-dive-forms-advance/.editorconfig

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Editor configuration, see http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
max_line_length = off
13+
trim_trailing_whitespace = false

‎deep-dive-forms-advance/.gitignore

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
8+
# dependencies
9+
/node_modules
10+
11+
# IDEs and editors
12+
/.idea
13+
.project
14+
.classpath
15+
.c9/
16+
*.launch
17+
.settings/
18+
*.sublime-workspace
19+
20+
# IDE - VSCode
21+
.vscode/*
22+
!.vscode/settings.json
23+
!.vscode/tasks.json
24+
!.vscode/launch.json
25+
!.vscode/extensions.json
26+
27+
# misc
28+
/.angular/cache
29+
/.sass-cache
30+
/connect.lock
31+
/coverage
32+
/libpeerconnection.log
33+
npm-debug.log
34+
testem.log
35+
/typings
36+
37+
# e2e
38+
/e2e/*.js
39+
/e2e/*.map
40+
41+
# System Files
42+
.DS_Store
43+
Thumbs.db

‎deep-dive-forms-advance/.vscode/settings.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"workbench.colorCustomizations": {
3+
"activityBar.background": "#511D12",
4+
"titleBar.activeBackground": "#712919",
5+
"titleBar.activeForeground": "#FDF9F8"
6+
}
7+
}

‎deep-dive-forms-advance/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Angular University
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎deep-dive-forms-advance/README.md

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
2+
## Angular Forms In Depth
3+
4+
This repository contains the code of the [Angular Forms In Depth](https://angular-university.io/course/angular-forms-course) video course.
5+
6+
This course repository is updated to Angular v19:
7+
8+
![Angular Forms In Depth](https://angular-university.s3-us-west-1.amazonaws.com/course-images/angular-forms-course-small.jpg)
9+
10+
# Installation pre-requisites
11+
12+
Please use Node 18 LTS (Long Term Support version).
13+
14+
# Installing the Angular CLI
15+
16+
With the following command the angular-cli will be installed globally in your machine:
17+
18+
npm install -g @angular/cli
19+
20+
21+
# How To install this repository
22+
23+
We can install the master branch using the following commands:
24+
25+
git clone https://github.com/angular-university/angular-forms-course.git
26+
27+
This repository is made of several separate npm modules, that are installable separately. For example, to run the au-input module, we can do the following:
28+
29+
cd angular-forms-course
30+
31+
npm install
32+
33+
Its also possible to install the modules as usual using npm:
34+
35+
npm install
36+
37+
This should take a couple of minutes. If there are issues, please post the complete error message in the Questions section of the course.
38+
39+
# To Run the Development Backend Server
40+
41+
We can start the sample application backend with the following command:
42+
43+
npm run server
44+
45+
This is a small Node REST API server.
46+
47+
# To run the Development UI Server
48+
49+
To run the frontend part of our code, we will use the Angular CLI:
50+
51+
npm start
52+
53+
The application is visible at port 4200: [http://localhost:4200](http://localhost:4200)
54+
55+
56+
57+
# Important
58+
59+
This repository has multiple branches, have a look at the beginning of each section to see the name of the branch.
60+
61+
At certain points along the course, you will be asked to checkout other remote branches other than master. You can view all branches that you have available remotely using the following command:
62+
63+
git branch -a
64+
65+
The remote branches have their starting in origin, such as for example 1-navigation-and-containers.
66+
67+
We can checkout the remote branch and start tracking it with a local branch that has the same name, by using the following command:
68+
69+
git checkout -b section-1 origin/1-navigation-and-containers
70+
71+
It's also possible to download a ZIP file for a given branch, using the branch dropdown on this page on the top left, and then selecting the Clone or Download / Download as ZIP button.
72+
73+
# Other Courses
74+
# Modern Angular With Signals
75+
76+
If you are looking for the [Modern Angular With Signals Course](https://angular-university.io/course/angular-signals-course), the repo with the full code can be found here:
77+
78+
![Modern Angular With Signals Course](https://d3vigmphadbn9b.cloudfront.net/course-images/large-images/angular-signals-course.jpg)
79+
80+
# Angular PWA Course
81+
82+
If you are looking for the [Angular PWA Course](https://angular-university.io/course/angular-pwa-course), the repo with the full code can be found here:
83+
84+
![Angular PWA Course - Build the future of the Web Today](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png)
85+
86+
# Angular Security Masterclass
87+
88+
If you are looking for the [Angular Security Masterclass](https://angular-university.io/course/angular-security-course), the repo with the full code can be found here:
89+
90+
[Angular Security Masterclass](https://github.com/angular-university/angular-security-course).
91+
92+
![Angular Security Masterclass](https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png)
93+
94+
# Angular Advanced Library Laboratory Course
95+
96+
If you are looking for the Angular Advanced Course, the repo with the full code can be found here:
97+
98+
[Angular Advanced Library Laboratory Course: Build Your Own Library](https://angular-university.io/course/angular-advanced-course).
99+
100+
![Angular Advanced Library Laboratory Course: Build Your Own Library](https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png)
101+
102+
103+
## RxJs and Reactive Patterns Angular Architecture Course
104+
105+
If you are looking for the RxJs and Reactive Patterns Angular Architecture Course code, the repo with the full code can be found here:
106+
107+
[RxJs and Reactive Patterns Angular Architecture Course](https://angular-university.io/course/reactive-angular-architecture-course)
108+
109+
![RxJs and Reactive Patterns Angular Architecture Course](https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png)
110+
111+
112+
113+
## Angular Ngrx Reactive Extensions Architecture Course
114+
115+
If you are looking for the Angular Ngrx Reactive Extensions Architecture Course code, the repo with the full code can be found here:
116+
117+
[Angular Ngrx Reactive Extensions Architecture Course](https://angular-university.io/course/angular2-ngrx)
118+
119+
[Github repo for this course](https://github.com/angular-university/ngrx-course)
120+
121+
![Angular Ngrx Course](https://angular-academy.s3.amazonaws.com/thumbnails/ngrx-angular.png)
122+
123+
124+
125+
## Angular 2 and Firebase - Build a Web Application Course
126+
127+
If you are looking for the Angular 2 and Firebase - Build a Web Application Course code, the repo with the full code can be found here:
128+
129+
[Angular 2 and Firebase - Build a Web Application](https://angular-university.io/course/build-an-application-with-angular2)
130+
131+
[Github repo for this course](https://github.com/angular-university/angular-firebase-app)
132+
133+
![Angular firebase course](https://angular-academy.s3.amazonaws.com/thumbnails/angular_app-firebase-small.jpg)
134+
135+
136+
## Complete Typescript 2 Course - Build A REST API
137+
138+
If you are looking for the Complete Typescript 2 Course - Build a REST API, the repo with the full code can be found here:
139+
140+
[https://angular-university.io/course/typescript-2-tutorial](https://github.com/angular-university/complete-typescript-course)
141+
142+
[Github repo for this course](https://github.com/angular-university/complete-typescript-course)
143+
144+
![Complete Typescript Course](https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png)
145+

‎deep-dive-forms-advance/angular.json

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-forms-course": {
7+
"root": "",
8+
"sourceRoot": "src",
9+
"projectType": "application",
10+
"architect": {
11+
"build": {
12+
"builder": "@angular-devkit/build-angular:application",
13+
"options": {
14+
"outputPath": {
15+
"base": "dist"
16+
},
17+
"index": "src/index.html",
18+
"tsConfig": "src/tsconfig.app.json",
19+
"polyfills": [
20+
"src/polyfills.ts"
21+
],
22+
"assets": [
23+
"src/assets",
24+
"src/favicon.ico"
25+
],
26+
"styles": [
27+
"src/styles.scss"
28+
],
29+
"scripts": [],
30+
"extractLicenses": false,
31+
"sourceMap": true,
32+
"optimization": false,
33+
"namedChunks": true,
34+
"browser": "src/main.ts"
35+
},
36+
"configurations": {
37+
"production": {
38+
"budgets": [
39+
{
40+
"type": "anyComponentStyle",
41+
"maximumWarning": "6kb"
42+
}
43+
],
44+
"optimization": true,
45+
"outputHashing": "all",
46+
"sourceMap": false,
47+
"namedChunks": false,
48+
"extractLicenses": true,
49+
"fileReplacements": [
50+
{
51+
"replace": "src/environments/environment.ts",
52+
"with": "src/environments/environment.prod.ts"
53+
}
54+
]
55+
}
56+
}
57+
},
58+
"serve": {
59+
"builder": "@angular-devkit/build-angular:dev-server",
60+
"options": {
61+
"buildTarget": "angular-forms-course:build"
62+
},
63+
"configurations": {
64+
"production": {
65+
"buildTarget": "angular-forms-course:build:production"
66+
}
67+
}
68+
},
69+
"extract-i18n": {
70+
"builder": "@angular-devkit/build-angular:extract-i18n",
71+
"options": {
72+
"buildTarget": "angular-forms-course:build"
73+
}
74+
},
75+
"test": {
76+
"builder": "@angular-devkit/build-angular:karma",
77+
"options": {
78+
"main": "src/test.ts",
79+
"karmaConfig": "./karma.conf.js",
80+
"polyfills": "src/polyfills.ts",
81+
"tsConfig": "src/tsconfig.spec.json",
82+
"scripts": [],
83+
"styles": [
84+
"src/styles.scss"
85+
],
86+
"assets": [
87+
"src/assets",
88+
"src/favicon.ico"
89+
]
90+
}
91+
}
92+
}
93+
},
94+
"angular-forms-course-e2e": {
95+
"root": "",
96+
"sourceRoot": "",
97+
"projectType": "application",
98+
"architect": {
99+
"e2e": {
100+
"builder": "@angular-devkit/build-angular:protractor",
101+
"options": {
102+
"protractorConfig": "./protractor.conf.js",
103+
"devServerTarget": "angular-forms-course:serve"
104+
}
105+
}
106+
}
107+
}
108+
},
109+
"schematics": {
110+
"@schematics/angular:component": {
111+
"style": "scss"
112+
},
113+
"@schematics/angular:directive": {
114+
"prefix": ""
115+
}
116+
},
117+
"cli": {
118+
"analytics": "94ed0c6d-944a-4adc-89a1-2bc801038d0b"
119+
}
120+
}

‎deep-dive-forms-advance/e2e/app.e2e-spec.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { AppPage } from './app.po';
2+
3+
describe('angular-material-course App', () => {
4+
let page: AppPage;
5+
6+
beforeEach(() => {
7+
page = new AppPage();
8+
});
9+
10+
it('should display welcome message', () => {
11+
page.navigateTo();
12+
expect(page.getParagraphText()).toEqual('Welcome to app!');
13+
});
14+
});

‎deep-dive-forms-advance/e2e/app.po.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { browser, by, element } from 'protractor';
2+
3+
export class AppPage {
4+
navigateTo() {
5+
return browser.get('/');
6+
}
7+
8+
getParagraphText() {
9+
return element(by.css('app-root h1')).getText();
10+
}
11+
}

0 commit comments

Comments
 (0)