├── README.md ├── 1.Intro ├── demo-app │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── home │ │ │ │ ├── home.component.css │ │ │ │ ├── home.component.ts │ │ │ │ ├── home.component.html │ │ │ │ └── home.component.spec.ts │ │ │ ├── app.routes.ts │ │ │ ├── app.component.html │ │ │ ├── app.config.server.ts │ │ │ ├── app.component.ts │ │ │ ├── app.config.ts │ │ │ └── app.component.spec.ts │ │ ├── styles.css │ │ ├── main.ts │ │ ├── main.server.ts │ │ └── index.html │ ├── public │ │ └── favicon.ico │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── tasks.json │ ├── .editorconfig │ ├── tsconfig.spec.json │ ├── tsconfig.app.json │ ├── .gitignore │ ├── tsconfig.json │ └── README.md └── MPA │ ├── about.html │ ├── contacts.html │ └── index.html ├── 10.Ngrx ├── demo-app │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── post │ │ │ │ ├── post.component.css │ │ │ │ ├── type.ts │ │ │ │ ├── post.type.ts │ │ │ │ ├── post.component.html │ │ │ │ ├── post.action.ts │ │ │ │ ├── post.reducer.ts │ │ │ │ └── post.component.ts │ │ │ ├── counter │ │ │ │ ├── counter.component.css │ │ │ │ ├── counter.component.html │ │ │ │ ├── counter.action.ts │ │ │ │ ├── counter.reducer.ts │ │ │ │ └── counter.component.ts │ │ │ ├── translate │ │ │ │ ├── translate.component.css │ │ │ │ ├── translate.component.html │ │ │ │ ├── translate.reducer.ts │ │ │ │ └── translate.component.ts │ │ │ ├── redux-simpleflow │ │ │ │ ├── redux-simpleflow.component.css │ │ │ │ └── redux-simpleflow.component.html │ │ │ ├── app.routes.ts │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ └── app.config.ts │ │ ├── styles.css │ │ ├── main.ts │ │ └── index.html │ ├── public │ │ └── favicon.ico │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── tasks.json │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .gitignore │ ├── tsconfig.json │ └── README.md ├── comp0.png ├── comp1.png └── comp2.png ├── 9.Pipes └── demo-app │ ├── src │ ├── app │ │ ├── app.component.css │ │ ├── home │ │ │ ├── home.component.css │ │ │ ├── home.component.html │ │ │ └── home.component.ts │ │ ├── lazy │ │ │ ├── lazy.component.css │ │ │ ├── lazy.component.html │ │ │ └── lazy.component.ts │ │ ├── constants.ts │ │ ├── app.routes.ts │ │ ├── reduce.pipe.ts │ │ ├── app.component.html │ │ ├── user.service.ts │ │ ├── app.config.ts │ │ ├── http.interceptor.ts │ │ └── app.component.spec.ts │ ├── styles.css │ └── index.html │ ├── public │ └── favicon.ico │ ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── tasks.json │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .gitignore │ ├── tsconfig.json │ ├── README.md │ └── package.json ├── 0.Workshop ├── workshop │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── authenticate │ │ │ │ ├── authenticate.component.css │ │ │ │ ├── authenticate.component.html │ │ │ │ └── authenticate.component.ts │ │ │ ├── constants.ts │ │ │ ├── core │ │ │ │ ├── error-msg │ │ │ │ │ ├── error-msg.component.html │ │ │ │ │ ├── error-msg.service.ts │ │ │ │ │ ├── error-msg.component.css │ │ │ │ │ └── error-msg.component.ts │ │ │ │ ├── footer │ │ │ │ │ ├── footer.component.html │ │ │ │ │ ├── footer.component.css │ │ │ │ │ └── footer.component.ts │ │ │ │ └── header │ │ │ │ │ ├── header.component.ts │ │ │ │ │ └── header.component.html │ │ │ ├── shared │ │ │ │ ├── loader │ │ │ │ │ ├── loader.component.html │ │ │ │ │ ├── loader.component.ts │ │ │ │ │ └── loader.component.css │ │ │ │ └── pipes │ │ │ │ │ ├── elapsed-time.pipe.ts │ │ │ │ │ └── slice.pipe.ts │ │ │ ├── app.component.html │ │ │ ├── main │ │ │ │ ├── main.component.html │ │ │ │ ├── main.component.css │ │ │ │ └── main.component.ts │ │ │ ├── types │ │ │ │ ├── post.ts │ │ │ │ ├── theme.ts │ │ │ │ └── user.ts │ │ │ ├── error │ │ │ │ ├── error.component.html │ │ │ │ ├── error.component.ts │ │ │ │ └── error.component.css │ │ │ ├── utils │ │ │ │ ├── email.validator.ts │ │ │ │ └── match-passwords.validator.ts │ │ │ ├── home │ │ │ │ ├── home.component.ts │ │ │ │ └── home.component.html │ │ │ ├── app.config.ts │ │ │ ├── posts-list │ │ │ │ ├── posts-list.component.html │ │ │ │ ├── posts-list.component.ts │ │ │ │ └── posts-list.component.css │ │ │ ├── guards │ │ │ │ └── auth.guard.ts │ │ │ ├── app.component.ts │ │ │ ├── directives │ │ │ │ └── email.directive.ts │ │ │ ├── theme │ │ │ │ ├── add-theme │ │ │ │ │ └── add-theme.component.ts │ │ │ │ └── themes-list │ │ │ │ │ └── themes-list.component.ts │ │ │ ├── user │ │ │ │ └── login │ │ │ │ │ └── login.component.ts │ │ │ └── app.interceptor.ts │ │ ├── environments │ │ │ ├── environment.ts │ │ │ └── environment.development.ts │ │ ├── main.ts │ │ └── index.html │ ├── public │ │ ├── logo.png │ │ ├── favicon.ico │ │ └── profile.png │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── tasks.json │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .gitignore │ ├── tsconfig.json │ └── README.md ├── Rest-api │ ├── .gitignore │ ├── app-config.js │ ├── .gitattributes │ ├── utils │ │ ├── index.js │ │ ├── errHandler.js │ │ └── jwt.js │ ├── controllers │ │ └── index.js │ ├── models │ │ ├── tokenBlacklistModel.js │ │ ├── index.js │ │ ├── postModel.js │ │ └── themeModel.js │ ├── config │ │ ├── db.js │ │ ├── config.js │ │ └── express.js │ ├── router │ │ ├── posts.js │ │ ├── likes.js │ │ ├── users.js │ │ ├── test.js │ │ ├── index.js │ │ └── themes.js │ ├── .vscode │ │ └── launch.json │ ├── index.js │ └── package.json ├── API-Endpoints.png └── resources │ ├── forum │ ├── posts.bson │ ├── themes.bson │ ├── users.bson │ ├── posts.metadata.json │ ├── themes.metadata.json │ └── users.metadata.json │ └── views │ ├── images │ └── logo.png │ ├── responsive.css │ ├── reset.css │ └── layout.css ├── 2.Components └── demo-app │ ├── src │ ├── app │ │ ├── app.component.css │ │ ├── user-list │ │ │ ├── user-item │ │ │ │ ├── user-item.component.css │ │ │ │ ├── user-item.component.html │ │ │ │ ├── user-item.component.ts │ │ │ │ └── user-item.component.spec.ts │ │ │ ├── types.ts │ │ │ ├── user-list.component.css │ │ │ ├── user-list.component.html │ │ │ ├── user-list.component.ts │ │ │ └── user-list.component.spec.ts │ │ ├── footer │ │ │ ├── footer.component.html │ │ │ ├── footer.component.css │ │ │ └── footer.component.ts │ │ ├── app.routes.ts │ │ ├── app.component.html │ │ ├── test-demo │ │ │ ├── popup │ │ │ │ ├── popup.component.css │ │ │ │ ├── popup.component.html │ │ │ │ ├── popup.component.spec.ts │ │ │ │ └── popup.component.ts │ │ │ ├── test-demo.component.html │ │ │ ├── test-demo.component.spec.ts │ │ │ ├── test-demo.component.ts │ │ │ └── test-demo.component.css │ │ ├── navigation-bar │ │ │ ├── navigation-bar.component.ts │ │ │ ├── navigation-bar.component.css │ │ │ └── navigation-bar.component.html │ │ ├── app.config.ts │ │ ├── app.component.ts │ │ └── app.component.spec.ts │ ├── styles.css │ ├── main.ts │ └── index.html │ ├── public │ └── favicon.ico │ ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── tasks.json │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .gitignore │ ├── tsconfig.json │ ├── README.md │ └── package.json ├── 3.CD,SOLID,Services └── demo-app │ ├── src │ ├── app │ │ ├── app.component.css │ │ ├── user-list │ │ │ ├── user-item │ │ │ │ ├── user-item.component.css │ │ │ │ ├── user-item.component.html │ │ │ │ └── user-item.component.ts │ │ │ ├── user-list.component.css │ │ │ ├── user-list.component.html │ │ │ ├── user-list.component.ts │ │ │ └── user.service.ts │ │ ├── app.routes.ts │ │ ├── app.component.html │ │ ├── app.config.ts │ │ ├── monkey-patching-example.ts │ │ ├── types.ts │ │ └── app.component.spec.ts │ ├── styles.css │ ├── main.ts │ └── index.html │ ├── public │ └── favicon.ico │ ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── tasks.json │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .gitignore │ ├── tsconfig.json │ ├── README.md │ └── package.json ├── 5.Modules and routing ├── demo-modules-app │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── user │ │ │ │ ├── user.component.css │ │ │ │ ├── user.component.html │ │ │ │ ├── user.component.ts │ │ │ │ ├── user.service.ts │ │ │ │ └── user.module.ts │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ ├── header.component.ts │ │ │ │ └── header.module.ts │ │ │ ├── app.component.html │ │ │ ├── app-routing.module.ts │ │ │ ├── app.component.ts │ │ │ ├── common.module.ts │ │ │ ├── app.module.ts │ │ │ └── app.component.spec.ts │ │ ├── styles.css │ │ ├── favicon.ico │ │ ├── main.ts │ │ └── index.html │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── tasks.json │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .editorconfig │ ├── .gitignore │ ├── tsconfig.json │ ├── README.md │ └── package.json └── demo-standalone-app │ ├── src │ ├── app │ │ ├── app.component.css │ │ ├── home │ │ │ ├── home.component.css │ │ │ ├── home.component.html │ │ │ └── home.component.ts │ │ ├── wrapper │ │ │ ├── wrapper.component.css │ │ │ ├── wrapper.component.html │ │ │ └── wrapper.component.ts │ │ ├── users │ │ │ ├── user-details │ │ │ │ ├── user-details.component.css │ │ │ │ ├── user-details.component.html │ │ │ │ ├── user-details.resolver.ts │ │ │ │ └── user-details.component.ts │ │ │ ├── users.component.css │ │ │ ├── users.component.html │ │ │ ├── users.guard.ts │ │ │ ├── users.service.ts │ │ │ └── users.component.ts │ │ ├── app.component.html │ │ ├── error-page │ │ │ ├── error-page.component.html │ │ │ ├── error-page.component.css │ │ │ ├── error-page.component.ts │ │ │ └── error-page.component.spec.ts │ │ ├── navigation-bar │ │ │ ├── navigation-bar.component.html │ │ │ ├── navigation-bar.component.ts │ │ │ └── navigation-bar.component.css │ │ ├── types │ │ │ └── user.ts │ │ ├── app.component.ts │ │ └── app.routes.ts │ ├── styles.css │ ├── main.ts │ └── index.html │ ├── public │ └── favicon.ico │ ├── .vscode │ ├── extensions.json │ ├── launch.json │ └── tasks.json │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .gitignore │ ├── tsconfig.json │ ├── README.md │ └── package.json └── 7.Directives and Forms └── demo-app ├── src ├── app │ ├── app.component.css │ ├── home │ │ ├── home.component.css │ │ └── home.component.ts │ ├── login │ │ ├── login.component.css │ │ └── login.component.ts │ ├── register │ │ ├── register.component.css │ │ └── register.component.ts │ ├── app.component.html │ ├── app.component.ts │ ├── app.config.ts │ ├── app.routes.ts │ └── directives │ │ ├── my-router-link.directive.ts │ │ ├── max-count.directive.ts │ │ └── my-structural.directive.ts ├── styles.css ├── main.ts └── index.html ├── public └── favicon.ico ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── .editorconfig ├── tsconfig.app.json ├── tsconfig.spec.json ├── .gitignore ├── tsconfig.json └── README.md /README.md: -------------------------------------------------------------------------------- 1 | Softuni-Angular-Oct-2024 2 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/home/home.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/post/post.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/home/home.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/lazy/lazy.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/counter/counter.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/translate/translate.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.env 3 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/home/home.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/authenticate/authenticate.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/login/login.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/redux-simpleflow/redux-simpleflow.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/user-list/user-item/user-item.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/user/user.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/home/home.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/register/register.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |

home works!

2 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/lazy/lazy.component.html: -------------------------------------------------------------------------------- 1 |

lazy works!

2 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/constants.ts: -------------------------------------------------------------------------------- 1 | export const DOMAINS = ['bg', 'com']; 2 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/user-list/user-item/user-item.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/wrapper/wrapper.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /10.Ngrx/comp0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/10.Ngrx/comp0.png -------------------------------------------------------------------------------- /10.Ngrx/comp1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/10.Ngrx/comp1.png -------------------------------------------------------------------------------- /10.Ngrx/comp2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/10.Ngrx/comp2.png -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/user/user.component.html: -------------------------------------------------------------------------------- 1 |

user works!

2 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |

home works!

2 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/users/user-details/user-details.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/header/header.component.html: -------------------------------------------------------------------------------- 1 |

HEADER works!

2 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/redux-simpleflow/redux-simpleflow.component.html: -------------------------------------------------------------------------------- 1 |

redux-simpleflow works!

2 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |
Hello, {{ title }}!
2 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/constants.ts: -------------------------------------------------------------------------------- 1 | export const API_URL = 'https://jsonplaceholder.typicode.com'; 2 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | -------------------------------------------------------------------------------- /0.Workshop/API-Endpoints.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/0.Workshop/API-Endpoints.png -------------------------------------------------------------------------------- /1.Intro/demo-app/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/user-list/types.ts: -------------------------------------------------------------------------------- 1 | export type User = { 2 | name: string; 3 | age: number; 4 | }; 5 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/app-config.js: -------------------------------------------------------------------------------- 1 | const authCookieName = 'auth-cookie'; 2 | 3 | module.exports = { 4 | authCookieName, 5 | } -------------------------------------------------------------------------------- /0.Workshop/workshop/public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/0.Workshop/workshop/public/logo.png -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/core/error-msg/error-msg.component.html: -------------------------------------------------------------------------------- 1 |

{{ errorMsg() }}

2 | -------------------------------------------------------------------------------- /1.Intro/demo-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/1.Intro/demo-app/public/favicon.ico -------------------------------------------------------------------------------- /10.Ngrx/demo-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/10.Ngrx/demo-app/public/favicon.ico -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/user-list/user-item/user-item.component.html: -------------------------------------------------------------------------------- 1 |
  • name: {{ user?.name }}, age: {{ user?.age }}
    • 2 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/user-list/user-item/user-item.component.html: -------------------------------------------------------------------------------- 1 |

    {{ user?.name }} - {{ user?.email }}

    2 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/9.Pipes/demo-app/public/favicon.ico -------------------------------------------------------------------------------- /0.Workshop/Rest-api/.gitattributes: -------------------------------------------------------------------------------- 1 | *.css linguist-detectable=false 2 | *.html linguist-detectable=false 3 | *.js linguist-detectable=true -------------------------------------------------------------------------------- /0.Workshop/resources/forum/posts.bson: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/0.Workshop/resources/forum/posts.bson -------------------------------------------------------------------------------- /0.Workshop/resources/forum/themes.bson: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/0.Workshop/resources/forum/themes.bson -------------------------------------------------------------------------------- /0.Workshop/resources/forum/users.bson: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/0.Workshop/resources/forum/users.bson -------------------------------------------------------------------------------- /0.Workshop/workshop/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/0.Workshop/workshop/public/favicon.ico -------------------------------------------------------------------------------- /0.Workshop/workshop/public/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/0.Workshop/workshop/public/profile.png -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/shared/loader/loader.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | apiUrl: 'http://localhost:3000/api', 3 | }; 4 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /2.Components/demo-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/2.Components/demo-app/public/favicon.ico -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/error-page/error-page.component.html: -------------------------------------------------------------------------------- 1 |
    Page not found 404! :(
    2 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /0.Workshop/resources/views/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/0.Workshop/resources/views/images/logo.png -------------------------------------------------------------------------------- /0.Workshop/workshop/src/environments/environment.development.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | apiUrl: 'http://localhost:3000/api', 3 | }; 4 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/authenticate/authenticate.component.html: -------------------------------------------------------------------------------- 1 | @if(isAuthenticating){ 2 | 3 | } @else { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

    Hello, NGRX!

    2 | 3 |
    4 | 5 |
    6 | 7 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/3.CD,SOLID,Services/demo-app/public/favicon.ico -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/users/users.component.css: -------------------------------------------------------------------------------- 1 | li:hover { 2 | cursor: pointer; 3 | background-color: aquamarine; 4 | } 5 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/7.Directives and Forms/demo-app/public/favicon.ico -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

    Hello from modular Angular 16

    2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/5.Modules and routing/demo-modules-app/src/favicon.ico -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/styles.css: -------------------------------------------------------------------------------- 1 | .highlight { 2 | background-color: orange; 3 | color: white; 4 | font-size: 20px; 5 | cursor: pointer; 6 | } 7 | -------------------------------------------------------------------------------- /0.Workshop/resources/forum/posts.metadata.json: -------------------------------------------------------------------------------- 1 | {"options":{},"indexes":[{"v":2,"key":{"_id":1},"name":"_id_","ns":"forum.posts"}],"uuid":"8e8754eadf90424aa5cf5d9e2bfbb48e"} -------------------------------------------------------------------------------- /0.Workshop/resources/forum/themes.metadata.json: -------------------------------------------------------------------------------- 1 | {"options":{},"indexes":[{"v":2,"key":{"_id":1},"name":"_id_","ns":"forum.themes"}],"uuid":"a9e25cd8f9d44ee39d90dc2584bf437d"} -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/post/type.ts: -------------------------------------------------------------------------------- 1 | export interface Post { 2 | text?: string; 3 | likes?: number; 4 | } 5 | 6 | export interface PostState { 7 | post: Post; 8 | } 9 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsvetis/Angular-Oct-2024/HEAD/5.Modules and routing/demo-standalone-app/public/favicon.ico -------------------------------------------------------------------------------- /1.Intro/demo-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /0.Workshop/workshop/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /2.Components/demo-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/users/user-details/user-details.component.html: -------------------------------------------------------------------------------- 1 |

    User Details:

    2 | @if (user) { 3 |

    hello, my name is {{ user.name }}

    4 | } 5 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/main/main.component.html: -------------------------------------------------------------------------------- 1 | @if (isLoggedIn) { 2 |
    3 | 4 | 5 |
    6 | } @else { 7 | 8 | } 9 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Hello, {{ title }}

    3 |

    Congratulations! Your app is running. 🎉

    4 | 5 | 6 |
    7 | 8 | 9 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/post/post.type.ts: -------------------------------------------------------------------------------- 1 | export const EDIT = '[Post] Edit'; 2 | export const UPVOTE = '[Post] Upvote'; 3 | export const DOWNVOTE = '[Post] Downvote'; 4 | export const RESET = '[Post] Reset'; 5 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/translate/translate.component.html: -------------------------------------------------------------------------------- 1 |

    {{ msg$ | async }}

    2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/user-list/user-list.component.css: -------------------------------------------------------------------------------- 1 | #wrapper { 2 | width: 50%; 3 | height: 200px; 4 | padding: 20px; 5 | border: 1px solid grey; 6 | border-radius: 20px; 7 | margin: 30px auto; 8 | } 9 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/main/main.component.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 90%; 3 | margin: auto; 4 | padding-bottom: 4.5em; 5 | display: flex; 6 | align-items: flex-start; 7 | justify-content: space-evenly; 8 | } 9 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/error-page/error-page.component.css: -------------------------------------------------------------------------------- 1 | .error-msg { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | font-size: 32px; 6 | margin-top: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/core/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |
    2 |

    3 | This site is designed to be used for training purposes at SoftUni. Angular 4 | course Copyright © 2024 5 |

    6 |

    7 |
    8 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body, 3 | html, 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | .nav-bar { 10 | color: yellow; 11 | } 12 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/wrapper/wrapper.component.html: -------------------------------------------------------------------------------- 1 |

    Hello from counter: {{ counter() }}

    2 |

    Hello from Double Counter: {{ doubleCounter() }}

    3 | 4 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/user-list/user-list.component.html: -------------------------------------------------------------------------------- 1 |
    2 |

    My users list:

    3 |
      4 | @for (item of users; track $index) { 5 | 6 | } 7 |
    8 |
    9 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/utils/index.js: -------------------------------------------------------------------------------- 1 | const jwt = require('./jwt'); 2 | const auth = require('./auth'); 3 | const errorHandler = require('./errHandler'); 4 | 5 | module.exports = { 6 | jwt, 7 | auth, 8 | errorHandler 9 | } 10 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/counter/counter.component.html: -------------------------------------------------------------------------------- 1 |

    counter works!: {{ counter$ | async }}

    2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/navigation-bar/navigation-bar.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    Home
    3 |
    User List
    4 |
    5 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | }) 7 | export class HeaderComponent {} 8 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/footer/footer.component.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | width: 100%; 3 | height: 30px; 4 | padding: 10px; 5 | background-color: darkslategrey; 6 | color: #fff; 7 | position: absolute; 8 | bottom: 0; 9 | left: 0; 10 | } 11 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/user-list/user-list.component.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | width: 100%; 3 | border: 1px solid black; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | margin: 10px 0; 9 | } 10 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | 6 | platformBrowserDynamic().bootstrapModule(AppModule) 7 | .catch(err => console.error(err)); 8 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/user/user.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-user', 5 | templateUrl: './user.component.html', 6 | styleUrls: ['./user.component.css'], 7 | }) 8 | export class UserComponent {} 9 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/controllers/index.js: -------------------------------------------------------------------------------- 1 | const authController = require('./auth'); 2 | const themeController = require('./themeController'); 3 | const postController = require('./postController'); 4 | 5 | module.exports = { 6 | authController, 7 | themeController, 8 | postController, 9 | } -------------------------------------------------------------------------------- /0.Workshop/Rest-api/models/tokenBlacklistModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | 3 | const tokenBlacklistSchema = new mongoose.Schema({ 4 | token: String, 5 | }, { timestamps: { createdAt: 'created_at' } }); 6 | 7 | 8 | module.exports = mongoose.model('TokenBlacklist', tokenBlacklistSchema); -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/user-list/user-list.component.html: -------------------------------------------------------------------------------- 1 |
    2 |

    This is my user list:

    3 | 4 | @for (user of usersList; track $index) { 5 | 6 | } 7 | 8 | 9 |
    10 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig).catch((err) => 6 | console.error(err) 7 | ); 8 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './home.component.html', 8 | styleUrl: './home.component.css', 9 | }) 10 | export class HomeComponent {} 11 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/lazy/lazy.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-lazy', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './lazy.component.html', 8 | styleUrl: './lazy.component.css', 9 | }) 10 | export class LazyComponent {} 11 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/main.server.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { AppComponent } from './app/app.component'; 3 | import { config } from './app/app.config.server'; 4 | 5 | const bootstrap = () => bootstrapApplication(AppComponent, config); 6 | 7 | export default bootstrap; 8 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/user/user.service.ts: -------------------------------------------------------------------------------- 1 | // import { Injectable } from '@angular/core'; 2 | 3 | // @Injectable({ 4 | // providedIn: 'root', 5 | // }) 6 | export class UserService { 7 | constructor() {} 8 | 9 | getToken() { 10 | return 'asjkdhsakdhsakjdhsakj'; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/core/footer/footer.component.css: -------------------------------------------------------------------------------- 1 | /* footer */ 2 | 3 | footer { 4 | display: flex; 5 | align-items: center; 6 | justify-content: space-evenly; 7 | background-color: #234465; 8 | height: 8vh; 9 | color: white; 10 | text-shadow: 1px 1px black; 11 | text-align: center; 12 | } 13 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |

    home works!

    2 |

    home works!

    3 |

    home works!

    4 |

    home works!

    5 |

    home works!

    6 |

    home works!

    7 |

    home works!

    8 |

    home works!

    9 |

    home works!

    10 |

    home works!

    11 |

    home works!

    12 |

    home works!

    13 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './home.component.html', 8 | styleUrl: './home.component.css' 9 | }) 10 | export class HomeComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/types/post.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from './theme'; 2 | import { User } from './user'; 3 | 4 | export interface Post { 5 | likes: string[]; 6 | _id: string; 7 | text: string; 8 | userId: User; 9 | themeId: Theme; 10 | created_at: string; 11 | updatedAt: string; 12 | __v: number; 13 | } 14 | -------------------------------------------------------------------------------- /1.Intro/MPA/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About 7 | 8 | 9 | Go Back to Home Page 10 | 11 | 12 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/shared/loader/loader.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-loader', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './loader.component.html', 8 | styleUrl: './loader.component.css', 9 | }) 10 | export class LoaderComponent {} 11 | -------------------------------------------------------------------------------- /1.Intro/MPA/contacts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Contacts 7 | 8 | 9 | Go Back to Home Page 10 | 11 | 12 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/types/theme.ts: -------------------------------------------------------------------------------- 1 | import { Post } from './post'; 2 | import { User } from './user'; 3 | 4 | export interface Theme { 5 | subscribers: string[]; 6 | posts: Post[]; 7 | _id: string; 8 | themeName: string; 9 | userId: User; 10 | created_at: string; 11 | updatedAt: string; 12 | __v: number; 13 | } 14 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrl: './footer.component.css', 7 | standalone: true, 8 | }) 9 | export class FooterComponent { 10 | title = 'Softuni'; 11 | } 12 | -------------------------------------------------------------------------------- /0.Workshop/resources/views/responsive.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 800px) { 2 | html { 3 | font-size: 14px; 4 | } 5 | } 6 | 7 | @media (min-width: 1024px) { 8 | html { 9 | font-size: 16px; 10 | } 11 | } 12 | 13 | @media (min-width: 1280px) { 14 | html { 15 | font-size: 18px; 16 | } 17 | } -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/core/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './footer.component.html', 8 | styleUrl: './footer.component.css' 9 | }) 10 | export class FooterComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/config/db.js: -------------------------------------------------------------------------------- 1 | const config = require('./config'); 2 | const mongoose = require('mongoose'); 3 | 4 | module.exports = () => { 5 | return mongoose.connect(config.dbURL, { 6 | useNewUrlParser: true, 7 | useUnifiedTopology: true, 8 | useCreateIndex: true, 9 | useFindAndModify: false 10 | }); 11 | }; 12 | -------------------------------------------------------------------------------- /0.Workshop/resources/views/reset.css: -------------------------------------------------------------------------------- 1 | /* 2 | *Removes all default whitespace 3 | */ 4 | 5 | * { 6 | padding: 0; 7 | margin: 0; 8 | } 9 | 10 | /* 11 | *Reset CSS model sizing calculations 12 | */ 13 | 14 | html { 15 | box-sizing: border-box; 16 | } 17 | 18 | *, *:before, *:after { 19 | box-sizing: inherit; 20 | } -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/error/error.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    4
    3 | 4 |
    4
    5 |
    6 | Ooops! Page Not Found 7 |

    Let's go home and try from there.

    8 |
    9 |
    10 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './home.component.html', 8 | styleUrl: './home.component.css' 9 | }) 10 | export class HomeComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /0.Workshop/resources/forum/users.metadata.json: -------------------------------------------------------------------------------- 1 | {"options":{},"indexes":[{"v":2,"key":{"_id":1},"name":"_id_","ns":"forum.users"},{"v":2,"unique":true,"key":{"email":1},"name":"email_1","ns":"forum.users","background":true},{"v":2,"unique":true,"key":{"username":1},"name":"username_1","ns":"forum.users","background":true}],"uuid":"d1f59d47b68c427eb89196b588247543"} -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/router/posts.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const router = express.Router(); 3 | const { auth } = require('../utils'); 4 | const { postController } = require('../controllers'); 5 | 6 | // middleware that is specific to this router 7 | 8 | router.get('/', postController.getLatestsPosts); 9 | 10 | module.exports = router -------------------------------------------------------------------------------- /0.Workshop/Rest-api/models/index.js: -------------------------------------------------------------------------------- 1 | const userModel = require('./userModel'); 2 | const tokenBlacklistModel = require('./tokenBlacklistModel'); 3 | const themeModel = require('./themeModel'); 4 | const postModel = require('./postModel'); 5 | 6 | module.exports = { 7 | userModel, 8 | tokenBlacklistModel, 9 | themeModel, 10 | postModel, 11 | } -------------------------------------------------------------------------------- /0.Workshop/Rest-api/router/likes.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const router = express.Router(); 3 | const { auth } = require('../utils'); 4 | const { postController } = require('../controllers'); 5 | 6 | // middleware that is specific to this router 7 | 8 | router.put('/:postId', auth(), postController.like); 9 | 10 | module.exports = router 11 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/router/users.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const router = express.Router(); 3 | const { authController } = require('../controllers'); 4 | const { auth } = require('../utils'); 5 | 6 | router.get('/profile', auth(),authController.getProfileInfo); 7 | router.put('/profile', auth(),authController.editProfileInfo); 8 | 9 | module.exports = router -------------------------------------------------------------------------------- /1.Intro/demo-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DemoApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DemoApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/test-demo/popup/popup.component.css: -------------------------------------------------------------------------------- 1 | .popup { 2 | border: 1px solid black; 3 | width: 300px; 4 | height: 200px; 5 | padding: 20px; 6 | margin: 0 auto; 7 | position: absolute; 8 | top: calc(50%); 9 | left: calc(50% - 150px); 10 | background-color: aliceblue; 11 | } 12 | 13 | img { 14 | width: 100px; 15 | height: 100px; 16 | } 17 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DemoApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DemoApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/error-page/error-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-error-page', 5 | standalone: true, 6 | imports: [], 7 | templateUrl: './error-page.component.html', 8 | styleUrl: './error-page.component.css' 9 | }) 10 | export class ErrorPageComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DemoApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DemoApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/error/error.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-page-not-found', 6 | standalone: true, 7 | imports: [RouterLink], 8 | templateUrl: './error.component.html', 9 | styleUrl: './error.component.css', 10 | }) 11 | export class PageNotFoundComponent {} 12 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/shared/pipes/elapsed-time.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import moment from 'moment'; 3 | 4 | @Pipe({ 5 | name: 'elapsedTime', 6 | standalone: true, 7 | }) 8 | export class ElapsedTimePipe implements PipeTransform { 9 | transform(date: string, ...args: unknown[]): unknown { 10 | return moment(date).fromNow(); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/navigation-bar/navigation-bar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-navigation-bar', 5 | templateUrl: './navigation-bar.component.html', 6 | styleUrl: './navigation-bar.component.css', 7 | standalone: true, 8 | }) 9 | export class NavigationBarComponent { 10 | title = 'My Navigation Component'; 11 | } 12 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [ 8 | provideZoneChangeDetection({ eventCoalescing: true }), 9 | provideRouter(routes), 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DemoModulesApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/header/header.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { HeaderComponent } from './header.component'; 4 | 5 | @NgModule({ 6 | declarations: [HeaderComponent], 7 | imports: [CommonModule], 8 | providers: [], 9 | exports: [HeaderComponent], 10 | }) 11 | export class HeaderModule {} 12 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | standalone: true, 7 | imports: [RouterOutlet], 8 | templateUrl: './app.component.html', 9 | styleUrl: './app.component.css' 10 | }) 11 | export class AppComponent { 12 | title = 'demo-app'; 13 | } 14 | -------------------------------------------------------------------------------- /0.Workshop/workshop/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /1.Intro/demo-app/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [ 8 | provideZoneChangeDetection({ eventCoalescing: true }), 9 | provideRouter(routes), 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /2.Components/demo-app/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { HomeComponent } from './home/home.component'; 3 | 4 | export const routes: Routes = [ 5 | { 6 | path: '', 7 | pathMatch: 'full', 8 | component: HomeComponent, 9 | }, 10 | { 11 | path: 'lazy', 12 | loadComponent: () => 13 | import('./lazy/lazy.component').then((c) => c.LazyComponent), 14 | }, 15 | ]; 16 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/shared/pipes/slice.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'slice', 5 | standalone: true, 6 | }) 7 | export class SlicePipe implements PipeTransform { 8 | transform(value: string, maxCharCount = 5): unknown { 9 | const dots = value.length > maxCharCount ? '...' : ''; 10 | return `${value.substring(0, maxCharCount)}${dots}`; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/app.config.server.ts: -------------------------------------------------------------------------------- 1 | import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; 2 | import { provideServerRendering } from '@angular/platform-server'; 3 | import { appConfig } from './app.config'; 4 | 5 | const serverConfig: ApplicationConfig = { 6 | providers: [ 7 | provideServerRendering() 8 | ] 9 | }; 10 | 11 | export const config = mergeApplicationConfig(appConfig, serverConfig); 12 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/counter/counter.action.ts: -------------------------------------------------------------------------------- 1 | import { createAction } from '@ngrx/store'; 2 | 3 | // TYPES 4 | export const INCREMENT = '[Counter] Increment'; 5 | export const DECREMENT = '[Counter] Decrement'; 6 | export const RESET = '[Counter] Reset'; 7 | 8 | // ACTIONS 9 | export const increment = createAction(INCREMENT); 10 | export const decrement = createAction(DECREMENT); 11 | export const reset = createAction(RESET); 12 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/post/post.component.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Text: {{ p.text }}

    3 |

    Likes: {{ p.likes }}

    4 |
    5 | 6 |
    7 | 8 | 9 | 10 | 11 |
    12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DemoStandaloneApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/navigation-bar/navigation-bar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-navigation-bar', 6 | standalone: true, 7 | imports: [RouterLink], 8 | templateUrl: './navigation-bar.component.html', 9 | styleUrl: './navigation-bar.component.css', 10 | }) 11 | export class NavigationBarComponent {} 12 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/user-list/user-item/user-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { User } from '../types'; 3 | 4 | @Component({ 5 | selector: 'app-user-item', 6 | standalone: true, 7 | imports: [], 8 | templateUrl: './user-item.component.html', 9 | styleUrl: './user-item.component.css', 10 | }) 11 | export class UserItemComponent { 12 | @Input('userProp') user: User | null = null; 13 | } 14 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/user/user.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { UserComponent } from './user.component'; 4 | import { UserService } from './user.service'; 5 | 6 | @NgModule({ 7 | declarations: [UserComponent], 8 | imports: [CommonModule], 9 | providers: [UserService], 10 | exports: [UserComponent], 11 | }) 12 | export class UserModule {} 13 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | import { HomeComponent } from './home/home.component'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | standalone: true, 8 | imports: [RouterOutlet, HomeComponent], 9 | templateUrl: './app.component.html', 10 | styleUrl: './app.component.css', 11 | }) 12 | export class AppComponent { 13 | title = 'demo-app'; 14 | } 15 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/utils/errHandler.js: -------------------------------------------------------------------------------- 1 | function errorHandler(err, req, res, next) { 2 | if (err.status === 333) { 3 | res.status(333) 4 | .json({ message: 'ErrorHandler: not allowed!' }) 5 | } else { 6 | console.error(err.stack) 7 | // console.log(err) 8 | res.status(500) 9 | .json({ message: 'ErrorHandler: Something went wrong!', err }) 10 | } 11 | } 12 | 13 | module.exports = errorHandler; 14 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/core/error-msg/error-msg.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject } from 'rxjs'; 3 | 4 | @Injectable({ 5 | providedIn: 'root', 6 | }) 7 | export class ErrorMsgService { 8 | private apiError$$ = new BehaviorSubject(null); 9 | public apiError$ = this.apiError$$.asObservable(); 10 | 11 | constructor() {} 12 | 13 | setError(error: any): void { 14 | this.apiError$$.next(error); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/utils/email.validator.ts: -------------------------------------------------------------------------------- 1 | import { ValidatorFn } from '@angular/forms'; 2 | 3 | export function emailValidator(domains: string[]): ValidatorFn { 4 | const domainStr = domains.join('|'); 5 | const regExp = new RegExp(`[A-Za-z0-9]{6,}@gmail\.(${domainStr})`); 6 | 7 | return (control) => { 8 | const isInvalid = control.value === '' || regExp.test(control.value); 9 | return isInvalid ? null : { emailValidator: true }; 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/test-demo/popup/popup.component.html: -------------------------------------------------------------------------------- 1 | @if(isShown) { 2 |
    3 |

    Add number to numbers collection

    4 | 5 |
    6 | @if (beaverImg.length !== 0) { 7 | 8 | } @else { 9 |

    Loading....

    10 | } 11 |
    12 | 13 | 14 | 15 | 16 |
    17 | } 18 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/reduce.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'reduce', 5 | standalone: true, 6 | }) 7 | export class ReducePipe implements PipeTransform { 8 | transform(array: T[], callbackFn: (acc: T, curr: T) => T, initalValue: T): T { 9 | // [1,2,3,4].reduce((acc, curr)=> { 10 | // return acc + curr 11 | // }, 0) 12 | 13 | return array.reduce(callbackFn, initalValue); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /1.Intro/MPA/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home 7 | 8 | 9 |
    10 | Go to Contacts 11 |
    12 |
    13 | Go to About 14 |
    15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/users/users.component.html: -------------------------------------------------------------------------------- 1 |

    Users List:

    2 |
    3 |
      4 | @for (user of users; track $index) { 5 | 6 |
    • 10 | 11 | id: {{ user.id }}; name: {{ user.name }} 12 |
      • 13 | } 14 |
    15 |
    16 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/users/user-details/user-details.resolver.ts: -------------------------------------------------------------------------------- 1 | import { ResolveFn } from '@angular/router'; 2 | import { User } from '../../types/user'; 3 | import { inject } from '@angular/core'; 4 | import { UsersService } from '../users.service'; 5 | 6 | export const UserDetailsResolver: ResolveFn = (route) => { 7 | const userService = inject(UsersService); 8 | const id = route.params['id']; 9 | return userService.getSingleUser(id); 10 | }; 11 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Hello, Angular! {{ title }}

    3 | 4 | 5 | @if (isLoading) { 6 |

    Loading....

    7 | }@else { 8 | 9 | } 10 | 11 | 14 |
    15 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/users/users.guard.ts: -------------------------------------------------------------------------------- 1 | import { inject } from '@angular/core'; 2 | import { CanActivateFn, Router } from '@angular/router'; 3 | 4 | export const AuthGuard: CanActivateFn = (route, state) => { 5 | console.log({ route, state }); 6 | 7 | const router = inject(Router); 8 | const isLoggedIn = true; // will come from AuthService 9 | 10 | if (!isLoggedIn) { 11 | router.navigate(['/home']); 12 | } 13 | 14 | return isLoggedIn; 15 | }; 16 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/navigation-bar/navigation-bar.component.css: -------------------------------------------------------------------------------- 1 | .nav-bar { 2 | width: 100%; 3 | height: 30px; 4 | padding: 10px; 5 | background-color: skyblue; 6 | color: #000; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | .nav-btn { 13 | margin-left: 10px; 14 | padding: 10px; 15 | border: 1px solid #000; 16 | } 17 | 18 | .nav-btn:hover { 19 | cursor: pointer; 20 | background-color: grey; 21 | color: #fff; 22 | } 23 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | import { provideHttpClient } from '@angular/common/http'; 6 | 7 | export const appConfig: ApplicationConfig = { 8 | providers: [ 9 | provideZoneChangeDetection({ eventCoalescing: true }), 10 | provideRouter(routes), 11 | provideHttpClient(), 12 | ], 13 | }; 14 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | import { provideClientHydration } from '@angular/platform-browser'; 6 | 7 | export const appConfig: ApplicationConfig = { 8 | providers: [ 9 | provideZoneChangeDetection({ eventCoalescing: true }), 10 | provideRouter(routes), 11 | provideClientHydration(), 12 | ], 13 | }; 14 | -------------------------------------------------------------------------------- /0.Workshop/workshop/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/counter/counter.reducer.ts: -------------------------------------------------------------------------------- 1 | import { createReducer, on } from '@ngrx/store'; 2 | import { decrement, increment, reset } from './counter.action'; 3 | 4 | export const initialState = 0; 5 | 6 | const _counterReducer = createReducer( 7 | initialState, 8 | on(increment, (state) => state + 1), 9 | on(decrement, (state) => state - 1), 10 | on(reset, (state) => 0) 11 | ); 12 | 13 | export function counterReducer(state: any, action: any) { 14 | return _counterReducer(state, action); 15 | } 16 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /2.Components/demo-app/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { UserService } from './user/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'], 8 | }) 9 | export class AppComponent { 10 | title = 'demo-modules-app'; 11 | 12 | constructor(private userService: UserService) {} 13 | 14 | ngOnInit() { 15 | console.log(this.userService.getToken()); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /0.Workshop/workshop/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /1.Intro/demo-app/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/config/config.js: -------------------------------------------------------------------------------- 1 | const env = process.env.NODE_ENV || 'development'; 2 | 3 | const config = { 4 | development: { 5 | port: process.env.PORT || 3000, 6 | dbURL: 'mongodb://localhost:27017/forum', 7 | origin: ['http://localhost:5555', 'http://localhost:4200'] 8 | }, 9 | production: { 10 | port: process.env.PORT || 3000, 11 | dbURL: process.env.DB_URL_CREDENTIALS, 12 | origin: [] 13 | } 14 | }; 15 | 16 | module.exports = config[env]; 17 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/router/test.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const router = express.Router(); 3 | const utils = require('../utils') 4 | 5 | // middleware that is specific to this router 6 | 7 | const data = { 8 | "name": "rest-api", 9 | "version": "1.0.0", 10 | "description": "REST-api for back-end of Angular course workshop in SoftUni", 11 | "main": "index.js", 12 | } 13 | 14 | router.get('/', function (req, res) { 15 | 16 | res.send(data); 17 | }) 18 | 19 | module.exports = router -------------------------------------------------------------------------------- /2.Components/demo-app/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/config/express.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const cookieParser = require('cookie-parser'); 4 | const cookieSecret = process.env.COOKIESECRET || 'SoftUni'; 5 | // const { errorHandler } = require('../utils') 6 | 7 | module.exports = (app) => { 8 | app.use(express.json()); 9 | 10 | app.use(cookieParser(cookieSecret)); 11 | 12 | app.use(express.static(path.resolve(__basedir, 'static'))); 13 | 14 | // app.use(errorHandler(err, req, res, next)); 15 | }; 16 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { HomeComponent } from './home/home.component'; 3 | import { LoginComponent } from './login/login.component'; 4 | import { RegisterComponent } from './register/register.component'; 5 | 6 | export const routes: Routes = [ 7 | { path: '', redirectTo: '/home', pathMatch: 'full' }, 8 | { path: 'home', component: HomeComponent }, 9 | { path: 'login', component: LoginComponent }, 10 | { path: 'register', component: RegisterComponent }, 11 | ]; 12 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/navigation-bar/navigation-bar.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    {{ title }}
    3 |
    Home
    4 |
    Contacts
    5 |
    About
    6 |
    7 | 8 | 19 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/types/user.ts: -------------------------------------------------------------------------------- 1 | export interface User { 2 | themes: string[]; 3 | posts: string[]; 4 | _id: string; 5 | tel: string; 6 | email: string; 7 | username: string; 8 | password: string; 9 | created_at: string; 10 | updatedAt: string; 11 | __v: number; 12 | } 13 | 14 | export interface UserForAuth { 15 | username: string; 16 | email: string; 17 | tel?: string; 18 | password: string; 19 | id: string; 20 | } 21 | 22 | export interface ProfileDetails { 23 | username: string; 24 | email: string; 25 | tel: string; 26 | } 27 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/core/error-msg/error-msg.component.css: -------------------------------------------------------------------------------- 1 | .notification { 2 | position: fixed; 3 | z-index: 10; 4 | right: 8%; 5 | top: 8%; 6 | padding: 0.5rem; 7 | border-radius: 0.5rem; 8 | color: rgb(255, 255, 255); 9 | font-style: italic; 10 | text-decoration: underline; 11 | box-shadow: 0 5px 10px rgb(204, 204, 204); 12 | background-color: rgba(238, 74, 74, 0.699); 13 | } 14 | 15 | .error-message { 16 | background-color: rgba(238, 74, 74, 0.699); 17 | } 18 | 19 | .success-message { 20 | background-color: rgba(99, 230, 81, 0.699); 21 | } 22 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | import { UserService } from '../user/user.service'; 4 | 5 | @Component({ 6 | selector: 'app-home', 7 | standalone: true, 8 | imports: [RouterLink], 9 | templateUrl: './home.component.html', 10 | styleUrl: './home.component.css', 11 | }) 12 | export class HomeComponent { 13 | get isLoggedIn(): boolean { 14 | return this.userService.isLogged; 15 | } 16 | 17 | constructor(private userService: UserService) {} 18 | } 19 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/common.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { UserModule } from './user/user.module'; 7 | import { HeaderModule } from './header/header.module'; 8 | 9 | @NgModule({ 10 | declarations: [], 11 | imports: [UserModule, HeaderModule], 12 | providers: [], 13 | // exports: [UserModule], 14 | }) 15 | export class OurCommonModule {} 16 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/navigation-bar/navigation-bar.component.css: -------------------------------------------------------------------------------- 1 | .nav-wrapper { 2 | background-color: rgb(2, 2, 141); 3 | color: white; 4 | display: flex; 5 | width: 100%; 6 | height: 30px; 7 | padding: 10px; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | 12 | .nav-btn { 13 | border: 1px solid white; 14 | margin-left: 10px; 15 | padding: 5px 10px; 16 | } 17 | 18 | .nav-btn:hover { 19 | border: 1px solid rgb(0, 0, 0); 20 | color: rgb(0, 0, 0); 21 | background-color: white; 22 | cursor: pointer; 23 | } 24 | -------------------------------------------------------------------------------- /1.Intro/demo-app/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /0.Workshop/workshop/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /2.Components/demo-app/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /1.Intro/demo-app/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [ 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "src/main.ts", 13 | "src/main.server.ts", 14 | "server.ts" 15 | ], 16 | "include": [ 17 | "src/**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/post/post.action.ts: -------------------------------------------------------------------------------- 1 | import { Action } from '@ngrx/store'; 2 | import { DOWNVOTE, EDIT, RESET, UPVOTE } from './post.type'; 3 | 4 | export class Edit implements Action { 5 | readonly type = EDIT; 6 | constructor(public payload: string) {} 7 | } 8 | 9 | export class Reset implements Action { 10 | readonly type = RESET; 11 | } 12 | 13 | export class Upvote implements Action { 14 | readonly type = UPVOTE; 15 | } 16 | 17 | export class Downvote implements Action { 18 | readonly type = DOWNVOTE; 19 | } 20 | 21 | export type All = Upvote | Downvote | Reset | Edit; 22 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | import { provideHttpClient, withInterceptors } from '@angular/common/http'; 6 | import { appInterceptor } from './app.interceptor'; 7 | 8 | export const appConfig: ApplicationConfig = { 9 | providers: [ 10 | provideHttpClient(withInterceptors([appInterceptor])), 11 | provideZoneChangeDetection({ eventCoalescing: true }), 12 | provideRouter(routes), 13 | ], 14 | }; 15 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, importProvidersFrom } from '@angular/core'; 2 | import { CounterComponent } from './counter/counter.component'; 3 | import { TranslateComponent } from './translate/translate.component'; 4 | import { PostComponent } from './post/post.component'; 5 | 6 | @Component({ 7 | selector: 'app-root', 8 | standalone: true, 9 | imports: [CounterComponent, TranslateComponent, PostComponent], 10 | templateUrl: './app.component.html', 11 | styleUrl: './app.component.css', 12 | }) 13 | export class AppComponent { 14 | title = 'demo-app'; 15 | } 16 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/translate/translate.reducer.ts: -------------------------------------------------------------------------------- 1 | import { Action } from '@ngrx/store'; 2 | 3 | // Initial State 4 | export const defaultMsg = 'Hello'; 5 | 6 | // ACTIONS 7 | export const BG = 'BG'; 8 | export const IT = 'IT'; 9 | export const EN = 'EN'; 10 | 11 | export function translateReducer(state = defaultMsg, action: Action) { 12 | switch (action.type) { 13 | case BG: 14 | return (state = 'Здрасти!'); 15 | case EN: 16 | return (state = 'Hello!'); 17 | case IT: 18 | return (state = 'Ciao!'); 19 | 20 | default: 21 | return state; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/monkey-patching-example.ts: -------------------------------------------------------------------------------- 1 | // How Zone.jS notifies angular for async request 2 | // Async - SetTimeout, SetInterval, Async Pipe, API Calls, Click event 3 | 4 | // Standard console log 5 | console.log(123); 6 | 7 | // Monkey patched console log 8 | const originalConsoleLog = console.log; 9 | 10 | console.log = (...args) => { 11 | originalConsoleLog(...args); // invokes the original copy 12 | 13 | // Notify Angular to Detect Changes 14 | console.warn('Notify Angular to Render!'); 15 | // notifyAngularToDetechChanges() 16 | }; 17 | 18 | console.log(3456); 19 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/types/user.ts: -------------------------------------------------------------------------------- 1 | export interface User { 2 | id: number; 3 | name: string; 4 | username: string; 5 | email: string; 6 | address: Address; 7 | phone: string; 8 | website: string; 9 | company: Company; 10 | } 11 | 12 | export interface Address { 13 | street: string; 14 | suite: string; 15 | city: string; 16 | zipcode: string; 17 | geo: Geo; 18 | } 19 | 20 | export interface Geo { 21 | lat: string; 22 | lng: string; 23 | } 24 | 25 | export interface Company { 26 | name: string; 27 | catchPhrase: string; 28 | bs: string; 29 | } 30 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "skipFiles": ["/**"], 12 | // "program": "${workspaceFolder}\\index.js" // Windows 13 | "program": "${workspaceFolder}/index.js" // MacOS 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | import { NavigationBarComponent } from './navigation-bar/navigation-bar.component'; 4 | import { HomeComponent } from './home/home.component'; 5 | import { UsersComponent } from './users/users.component'; 6 | 7 | @Component({ 8 | selector: 'app-root', 9 | standalone: true, 10 | imports: [RouterOutlet, NavigationBarComponent], 11 | templateUrl: './app.component.html', 12 | styleUrl: './app.component.css', 13 | }) 14 | export class AppComponent {} 15 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/posts-list/posts-list.component.html: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/users/users.service.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | import { User } from '../types/user'; 4 | 5 | @Injectable({ 6 | providedIn: 'root', 7 | }) 8 | export class UsersService { 9 | apiUrl = 'https://jsonplaceholder.typicode.com/users'; 10 | constructor(private http: HttpClient) {} 11 | 12 | getUsers() { 13 | return this.http.get(this.apiUrl); 14 | } 15 | 16 | getSingleUser(userId: number | string) { 17 | return this.http.get(`${this.apiUrl}/${userId}`); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/guards/auth.guard.ts: -------------------------------------------------------------------------------- 1 | import { inject } from '@angular/core'; 2 | import { 3 | ActivatedRouteSnapshot, 4 | CanActivateFn, 5 | Router, 6 | RouterStateSnapshot, 7 | } from '@angular/router'; 8 | import { UserService } from '../user/user.service'; 9 | 10 | export const AuthGuard: CanActivateFn = ( 11 | route: ActivatedRouteSnapshot, 12 | state: RouterStateSnapshot 13 | ) => { 14 | const userService = inject(UserService); 15 | const router = inject(Router); 16 | 17 | if (userService.isLogged) { 18 | return true; 19 | } 20 | router.navigate(['/home']); 21 | return false; 22 | }; 23 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/shared/loader/loader.component.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | min-width: 200px; 3 | min-height: 200px; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | .loader { 10 | width: 48px; 11 | height: 48px; 12 | border: 5px solid #234465; 13 | border-bottom-color: transparent; 14 | border-radius: 50%; 15 | display: inline-block; 16 | box-sizing: border-box; 17 | animation: rotation 1s linear infinite; 18 | } 19 | 20 | @keyframes rotation { 21 | 0% { 22 | transform: rotate(0deg); 23 | } 24 | 100% { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/utils/match-passwords.validator.ts: -------------------------------------------------------------------------------- 1 | import { ValidatorFn } from '@angular/forms'; 2 | 3 | export function matchPasswordsValidator( 4 | passwordControlName: string, 5 | rePasswordControlname: string 6 | ): ValidatorFn { 7 | return (control) => { 8 | const passwordFormControl = control.get(passwordControlName); 9 | const rePasswordFormControl = control.get(rePasswordControlname); 10 | 11 | const passwordsAreMatching = 12 | passwordFormControl?.value === rePasswordFormControl?.value; 13 | 14 | return passwordsAreMatching ? null : { matchPasswordsValidator: true }; 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/utils/jwt.js: -------------------------------------------------------------------------------- 1 | const jwt = require('jsonwebtoken'); 2 | const secret = process.env.SECRET || 'SoftSecret'; 3 | 4 | function createToken(data) { 5 | return jwt.sign(data, secret, { expiresIn: '1d' }); 6 | } 7 | 8 | function verifyToken(token) { 9 | return new Promise((resolve, reject) => { 10 | jwt.verify(token, secret, (err, data) => { 11 | if (err) { 12 | reject(err); 13 | return; 14 | } 15 | resolve(data); 16 | }); 17 | }); 18 | } 19 | 20 | module.exports = { 21 | createToken, 22 | verifyToken 23 | } -------------------------------------------------------------------------------- /0.Workshop/Rest-api/models/postModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | const { ObjectId } = mongoose.Schema.Types; 3 | 4 | const postSchema = new mongoose.Schema({ 5 | text: { 6 | type: String, 7 | required: true 8 | }, 9 | likes: [{ 10 | type: ObjectId, 11 | ref: "User" 12 | }], 13 | userId: { 14 | type: ObjectId, 15 | ref: "User" 16 | }, 17 | themeId: { 18 | type: ObjectId, 19 | ref: "Theme" 20 | }, 21 | }, { timestamps: { createdAt: 'created_at' } }); 22 | 23 | module.exports = mongoose.model('Post', postSchema); 24 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/models/themeModel.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | const { ObjectId } = mongoose.Schema.Types; 3 | 4 | const themeSchema = new mongoose.Schema({ 5 | themeName: { 6 | type: String, 7 | required: true 8 | }, 9 | subscribers: [{ 10 | type: ObjectId, 11 | ref: "User" 12 | }], 13 | userId: { 14 | type: ObjectId, 15 | ref: "User" 16 | }, 17 | posts: [{ 18 | type: ObjectId, 19 | ref: "Post" 20 | }], 21 | }, { timestamps: { createdAt: 'created_at' } }); 22 | 23 | module.exports = mongoose.model('Theme', themeSchema); 24 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { UserModule } from './user/user.module'; 7 | import { HeaderModule } from './header/header.module'; 8 | import { OurCommonModule } from './common.module'; 9 | 10 | @NgModule({ 11 | declarations: [AppComponent], 12 | imports: [BrowserModule, AppRoutingModule, OurCommonModule], 13 | providers: [], 14 | bootstrap: [AppComponent], 15 | }) 16 | export class AppModule {} 17 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/test-demo/test-demo.component.html: -------------------------------------------------------------------------------- 1 |
    This is random message!
    2 | 3 |
    4 | 10 |
    11 | 12 |
    13 | @for (n of numbers; track $index) { 14 |
    19 | {{ n }} 20 |
    21 | } 22 |
    23 | 24 | 25 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/user-list/user-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { UserItemComponent } from './user-item/user-item.component'; 3 | import { User } from './types'; 4 | 5 | @Component({ 6 | selector: 'app-user-list', 7 | standalone: true, 8 | imports: [UserItemComponent], 9 | templateUrl: './user-list.component.html', 10 | styleUrl: './user-list.component.css', 11 | }) 12 | export class UserListComponent { 13 | users: User[] = [ 14 | { name: 'Pesho', age: 22 }, 15 | { name: 'Ivan', age: 33 }, 16 | { name: 'Mira', age: 12 }, 17 | { name: 'Denis', age: 55 }, 18 | { name: 'Kircho', age: 90 }, 19 | ]; 20 | } 21 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/core/error-msg/error-msg.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, signal } from '@angular/core'; 2 | import { ErrorMsgService } from './error-msg.service'; 3 | 4 | @Component({ 5 | selector: 'app-error-msg', 6 | standalone: true, 7 | imports: [], 8 | templateUrl: './error-msg.component.html', 9 | styleUrl: './error-msg.component.css', 10 | }) 11 | export class ErrorMsgComponent implements OnInit { 12 | errorMsg = signal(''); 13 | constructor(private errorMsgService: ErrorMsgService) {} 14 | 15 | ngOnInit(): void { 16 | this.errorMsgService.apiError$.subscribe((err: any) => { 17 | this.errorMsg.set(err?.message); 18 | }); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /0.Workshop/resources/views/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | .site { 6 | max-width: 50em; 7 | margin: 0 auto; 8 | } 9 | 10 | table { 11 | border: 1px solid #CCC; 12 | width: 100%; 13 | border-spacing: 0.2em; 14 | margin-bottom: 1.5em; 15 | } 16 | 17 | table td, 18 | table th { 19 | border: 1px solid #CCC; 20 | padding: 0.4em 0.8em; 21 | } 22 | 23 | table td { 24 | background: #EEE; 25 | } 26 | 27 | table thead th, 28 | table tfoot td { 29 | font-weight: bold; 30 | text-align: left; 31 | background: #000; 32 | color: #FFF; 33 | } 34 | 35 | table tbody tr:nth-child(even) td { 36 | background: #CCC; 37 | } -------------------------------------------------------------------------------- /0.Workshop/Rest-api/router/index.js: -------------------------------------------------------------------------------- 1 | const router = require('express').Router(); 2 | const users = require('./users'); 3 | const themes = require('./themes'); 4 | const posts = require('./posts'); 5 | const likes = require('./likes'); 6 | const test = require('./test'); 7 | const { authController } = require('../controllers'); 8 | 9 | router.post('/register', authController.register); 10 | router.post('/login', authController.login); 11 | router.post('/logout', authController.logout); 12 | 13 | router.use('/users', users); 14 | router.use('/themes', themes); 15 | router.use('/posts', posts); 16 | router.use('/likes', likes); 17 | router.use('/test', test); 18 | 19 | module.exports = router; 20 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/wrapper/wrapper.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ChangeDetectionStrategy, 3 | Component, 4 | computed, 5 | signal, 6 | } from '@angular/core'; 7 | 8 | @Component({ 9 | selector: 'app-wrapper', 10 | standalone: true, 11 | imports: [], 12 | templateUrl: './wrapper.component.html', 13 | styleUrl: './wrapper.component.css', 14 | }) 15 | export class WrapperComponent { 16 | counter = signal(0); 17 | doubleCounter = computed(() => this.counter() * 2); 18 | 19 | ngOnInit() { 20 | console.log(`counter: ${this.counter}`); 21 | } 22 | 23 | increment() { 24 | const value = this.counter() + 1; 25 | this.counter.set(value); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [HomeComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(HomeComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/types.ts: -------------------------------------------------------------------------------- 1 | export interface SimpleUser { 2 | name: string; 3 | age: number; 4 | } 5 | 6 | interface Geo { 7 | lat: string; 8 | lng: string; 9 | } 10 | 11 | interface Address { 12 | street: string; 13 | suite: string; 14 | city: string; 15 | zipcode: string; 16 | geo: Geo; 17 | } 18 | 19 | interface Company { 20 | name: string; 21 | catchPhrase: string; 22 | bs: string; 23 | } 24 | 25 | interface UserDetails { 26 | id: number; 27 | name: string; 28 | username: string; 29 | email: string; 30 | phone: string; 31 | } 32 | 33 | export interface ComplexUser extends UserDetails { 34 | website: string; 35 | address: Address; 36 | company: Company; 37 | } 38 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
    6 | 7 |
    {{ user | json | uppercase }}
    8 | 9 | 10 |
    Reduce Fn: {{ user.grades | reduce : sum : 0 }}
    11 | 12 | 13 | 14 |
    Promise: {{ p | async }}
    15 | 16 |
    Clock: {{ time$ | async | date : "hh:mm:ss" }}
    17 | 18 |
    19 | 20 | 21 | 22 |
    23 | 24 | @if (isLoading$ | async) { 25 |
    Loading ...
    26 | } @else { 27 |
    {{ user$ | async | json }}
    28 | } 29 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | import { HeaderComponent } from './core/header/header.component'; 4 | import { FooterComponent } from './core/footer/footer.component'; 5 | import { MainComponent } from './main/main.component'; 6 | import { AuthenticateComponent } from './authenticate/authenticate.component'; 7 | 8 | @Component({ 9 | selector: 'app-root', 10 | standalone: true, 11 | imports: [ 12 | RouterOutlet, 13 | HeaderComponent, 14 | FooterComponent, 15 | AuthenticateComponent, 16 | ], 17 | templateUrl: './app.component.html', 18 | styleUrl: './app.component.css', 19 | }) 20 | export class AppComponent {} 21 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/test-demo/popup/popup.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PopupComponent } from './popup.component'; 4 | 5 | describe('PopupComponent', () => { 6 | let component: PopupComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [PopupComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(PopupComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/test-demo/test-demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TestDemoComponent } from './test-demo.component'; 4 | 5 | describe('TestDemoComponent', () => { 6 | let component: TestDemoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [TestDemoComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(TestDemoComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/user-list/user-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserListComponent } from './user-list.component'; 4 | 5 | describe('UserListComponent', () => { 6 | let component: UserListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [UserListComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(UserListComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/user-list/user-item/user-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | import { ComplexUser, SimpleUser } from '../../types'; 3 | import { UserService } from '../user.service'; 4 | 5 | @Component({ 6 | selector: 'app-user-item', 7 | standalone: true, 8 | imports: [], 9 | templateUrl: './user-item.component.html', 10 | styleUrl: './user-item.component.css', 11 | }) 12 | export class UserItemComponent implements OnInit { 13 | @Input('user') user: ComplexUser | null = null; 14 | 15 | constructor(private us: UserService) {} 16 | 17 | ngOnInit(): void { 18 | // console.log( 19 | // this.user?.name + ' - ' + JSON.stringify(this.us.appUsers, null, 4) 20 | // ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/user-list/user-item/user-item.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserItemComponent } from './user-item.component'; 4 | 5 | describe('UserItemComponent', () => { 6 | let component: UserItemComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [UserItemComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(UserItemComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/.gitignore: -------------------------------------------------------------------------------- 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 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild } from '@angular/core'; 2 | import { FormsModule, NgForm } from '@angular/forms'; 3 | import { MaxCountDirective } from '../directives/max-count.directive'; 4 | 5 | @Component({ 6 | selector: 'app-login', 7 | standalone: true, 8 | imports: [FormsModule, MaxCountDirective], 9 | templateUrl: './login.component.html', 10 | styleUrl: './login.component.css', 11 | }) 12 | export class LoginComponent { 13 | @ViewChild('loginForm') form: NgForm | undefined; 14 | 15 | formSubmitHandler() { 16 | const form = this.form!; 17 | 18 | if (form?.invalid) { 19 | console.log('This form is invalid!'); 20 | return; 21 | } 22 | 23 | form.reset(); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/user.service.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | import { BehaviorSubject } from 'rxjs'; 4 | 5 | @Injectable({ 6 | providedIn: 'root', 7 | }) 8 | export class UserService { 9 | private user$$ = new BehaviorSubject(null); 10 | private isLoading$$ = new BehaviorSubject(false); 11 | 12 | public user$ = this.user$$.asObservable(); 13 | public isLoading$ = this.isLoading$$.asObservable(); 14 | 15 | constructor(private http: HttpClient) {} 16 | 17 | loadUsers() { 18 | this.isLoading$$.next(true); 19 | 20 | this.http.get('/api/users').subscribe((users) => { 21 | this.user$$.next(users); 22 | this.isLoading$$.next(false); 23 | }); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/main/main.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { PostsListComponent } from '../posts-list/posts-list.component'; 3 | import { ThemesListComponent } from '../theme/themes-list/themes-list.component'; 4 | import { UserService } from '../user/user.service'; 5 | import { HomeComponent } from '../home/home.component'; 6 | 7 | @Component({ 8 | selector: 'app-main', 9 | standalone: true, 10 | imports: [ThemesListComponent, PostsListComponent, HomeComponent], 11 | templateUrl: './main.component.html', 12 | styleUrl: './main.component.css', 13 | }) 14 | export class MainComponent { 15 | get isLoggedIn(): boolean { 16 | return this.userService.isLogged; 17 | } 18 | 19 | constructor(private userService: UserService) {} 20 | } 21 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/error-page/error-page.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ErrorPageComponent } from './error-page.component'; 4 | 5 | describe('ErrorPageComponent', () => { 6 | let component: ErrorPageComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ErrorPageComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(ErrorPageComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /0.Workshop/workshop/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /1.Intro/demo-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /2.Components/demo-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Workshop 6 | 7 | 8 | 9 | 13 | 17 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | import { NavigationBarComponent } from './navigation-bar/navigation-bar.component'; 4 | import { FooterComponent } from './footer/footer.component'; 5 | import { UserListComponent } from './user-list/user-list.component'; 6 | import { TestDemoComponent } from './test-demo/test-demo.component'; 7 | 8 | @Component({ 9 | selector: 'app-root', 10 | standalone: true, 11 | imports: [ 12 | RouterOutlet, 13 | NavigationBarComponent, 14 | FooterComponent, 15 | UserListComponent, 16 | TestDemoComponent, 17 | ], 18 | templateUrl: './app.component.html', 19 | styleUrl: './app.component.css', 20 | }) 21 | export class AppComponent { 22 | title = 'demo-app'; 23 | } 24 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { 3 | PreloadAllModules, 4 | provideRouter, 5 | withDebugTracing, 6 | withPreloading, 7 | } from '@angular/router'; 8 | 9 | import { routes } from './app.routes'; 10 | import { provideHttpClient, withInterceptors } from '@angular/common/http'; 11 | import { httpInterceptor } from './http.interceptor'; 12 | 13 | export const appConfig: ApplicationConfig = { 14 | providers: [ 15 | provideZoneChangeDetection({ eventCoalescing: true }), 16 | provideRouter( 17 | routes 18 | // Configurations 19 | // withPreloading(PreloadAllModules) 20 | // withDebugTracing() // for debugging 21 | ), 22 | provideHttpClient(withInterceptors([httpInterceptor])), 23 | ], 24 | }; 25 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/directives/email.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input } from '@angular/core'; 2 | import { 3 | AbstractControl, 4 | NG_VALIDATORS, 5 | ValidationErrors, 6 | Validator, 7 | } from '@angular/forms'; 8 | import { emailValidator } from '../utils/email.validator'; 9 | 10 | @Directive({ 11 | selector: '[appEmail]', 12 | standalone: true, 13 | providers: [ 14 | { 15 | provide: NG_VALIDATORS, 16 | multi: true, 17 | useExisting: EmailDirective, 18 | }, 19 | ], 20 | }) 21 | export class EmailDirective implements Validator { 22 | @Input() appEmail: string[] = []; 23 | 24 | constructor() {} 25 | 26 | validate(control: AbstractControl): ValidationErrors | null { 27 | const validatorFn = emailValidator(this.appEmail); 28 | return validatorFn(control); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/core/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Router, RouterLink } from '@angular/router'; 3 | import { UserService } from '../../user/user.service'; 4 | 5 | @Component({ 6 | selector: 'app-header', 7 | standalone: true, 8 | imports: [RouterLink], 9 | templateUrl: './header.component.html', 10 | styleUrl: './header.component.css', 11 | }) 12 | export class HeaderComponent { 13 | get isLoggedIn(): boolean { 14 | return this.userService.isLogged; 15 | } 16 | 17 | get username(): string { 18 | return this.userService.user?.username || ''; 19 | } 20 | 21 | constructor(private userService: UserService, private router: Router) {} 22 | 23 | logout() { 24 | this.userService.logout().subscribe(() => { 25 | this.router.navigate(['/login']); 26 | }); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/translate/translate.component.ts: -------------------------------------------------------------------------------- 1 | import { AsyncPipe } from '@angular/common'; 2 | import { Component } from '@angular/core'; 3 | import { Store } from '@ngrx/store'; 4 | import { Observable } from 'rxjs'; 5 | 6 | @Component({ 7 | selector: 'app-translate', 8 | standalone: true, 9 | imports: [AsyncPipe], 10 | templateUrl: './translate.component.html', 11 | styleUrl: './translate.component.css', 12 | }) 13 | export class TranslateComponent { 14 | msg$ = new Observable(); 15 | 16 | constructor(private store: Store<{ msg: string }>) { 17 | this.msg$ = this.store.select('msg'); 18 | } 19 | 20 | enMsg() { 21 | this.store.dispatch({ type: 'EN' }); 22 | } 23 | 24 | bgMsg() { 25 | this.store.dispatch({ type: 'BG' }); 26 | } 27 | 28 | itMsg() { 29 | this.store.dispatch({ type: 'IT' }); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/directives/my-router-link.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | @Directive({ 5 | selector: '[appMyRouterLink]', 6 | standalone: true, 7 | }) 8 | export class MyRouterLinkDirective implements OnInit { 9 | @Input() appMyRouterLink = ''; 10 | 11 | constructor( 12 | private elRef: ElementRef, 13 | private renderer: Renderer2, 14 | private router: Router 15 | ) {} 16 | 17 | ngOnInit(): void { 18 | this.renderer.listen( 19 | this.elRef.nativeElement, 20 | 'click', 21 | this.clickHandler.bind(this) 22 | ); 23 | } 24 | 25 | clickHandler(e: MouseEvent) { 26 | console.log('click', this.appMyRouterLink); 27 | this.router.navigate([this.appMyRouterLink]); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/index.js: -------------------------------------------------------------------------------- 1 | global.__basedir = __dirname; 2 | require('dotenv').config() 3 | const dbConnector = require('./config/db'); 4 | // const mongoose = require('mongoose'); 5 | const apiRouter = require('./router'); 6 | const cors = require('cors'); 7 | // const config = require('./config/config'); 8 | const { errorHandler } = require('./utils'); 9 | 10 | dbConnector() 11 | .then(() => { 12 | const config = require('./config/config'); 13 | 14 | const app = require('express')(); 15 | require('./config/express')(app); 16 | 17 | app.use(cors({ 18 | origin: config.origin, 19 | credentials: true 20 | })); 21 | 22 | app.use('/api', apiRouter); 23 | 24 | app.use(errorHandler); 25 | 26 | app.listen(config.port, console.log(`Listening on port ${config.port}!`)); 27 | }) 28 | .catch(console.error); -------------------------------------------------------------------------------- /0.Workshop/Rest-api/router/themes.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const router = express.Router(); 3 | const { auth } = require('../utils'); 4 | const { themeController, postController } = require('../controllers'); 5 | 6 | // middleware that is specific to this router 7 | 8 | router.get('/', themeController.getThemes); 9 | router.post('/', auth(), themeController.createTheme); 10 | 11 | router.get('/:themeId', themeController.getTheme); 12 | router.post('/:themeId', auth(), postController.createPost); 13 | router.put('/:themeId', auth(), themeController.subscribe); 14 | router.put('/:themeId/posts/:postId', auth(), postController.editPost); 15 | router.delete('/:themeId/posts/:postId', auth(), postController.deletePost); 16 | 17 | // router.get('/my-trips/:id/reservations', auth(), themeController.getReservations); 18 | 19 | module.exports = router -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/directives/max-count.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input } from '@angular/core'; 2 | import { 3 | AbstractControl, 4 | NG_VALIDATORS, 5 | ValidationErrors, 6 | Validator, 7 | } from '@angular/forms'; 8 | 9 | @Directive({ 10 | selector: '[appMaxCount]', 11 | standalone: true, 12 | providers: [ 13 | { 14 | provide: NG_VALIDATORS, 15 | multi: true, 16 | useExisting: MaxCountDirective, 17 | }, 18 | ], 19 | }) 20 | export class MaxCountDirective implements Validator { 21 | @Input() appMaxCount: number | undefined; 22 | 23 | validate(control: AbstractControl): ValidationErrors | null { 24 | const len = control.value?.length || 0; 25 | 26 | if (!this.appMaxCount || len <= this.appMaxCount) { 27 | return null; 28 | } 29 | 30 | return { appMaxCount: this.appMaxCount }; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/theme/add-theme/add-theme.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ApiService } from '../../api.service'; 3 | import { FormsModule, NgForm } from '@angular/forms'; 4 | import { Router } from '@angular/router'; 5 | 6 | @Component({ 7 | selector: 'app-add-theme', 8 | standalone: true, 9 | imports: [FormsModule], 10 | templateUrl: './add-theme.component.html', 11 | styleUrl: './add-theme.component.css', 12 | }) 13 | export class AddThemeComponent { 14 | constructor(private apiService: ApiService, private router: Router) {} 15 | 16 | addTheme(form: NgForm) { 17 | if (form.invalid) { 18 | return; 19 | } 20 | 21 | const { themeName, postText } = form.value; 22 | 23 | this.apiService.createTheme(themeName, postText).subscribe(() => { 24 | this.router.navigate(['/themes']); 25 | }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/test-demo/test-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef } from '@angular/core'; 2 | import { PopupComponent } from './popup/popup.component'; 3 | 4 | @Component({ 5 | selector: 'app-test-demo', 6 | standalone: true, 7 | imports: [PopupComponent], 8 | templateUrl: './test-demo.component.html', 9 | styleUrl: './test-demo.component.css', 10 | }) 11 | export class TestDemoComponent { 12 | numbers = [1, 2, 3, 4, 5]; 13 | isShownProp = false; 14 | randomMsg = 'random-red'; 15 | 16 | togleModal(event: Event): void { 17 | // console.log({ event }); 18 | this.isShownProp = !this.isShownProp; 19 | this.randomMsg = this.isShownProp ? 'random-green' : 'random-red'; 20 | } 21 | 22 | hideModal() { 23 | this.isShownProp = false; 24 | } 25 | 26 | onOutputActivate(ev: boolean): void { 27 | console.log('Output Activated!', ev); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/http.interceptor.ts: -------------------------------------------------------------------------------- 1 | import { HttpInterceptorFn, HttpRequest } from '@angular/common/http'; 2 | import { API_URL } from './constants'; 3 | import { catchError, EMPTY, tap } from 'rxjs'; 4 | 5 | export const httpInterceptor: HttpInterceptorFn = (req, next) => { 6 | if (req.url.startsWith('/api')) { 7 | req = req.clone({ 8 | url: req.url.replace('/api', API_URL), 9 | }); 10 | } 11 | 12 | return next(req).pipe( 13 | // Reads the data 14 | tap((req) => { 15 | if (req instanceof HttpRequest) { 16 | // Advanced Loging Mechanism 17 | console.log(`[${req.url}]`, req); 18 | } 19 | }), 20 | // Handles the error 21 | catchError((err) => { 22 | if (err.status === 0) { 23 | console.error('Error from Interceptor: ', err); 24 | return EMPTY; 25 | } 26 | 27 | return [err]; 28 | }) 29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |

    Welcome!

    5 |

    6 | SoftUni forum is a place, where you can post your questions, comment, 7 | and discuss problems, which you have in your programming language or in 8 | your study in SoftUni. 9 |

    10 | 11 | @if(!isLoggedIn) { 12 |
    13 | 27 |
    28 | } 29 |
    30 |
    31 |
    32 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/posts-list/posts-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ApiService } from './../api.service'; 3 | import { Post } from './../types/post'; 4 | import { LoaderComponent } from './../shared/loader/loader.component'; 5 | import { ElapsedTimePipe } from '../shared/pipes/elapsed-time.pipe'; 6 | 7 | @Component({ 8 | selector: 'app-posts-list', 9 | standalone: true, 10 | imports: [LoaderComponent, ElapsedTimePipe], 11 | templateUrl: './posts-list.component.html', 12 | styleUrl: './posts-list.component.css', 13 | }) 14 | export class PostsListComponent implements OnInit { 15 | posts: Post[] = []; 16 | isLoading = true; 17 | 18 | constructor(private apiService: ApiService) {} 19 | 20 | ngOnInit(): void { 21 | this.apiService.getPosts(5).subscribe((posts) => { 22 | this.posts = posts; 23 | this.isLoading = false; 24 | }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/counter/counter.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Store } from '@ngrx/store'; 3 | import { decrement, increment, reset } from './counter.action'; 4 | import { Observable } from 'rxjs'; 5 | import { AsyncPipe } from '@angular/common'; 6 | 7 | @Component({ 8 | selector: 'app-counter', 9 | standalone: true, 10 | imports: [AsyncPipe], 11 | templateUrl: './counter.component.html', 12 | styleUrl: './counter.component.css', 13 | }) 14 | export class CounterComponent { 15 | counter$ = new Observable(); 16 | 17 | constructor(private store: Store<{ counter: number }>) { 18 | this.counter$ = this.store.select('counter'); 19 | } 20 | 21 | increment() { 22 | this.store.dispatch(increment()); 23 | } 24 | 25 | decrement() { 26 | this.store.dispatch(decrement()); 27 | } 28 | 29 | reset() { 30 | this.store.dispatch(reset()); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/test-demo/test-demo.component.css: -------------------------------------------------------------------------------- 1 | #numbers-wrapper { 2 | background-color: rgb(131, 131, 131); 3 | padding: 20px; 4 | margin: 0 auto; 5 | width: 300px; 6 | height: fit-content; 7 | } 8 | 9 | .num { 10 | border-radius: 20px; 11 | margin: 5px; 12 | color: white; 13 | text-align: center; 14 | } 15 | 16 | .white { 17 | background-color: rgb(194, 194, 194); 18 | } 19 | 20 | .red { 21 | background-color: rgb(135, 0, 0); 22 | } 23 | 24 | .border-black { 25 | border: 2px solid red; 26 | border-radius: 20px; 27 | margin: 10px 0; 28 | } 29 | 30 | .wrapper { 31 | width: 300px; 32 | height: 10px; 33 | padding: 20px; 34 | margin: 0 auto; 35 | } 36 | 37 | .random-red { 38 | border: 3px solid red; 39 | border-radius: 50px; 40 | text-align: center; 41 | } 42 | 43 | .random-green { 44 | border: 3px solid rgb(7, 80, 19); 45 | border-radius: 10px; 46 | text-align: center; 47 | } 48 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/register/register.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { 3 | FormBuilder, 4 | FormControl, 5 | FormGroup, 6 | ReactiveFormsModule, 7 | Validators, 8 | } from '@angular/forms'; 9 | 10 | @Component({ 11 | selector: 'app-register', 12 | standalone: true, 13 | imports: [ReactiveFormsModule], 14 | templateUrl: './register.component.html', 15 | styleUrl: './register.component.css', 16 | }) 17 | export class RegisterComponent { 18 | registerForm = new FormGroup({ 19 | email: new FormControl('', [Validators.required, Validators.email]), 20 | password: new FormControl('', [Validators.maxLength(5)]), 21 | }); 22 | 23 | handleSubmit() { 24 | if (this.registerForm.invalid) { 25 | console.log('Form is invalid!'); 26 | return; 27 | } 28 | 29 | console.log(this.registerForm.value); 30 | 31 | this.registerForm.reset(); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/posts-list/posts-list.component.css: -------------------------------------------------------------------------------- 1 | aside { 2 | width: 100%; 3 | margin-top: 1em; 4 | font-size: 0.8em; 5 | } 6 | 7 | .aside * { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | .aside > div { 13 | border: 1px solid #999; 14 | border-radius: 0.3em; 15 | padding: 0.3em 0.5em; 16 | } 17 | 18 | .title { 19 | font-size: 1.5em; 20 | border-bottom: none; 21 | } 22 | 23 | .aside .aside-theme { 24 | margin: 1rem 0; 25 | padding: 0.5rem 0; 26 | } 27 | 28 | .aside h3 { 29 | border-bottom: none; 30 | border-radius: 0.3rem; 31 | font-size: 1.2rem; 32 | background-color: #306085; 33 | padding-left: 0.5rem; 34 | color: white; 35 | text-shadow: 1px 1px rgb(43, 42, 42); 36 | } 37 | 38 | .aside-theme + .aside-theme { 39 | border-top: dashed 1px #999; 40 | } 41 | 42 | .aside-theme p { 43 | text-align: right; 44 | } 45 | 46 | .aside-theme a { 47 | text-decoration: none; 48 | color: inherit; 49 | } 50 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ApplicationConfig, 3 | provideZoneChangeDetection, 4 | isDevMode, 5 | } from '@angular/core'; 6 | import { provideRouter } from '@angular/router'; 7 | 8 | import { routes } from './app.routes'; 9 | import { provideStore } from '@ngrx/store'; 10 | import { provideStoreDevtools } from '@ngrx/store-devtools'; 11 | import { counterReducer } from './counter/counter.reducer'; 12 | import { translateReducer } from './translate/translate.reducer'; 13 | import { postReducer } from './post/post.reducer'; 14 | 15 | export const appConfig: ApplicationConfig = { 16 | providers: [ 17 | provideZoneChangeDetection({ eventCoalescing: true }), 18 | provideRouter(routes), 19 | provideStore({ 20 | counter: counterReducer, 21 | msg: translateReducer, 22 | post: postReducer as any, // TODO: Typify me later 23 | }), 24 | provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }), 25 | ], 26 | }; 27 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/error/error.component.css: -------------------------------------------------------------------------------- 1 | .mainbox { 2 | margin: auto; 3 | height: 550px; 4 | width: 550px; 5 | position: relative; 6 | } 7 | 8 | .err { 9 | color: #234465; 10 | font-family: "Nunito Sans", sans-serif; 11 | font-size: 11rem; 12 | position: absolute; 13 | left: 20%; 14 | top: 8%; 15 | } 16 | 17 | .far { 18 | position: absolute; 19 | font-size: 8.5rem; 20 | left: 42%; 21 | top: 15%; 22 | color: #234465; 23 | } 24 | 25 | .err2 { 26 | color: #234465; 27 | font-family: "Nunito Sans", sans-serif; 28 | font-size: 11rem; 29 | position: absolute; 30 | left: 68%; 31 | top: 8%; 32 | } 33 | 34 | .msg { 35 | text-align: center; 36 | font-family: "Nunito Sans", sans-serif; 37 | font-size: 1.6rem; 38 | position: absolute; 39 | left: 16%; 40 | top: 45%; 41 | width: 75%; 42 | } 43 | 44 | a { 45 | text-decoration: none; 46 | color: #234465; 47 | } 48 | 49 | a:hover { 50 | text-decoration: underline; 51 | } 52 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/directives/my-structural.directive.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Directive, 3 | Input, 4 | input, 5 | OnChanges, 6 | OnInit, 7 | SimpleChange, 8 | SimpleChanges, 9 | TemplateRef, 10 | ViewContainerRef, 11 | } from '@angular/core'; 12 | 13 | @Directive({ 14 | selector: '[appMyStructural]', 15 | standalone: true, 16 | }) 17 | export class MyStructuralDirective implements OnChanges { 18 | @Input() appMyStructural: boolean = false; 19 | 20 | constructor( 21 | private templateRef: TemplateRef, 22 | private vcRef: ViewContainerRef 23 | ) {} 24 | 25 | ngOnChanges(changes: SimpleChanges): void { 26 | console.log(this.appMyStructural); 27 | console.log(this.templateRef); 28 | 29 | if (this.appMyStructural) { 30 | this.vcRef.createEmbeddedView(this.templateRef, { 31 | myCustomValue: 'Tova e moqta promenliva', 32 | }); 33 | } else { 34 | this.vcRef.clear(); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/authenticate/authenticate.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../user/user.service'; 3 | import { LoaderComponent } from '../shared/loader/loader.component'; 4 | 5 | @Component({ 6 | selector: 'app-authenticate', 7 | standalone: true, 8 | imports: [LoaderComponent, LoaderComponent], 9 | templateUrl: './authenticate.component.html', 10 | styleUrl: './authenticate.component.css', 11 | }) 12 | export class AuthenticateComponent implements OnInit { 13 | isAuthenticating = true; 14 | 15 | constructor(private userService: UserService) {} 16 | 17 | ngOnInit(): void { 18 | this.userService.getProfile().subscribe({ 19 | next: () => { 20 | this.isAuthenticating = false; 21 | }, 22 | error: () => { 23 | this.isAuthenticating = false; 24 | }, 25 | complete: () => { 26 | this.isAuthenticating = false; 27 | }, 28 | }); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /0.Workshop/Rest-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rest-api", 3 | "version": "1.0.0", 4 | "description": "REST-api for back-end of React project", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node .", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/BoogyHS/REST-api.git" 13 | }, 14 | "keywords": [ 15 | "rest-api" 16 | ], 17 | "author": "BoogyHS", 18 | "license": "ISC", 19 | "bugs": { 20 | "url": "https://github.com/BoogyHS/REST-api/issues" 21 | }, 22 | "homepage": "https://github.com/BoogyHS/REST-api#readme", 23 | "dependencies": { 24 | "bcrypt": "^5.0.0", 25 | "cookie-parser": "^1.4.5", 26 | "cors": "^2.8.5", 27 | "dotenv": "^8.2.0", 28 | "express": "^4.17.1", 29 | "jsonwebtoken": "^8.5.1", 30 | "mongoose": "^5.9.19" 31 | }, 32 | "devDependencies": { 33 | "nodemon": "^2.0.4" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/post/post.reducer.ts: -------------------------------------------------------------------------------- 1 | import { All } from './post.action'; 2 | import { DOWNVOTE, EDIT, RESET, UPVOTE } from './post.type'; 3 | import { Post } from './type'; 4 | 5 | export type Action = All; 6 | 7 | // Initial state 8 | const defaultState = { 9 | text: 'I am the default text', 10 | likes: 0, 11 | }; 12 | 13 | function newState(state: Post, newState: Post) { 14 | return { ...state, ...newState }; 15 | } 16 | 17 | export function postReducer(state: Post, action: Action) { 18 | switch (action.type) { 19 | case DOWNVOTE: 20 | return newState(state, { 21 | likes: state?.likes != undefined ? state.likes - 1 : 0, 22 | }); 23 | 24 | case UPVOTE: 25 | return { 26 | ...state, 27 | likes: state?.likes != undefined ? state.likes + 1 : 0, 28 | }; 29 | 30 | case RESET: 31 | return defaultState; 32 | 33 | case EDIT: 34 | return newState(state, { text: action.payload }); 35 | 36 | default: 37 | return state; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { HighlightDirective } from '../directives/highlight.directive'; 3 | import { MyRouterLinkDirective } from '../directives/my-router-link.directive'; 4 | import { CommonModule, NgFor, NgIf } from '@angular/common'; 5 | import { MyStructuralDirective } from '../directives/my-structural.directive'; 6 | 7 | @Component({ 8 | selector: 'app-home', 9 | standalone: true, 10 | imports: [ 11 | HighlightDirective, 12 | MyRouterLinkDirective, 13 | CommonModule, 14 | MyStructuralDirective, 15 | ], 16 | templateUrl: './home.component.html', 17 | styleUrl: './home.component.css', 18 | }) 19 | export class HomeComponent { 20 | randomPercentage = Math.floor(Math.random() * 100); 21 | 22 | widthInPercentage = `${this.randomPercentage}%`; 23 | 24 | isPercetangeAbove50 = this.randomPercentage >= 50; 25 | 26 | isShown = true; 27 | 28 | toggleIsShown() { 29 | this.isShown = !this.isShown; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { HomeComponent } from './home/home.component'; 3 | import { UsersComponent } from './users/users.component'; 4 | import { UserDetailsComponent } from './users/user-details/user-details.component'; 5 | import { ErrorPageComponent } from './error-page/error-page.component'; 6 | import { AuthGuard } from './users/users.guard'; 7 | import { UserDetailsResolver } from './users/user-details/user-details.resolver'; 8 | 9 | export const routes: Routes = [ 10 | { path: '', redirectTo: '/home', pathMatch: 'full' }, 11 | { path: 'home', component: HomeComponent }, 12 | { 13 | path: 'users', 14 | children: [ 15 | { path: '', component: UsersComponent }, 16 | { 17 | path: 'details/:id', 18 | component: UserDetailsComponent, 19 | canActivate: [AuthGuard], 20 | resolve: { user: UserDetailsResolver }, 21 | }, 22 | ], 23 | }, 24 | { 25 | path: '**', 26 | component: ErrorPageComponent, 27 | }, 28 | ]; 29 | -------------------------------------------------------------------------------- /1.Intro/demo-app/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | imports: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have the 'demo-app' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('demo-app'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo-app'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | imports: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have the 'demo-app' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('demo-app'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo-app'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/user/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Router, RouterLink } from '@angular/router'; 3 | import { UserService } from '../user.service'; 4 | import { FormsModule, NgForm } from '@angular/forms'; 5 | import { EmailDirective } from '../../directives/email.directive'; 6 | import { DOMAINS } from '../../constants'; 7 | 8 | @Component({ 9 | selector: 'app-login', 10 | standalone: true, 11 | imports: [RouterLink, FormsModule, EmailDirective], 12 | templateUrl: './login.component.html', 13 | styleUrl: './login.component.css', 14 | }) 15 | export class LoginComponent { 16 | domains = DOMAINS; 17 | 18 | constructor(private userService: UserService, private router: Router) {} 19 | 20 | login(form: NgForm) { 21 | if (form.invalid) { 22 | console.error('Invalid Login Form!'); 23 | return; 24 | } 25 | 26 | const { email, password } = form.value; 27 | 28 | this.userService.login(email, password).subscribe(() => { 29 | this.router.navigate(['/themes']); 30 | }); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | imports: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have the 'demo-app' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('demo-app'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo-app'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "downlevelIteration": true, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "node", 18 | "importHelpers": true, 19 | "target": "ES2022", 20 | "module": "ES2022", 21 | "useDefineForClassFields": false, 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | imports: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have the 'demo-app' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('demo-app'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo-app'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/app.interceptor.ts: -------------------------------------------------------------------------------- 1 | import { HttpInterceptorFn } from '@angular/common/http'; 2 | import { environment } from '../environments/environment.development'; 3 | import { catchError } from 'rxjs'; 4 | import { inject } from '@angular/core'; 5 | import { ErrorMsgService } from './core/error-msg/error-msg.service'; 6 | import { Router } from '@angular/router'; 7 | 8 | const { apiUrl } = environment; 9 | const API = '/api'; 10 | 11 | export const appInterceptor: HttpInterceptorFn = (req, next) => { 12 | if (req.url.startsWith(API)) { 13 | req = req.clone({ 14 | url: req.url.replace(API, apiUrl), 15 | withCredentials: true, 16 | }); 17 | } 18 | 19 | const errorMsgService = inject(ErrorMsgService); 20 | const router = inject(Router); 21 | 22 | return next(req).pipe( 23 | catchError((err) => { 24 | if (err.status === 401) { 25 | router.navigate(['/login']); 26 | } else { 27 | errorMsgService.setError(err); 28 | router.navigate(['/error']); 29 | } 30 | 31 | return [err]; 32 | }) 33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/user-list/user-list.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | ChangeDetectionStrategy, 3 | ChangeDetectorRef, 4 | Component, 5 | Input, 6 | OnChanges, 7 | SimpleChanges, 8 | } from '@angular/core'; 9 | import { UserItemComponent } from './user-item/user-item.component'; 10 | import { ComplexUser, SimpleUser } from '../types'; 11 | import { UserService } from './user.service'; 12 | 13 | @Component({ 14 | selector: 'app-user-list', 15 | standalone: true, 16 | imports: [UserItemComponent], 17 | templateUrl: './user-list.component.html', 18 | styleUrl: './user-list.component.css', 19 | // changeDetection: ChangeDetectionStrategy.OnPush, 20 | }) 21 | export class UserListComponent implements OnChanges { 22 | @Input('users') usersList: ComplexUser[] = []; 23 | 24 | constructor(private cd: ChangeDetectorRef, private us: UserService) {} 25 | 26 | ngOnChanges(changes: SimpleChanges): void { 27 | console.log('changes', changes); 28 | } 29 | 30 | refreshList() { 31 | // console.log(this.us.appUsers); 32 | this.cd.detectChanges(); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/core/header/header.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 | 5 | 6 |
    7 |
    8 | 25 |
    26 |
    27 | 40 |
    41 | -------------------------------------------------------------------------------- /2.Components/demo-app/src/app/test-demo/popup/popup.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | EventEmitter, 4 | Input, 5 | OnDestroy, 6 | OnInit, 7 | Output, 8 | } from '@angular/core'; 9 | import { beaverImgSrc } from '../../constants'; 10 | 11 | type HandleClick = () => void; 12 | 13 | @Component({ 14 | selector: 'app-popup', 15 | standalone: true, 16 | imports: [], 17 | templateUrl: './popup.component.html', 18 | styleUrl: './popup.component.css', 19 | }) 20 | export class PopupComponent implements OnInit, OnDestroy { 21 | @Input('isShown') isShown = false; 22 | @Output() onChildEvent = new EventEmitter(); 23 | 24 | beaverImg = ''; 25 | toggle = false; 26 | 27 | ngOnInit(): void { 28 | setTimeout(() => { 29 | this.beaverImg = beaverImgSrc; 30 | console.log('Data has been fetched on INIT!'); 31 | console.log('Subscribe for EVENTS'); 32 | }, 2000); 33 | } 34 | 35 | ngOnDestroy(): void { 36 | console.log('UNSUBSCRIBE from all of the EVENTS'); 37 | } 38 | 39 | handleClick() { 40 | this.onChildEvent.emit(!this.toggle); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/src/app/post/post.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Store } from '@ngrx/store'; 3 | import { Post, PostState } from './type'; 4 | import { Observable } from 'rxjs'; 5 | import { Downvote, Edit, Reset, Upvote } from './post.action'; 6 | import { AsyncPipe, NgIf } from '@angular/common'; 7 | import { FormsModule } from '@angular/forms'; 8 | 9 | @Component({ 10 | selector: 'app-post', 11 | standalone: true, 12 | imports: [AsyncPipe, NgIf, FormsModule], 13 | templateUrl: './post.component.html', 14 | styleUrl: './post.component.css', 15 | }) 16 | export class PostComponent { 17 | post$ = new Observable(); 18 | textMsg = ''; 19 | 20 | constructor(private store: Store) { 21 | this.post$ = this.store.select('post'); 22 | } 23 | 24 | upvote() { 25 | this.store.dispatch(new Upvote()); 26 | } 27 | 28 | downvote() { 29 | this.store.dispatch(new Downvote()); 30 | } 31 | 32 | reset() { 33 | this.store.dispatch(new Reset()); 34 | } 35 | 36 | edit() { 37 | this.store.dispatch(new Edit(this.textMsg)); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /0.Workshop/workshop/src/app/theme/themes-list/themes-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ApiService } from '../../api.service'; 3 | import { Theme } from '../../types/theme'; 4 | import { LoaderComponent } from '../../shared/loader/loader.component'; 5 | import { RouterLink } from '@angular/router'; 6 | import { SlicePipe } from '../../shared/pipes/slice.pipe'; 7 | import { ElapsedTimePipe } from '../../shared/pipes/elapsed-time.pipe'; 8 | import { DatePipe } from '@angular/common'; 9 | 10 | @Component({ 11 | selector: 'app-themes-list', 12 | standalone: true, 13 | imports: [LoaderComponent, RouterLink, SlicePipe, DatePipe], 14 | templateUrl: './themes-list.component.html', 15 | styleUrl: './themes-list.component.css', 16 | }) 17 | export class ThemesListComponent implements OnInit { 18 | themes: Theme[] = []; 19 | isLoading = true; 20 | 21 | constructor(private apiService: ApiService) {} 22 | 23 | ngOnInit() { 24 | this.apiService.getThemes().subscribe((themes) => { 25 | this.themes = themes; 26 | this.isLoading = false; 27 | }); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /0.Workshop/workshop/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /1.Intro/demo-app/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /2.Components/demo-app/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /1.Intro/demo-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "sourceMap": true, 16 | "declaration": false, 17 | "experimentalDecorators": true, 18 | "moduleResolution": "bundler", 19 | "importHelpers": true, 20 | "target": "ES2022", 21 | "module": "ES2022", 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "sourceMap": true, 16 | "declaration": false, 17 | "experimentalDecorators": true, 18 | "moduleResolution": "bundler", 19 | "importHelpers": true, 20 | "target": "ES2022", 21 | "module": "ES2022", 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/users/users.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UsersService } from './users.service'; 3 | import { User } from '../types/user'; 4 | import { Router, RouterLink } from '@angular/router'; 5 | import { UserDetailsComponent } from './user-details/user-details.component'; 6 | 7 | @Component({ 8 | selector: 'app-users', 9 | standalone: true, 10 | imports: [RouterLink, UserDetailsComponent], 11 | templateUrl: './users.component.html', 12 | styleUrl: './users.component.css', 13 | }) 14 | export class UsersComponent implements OnInit { 15 | users: User[] = []; 16 | 17 | constructor(private userService: UsersService, private router: Router) {} 18 | 19 | ngOnInit(): void { 20 | this.fetchUsers(); 21 | } 22 | 23 | fetchUsers(): void { 24 | this.userService.getUsers().subscribe((users) => { 25 | this.users = users; 26 | }); 27 | } 28 | 29 | // The programatical way 30 | loadUser(id: number): void { 31 | this.router.navigate( 32 | ['/users', 'details', id] 33 | // { queryParams: { search: 'Pesho' } } 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "sourceMap": true, 16 | "declaration": false, 17 | "experimentalDecorators": true, 18 | "moduleResolution": "bundler", 19 | "importHelpers": true, 20 | "target": "ES2022", 21 | "module": "ES2022", 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /0.Workshop/workshop/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "sourceMap": true, 16 | "declaration": false, 17 | "experimentalDecorators": true, 18 | "moduleResolution": "bundler", 19 | "importHelpers": true, 20 | "target": "ES2022", 21 | "module": "ES2022", 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /2.Components/demo-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "sourceMap": true, 16 | "declaration": false, 17 | "experimentalDecorators": true, 18 | "moduleResolution": "bundler", 19 | "importHelpers": true, 20 | "target": "ES2022", 21 | "module": "ES2022", 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/src/app/user-list/user.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, OnDestroy, OnInit } from '@angular/core'; 2 | import { ComplexUser, SimpleUser } from '../types'; 3 | import { HttpClient } from '@angular/common/http'; 4 | 5 | // @Injectable({ 6 | // providedIn: 'root', // Global! 7 | // }) 8 | 9 | @Injectable() 10 | export class UserService implements OnDestroy { 11 | URL = 'https://jsonplaceholder.typicode.com/users'; 12 | appUsers: ComplexUser[] = []; 13 | 14 | constructor(private http: HttpClient) {} 15 | 16 | ngOnDestroy(): void { 17 | // Unsubscribe from events 18 | } 19 | 20 | getUsers() { 21 | // return fetch(this.URL).then((res) => res.json()); 22 | return this.http.get(this.URL); 23 | } 24 | 25 | addUser(inputName: HTMLInputElement, inputAge: HTMLInputElement) { 26 | const user = { 27 | name: inputName.value, 28 | age: Number(inputAge.value), 29 | }; 30 | 31 | // this.appUsers = [...this.appUsers, user]; // !IMPORTANT HACK 32 | // this.appUsers.push(user); 33 | 34 | inputName.value = ''; 35 | inputAge.value = ''; 36 | 37 | console.log(this.appUsers); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "sourceMap": true, 16 | "declaration": false, 17 | "experimentalDecorators": true, 18 | "moduleResolution": "bundler", 19 | "importHelpers": true, 20 | "target": "ES2022", 21 | "module": "ES2022", 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "sourceMap": true, 16 | "declaration": false, 17 | "experimentalDecorators": true, 18 | "moduleResolution": "bundler", 19 | "importHelpers": true, 20 | "target": "ES2022", 21 | "module": "ES2022", 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /1.Intro/demo-app/README.md: -------------------------------------------------------------------------------- 1 | # DemoApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /10.Ngrx/demo-app/README.md: -------------------------------------------------------------------------------- 1 | # DemoApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "isolatedModules": true, 14 | "esModuleInterop": true, 15 | "sourceMap": true, 16 | "declaration": false, 17 | "experimentalDecorators": true, 18 | "moduleResolution": "bundler", 19 | "importHelpers": true, 20 | "target": "ES2022", 21 | "module": "ES2022", 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/README.md: -------------------------------------------------------------------------------- 1 | # DemoApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /0.Workshop/workshop/README.md: -------------------------------------------------------------------------------- 1 | # Workshop 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /2.Components/demo-app/README.md: -------------------------------------------------------------------------------- 1 | # DemoApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(() => TestBed.configureTestingModule({ 7 | imports: [RouterTestingModule], 8 | declarations: [AppComponent] 9 | })); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have as title 'demo-modules-app'`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('demo-modules-app'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('.content span')?.textContent).toContain('demo-modules-app app is running!'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/README.md: -------------------------------------------------------------------------------- 1 | # DemoApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /7.Directives and Forms/demo-app/README.md: -------------------------------------------------------------------------------- 1 | # DemoApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/README.md: -------------------------------------------------------------------------------- 1 | # DemoModulesApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.12. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /9.Pipes/demo-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^18.2.0", 14 | "@angular/common": "^18.2.0", 15 | "@angular/compiler": "^18.2.0", 16 | "@angular/core": "^18.2.0", 17 | "@angular/forms": "^18.2.0", 18 | "@angular/platform-browser": "^18.2.0", 19 | "@angular/platform-browser-dynamic": "^18.2.0", 20 | "@angular/router": "^18.2.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.14.10" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^18.2.10", 27 | "@angular/cli": "^18.2.10", 28 | "@angular/compiler-cli": "^18.2.0", 29 | "@types/jasmine": "~5.1.0", 30 | "jasmine-core": "~5.2.0", 31 | "karma": "~6.4.0", 32 | "karma-chrome-launcher": "~3.2.0", 33 | "karma-coverage": "~2.2.0", 34 | "karma-jasmine": "~5.1.0", 35 | "karma-jasmine-html-reporter": "~2.1.0", 36 | "typescript": "~5.5.2" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /2.Components/demo-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^18.2.0", 14 | "@angular/common": "^18.2.0", 15 | "@angular/compiler": "^18.2.0", 16 | "@angular/core": "^18.2.0", 17 | "@angular/forms": "^18.2.0", 18 | "@angular/platform-browser": "^18.2.0", 19 | "@angular/platform-browser-dynamic": "^18.2.0", 20 | "@angular/router": "^18.2.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.14.10" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^18.2.10", 27 | "@angular/cli": "^18.2.10", 28 | "@angular/compiler-cli": "^18.2.0", 29 | "@types/jasmine": "~5.1.0", 30 | "jasmine-core": "~5.2.0", 31 | "karma": "~6.4.0", 32 | "karma-chrome-launcher": "~3.2.0", 33 | "karma-coverage": "~2.2.0", 34 | "karma-jasmine": "~5.1.0", 35 | "karma-jasmine-html-reporter": "~2.1.0", 36 | "typescript": "~5.5.2" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/README.md: -------------------------------------------------------------------------------- 1 | # DemoStandaloneApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.10. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/src/app/users/user-details/user-details.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UsersService } from '../users.service'; 3 | import { ActivatedRoute } from '@angular/router'; 4 | import { User } from '../../types/user'; 5 | 6 | @Component({ 7 | selector: 'app-user-details', 8 | standalone: true, 9 | imports: [], 10 | templateUrl: './user-details.component.html', 11 | styleUrl: './user-details.component.css', 12 | }) 13 | export class UserDetailsComponent implements OnInit { 14 | user: User | null = null; 15 | 16 | constructor( 17 | private userService: UsersService, 18 | private route: ActivatedRoute 19 | ) {} 20 | 21 | ngOnInit(): void { 22 | // The resolver way - view will not display until data comes 23 | this.user = this.route.snapshot.data['user']; 24 | 25 | // ?The service wat 26 | // const userId = this.route.snapshot.params['id']; 27 | // this.userService.getSingleUser(userId).subscribe((user) => { 28 | // this.user = user; 29 | // }); 30 | 31 | // Subscribe for params in the url 32 | // this.route.params.subscribe((x) => { 33 | // console.log(x); 34 | // }); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /3.CD,SOLID,Services/demo-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^18.2.0", 14 | "@angular/common": "^18.2.0", 15 | "@angular/compiler": "^18.2.0", 16 | "@angular/core": "^18.2.0", 17 | "@angular/forms": "^18.2.0", 18 | "@angular/platform-browser": "^18.2.0", 19 | "@angular/platform-browser-dynamic": "^18.2.0", 20 | "@angular/router": "^18.2.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.14.10" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^18.2.10", 27 | "@angular/cli": "^18.2.10", 28 | "@angular/compiler-cli": "^18.2.0", 29 | "@types/jasmine": "~5.1.0", 30 | "jasmine-core": "~5.2.0", 31 | "karma": "~6.4.0", 32 | "karma-chrome-launcher": "~3.2.0", 33 | "karma-coverage": "~2.2.0", 34 | "karma-jasmine": "~5.1.0", 35 | "karma-jasmine-html-reporter": "~2.1.0", 36 | "typescript": "~5.5.2" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-modules-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-modules-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^16.2.0", 14 | "@angular/common": "^16.2.0", 15 | "@angular/compiler": "^16.2.0", 16 | "@angular/core": "^16.2.0", 17 | "@angular/forms": "^16.2.0", 18 | "@angular/platform-browser": "^16.2.0", 19 | "@angular/platform-browser-dynamic": "^16.2.0", 20 | "@angular/router": "^16.2.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.13.0" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^16.2.12", 27 | "@angular/cli": "^16.2.12", 28 | "@angular/compiler-cli": "^16.2.0", 29 | "@types/jasmine": "~4.3.0", 30 | "jasmine-core": "~4.6.0", 31 | "karma": "~6.4.0", 32 | "karma-chrome-launcher": "~3.2.0", 33 | "karma-coverage": "~2.2.0", 34 | "karma-jasmine": "~5.1.0", 35 | "karma-jasmine-html-reporter": "~2.1.0", 36 | "typescript": "~5.1.3" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /5.Modules and routing/demo-standalone-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-standalone-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^18.2.0", 14 | "@angular/common": "^18.2.0", 15 | "@angular/compiler": "^18.2.0", 16 | "@angular/core": "^18.2.0", 17 | "@angular/forms": "^18.2.0", 18 | "@angular/platform-browser": "^18.2.0", 19 | "@angular/platform-browser-dynamic": "^18.2.0", 20 | "@angular/router": "^18.2.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "^0.15.0" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^18.2.10", 27 | "@angular/cli": "^18.2.10", 28 | "@angular/compiler-cli": "^18.2.0", 29 | "@types/jasmine": "~5.1.0", 30 | "jasmine-core": "~5.2.0", 31 | "karma": "~6.4.0", 32 | "karma-chrome-launcher": "~3.2.0", 33 | "karma-coverage": "~2.2.0", 34 | "karma-jasmine": "~5.1.0", 35 | "karma-jasmine-html-reporter": "~2.1.0", 36 | "typescript": "~5.5.2" 37 | } 38 | } 39 | --------------------------------------------------------------------------------