├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md └── data-files ├── assets ├── Downtown.png ├── Stand.png ├── Tacos.png └── VirtualTacoStand.png ├── basic-routing ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.config.ts │ │ └── app.routes.ts │ ├── index.html │ ├── main.ts │ └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── character-factions.js ├── daily-specials.js ├── error-handling-demo ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── app │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.config.ts │ │ ├── app.routes.ts │ │ ├── component-level-error-handling │ │ │ ├── component-level-error-handling.component.spec.ts │ │ │ └── component-level-error-handling.component.ts │ │ ├── component-logger-error-handling │ │ │ ├── component-logger-error-handling.component.spec.ts │ │ │ └── component-logger-error-handling.component.ts │ │ ├── component-to-test-global-error-handler │ │ │ ├── component-to-test-global-error-handler.component.spec.ts │ │ │ └── component-to-test-global-error-handler.component.ts │ │ ├── global-error-handler.service.spec.ts │ │ ├── global-error-handler.service.ts │ │ ├── logger.service.spec.ts │ │ └── logger.service.ts │ ├── index.html │ ├── main.ts │ └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── portfolio ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.config.ts │ │ └── app.routes.ts │ ├── index.html │ ├── main.ts │ └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── rpg-character-builder ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.config.ts │ │ └── app.routes.ts │ ├── index.html │ ├── main.ts │ └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── unit-testing-demo ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── app │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.config.ts │ │ └── app.routes.ts │ ├── index.html │ ├── main.ts │ └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json └── virtual-taco-stand ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── public └── favicon.ico ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.config.ts │ └── app.routes.ts ├── index.html ├── main.ts └── styles.css ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /.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 = false 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node.js folders and files 2 | node_modules 3 | 4 | # Development tools 5 | .vscode 6 | .idea 7 | 8 | # System files 9 | .DS_Store 10 | 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Richard Krasso 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WEB 425 Angular with TypeScript 2 | ## [Bellevue University](http://bellevue.edu "Bellevue University is a private, non-profit university located in Bellevue, Nebraska, United States.") 3 | 4 | Address: 1000 Galvin Rd S, Bellevue, Nebraska 68005 - [Directions](https://www.google.com/maps/dir/''/Bellevue+University/@41.1509562,-95.9896355,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x8793886a86ca807f:0x838e857240d175eb!2m2!1d-95.9195956!2d41.1509774 "Google maps") 5 | 6 | Web Development [Degree](http://www.bellevue.edu/degrees/bachelor/web-development-bs/ "Designed by developers for developers.") 7 | 8 | ## Course Description 9 | 10 | This course introduces the student to web application frameworks and the advantages of using them. Components of a framework are defined and projects are used to develop skills in web 11 | application development. Security and unit testing are addressed as it applies to web application frameworks. GitHub is used to host coding projects. 12 | 13 | Prerequisite: WEB 200, WEB 231, WEB 330, and WEB 340 14 | 15 | ## Course Objectives 16 | Students who successfully complete this course should be able to: 17 | 18 | - Examine Angular's architecture and components 19 | - Compare routing strategies in Angular applications 20 | - List the differences between reactive and template-driven forms 21 | - Measure the effectiveness of unit tests in Angular Applications 22 | - Evaluate data fetching with HttpClient 23 | - Recommend strategies for modular Angular development 24 | 25 | ## Topic Outline 26 |
    27 |
  1. 28 | Angular Basics 29 |
      30 |
    1. Architecture and Components
      2. 31 |
    2. Angular CLI
      3. 32 |
    3. Project Setup
      4. 33 |
    4. Standalone Components and Modules
      5. 34 |
    35 |
    2. 36 |
  2. 37 | Forms and Data 38 |
      39 |
    1. Reactive vs. Template-Driven Forms
      2. 40 |
    2. Form Validation
      3. 41 |
    3. Data Fetching with HttpClient
      4. 42 |
    4. Routing and Navigation
      5. 43 |
    44 |
    3. 45 |
  3. 46 | Testing and Deployment 47 |
      48 |
    1. Karma and Jasmine
      2. 49 |
    2. Testing Components and Services
      3. 50 |
    3. Deployment
      4. 51 |
    52 |
    4. 53 |
54 | 55 | ## Repository Overview 56 | 57 | Carefully read the assigned chapters, videos, and narrative I've included under each assignment. 58 | 59 | Approach this course from top-to-bottom and do not move on to the assignment without fully understanding the previous one. The "Reading & Videos" section is critical to learning the material. Do not just scan over what's been provided. 60 | 61 | ```bash 62 | git clone https://github.com/buwebdev/web-425.git 63 | cd web-425 64 | ``` -------------------------------------------------------------------------------- /data-files/assets/Downtown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/assets/Downtown.png -------------------------------------------------------------------------------- /data-files/assets/Stand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/assets/Stand.png -------------------------------------------------------------------------------- /data-files/assets/Tacos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/assets/Tacos.png -------------------------------------------------------------------------------- /data-files/assets/VirtualTacoStand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/assets/VirtualTacoStand.png -------------------------------------------------------------------------------- /data-files/basic-routing/.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 | -------------------------------------------------------------------------------- /data-files/basic-routing/.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 | -------------------------------------------------------------------------------- /data-files/basic-routing/README.md: -------------------------------------------------------------------------------- 1 | # BasicRouting 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.3. 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 | -------------------------------------------------------------------------------- /data-files/basic-routing/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "basic-routing": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "outputPath": "dist/basic-routing", 17 | "index": "src/index.html", 18 | "browser": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | { 25 | "glob": "**/*", 26 | "input": "public" 27 | } 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "budgets": [ 37 | { 38 | "type": "initial", 39 | "maximumWarning": "500kB", 40 | "maximumError": "1MB" 41 | }, 42 | { 43 | "type": "anyComponentStyle", 44 | "maximumWarning": "2kB", 45 | "maximumError": "4kB" 46 | } 47 | ], 48 | "outputHashing": "all" 49 | }, 50 | "development": { 51 | "optimization": false, 52 | "extractLicenses": false, 53 | "sourceMap": true 54 | } 55 | }, 56 | "defaultConfiguration": "production" 57 | }, 58 | "serve": { 59 | "builder": "@angular-devkit/build-angular:dev-server", 60 | "configurations": { 61 | "production": { 62 | "buildTarget": "basic-routing:build:production" 63 | }, 64 | "development": { 65 | "buildTarget": "basic-routing:build:development" 66 | } 67 | }, 68 | "defaultConfiguration": "development" 69 | }, 70 | "extract-i18n": { 71 | "builder": "@angular-devkit/build-angular:extract-i18n" 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "polyfills": [ 77 | "zone.js", 78 | "zone.js/testing" 79 | ], 80 | "tsConfig": "tsconfig.spec.json", 81 | "assets": [ 82 | { 83 | "glob": "**/*", 84 | "input": "public" 85 | } 86 | ], 87 | "styles": [ 88 | "src/styles.css" 89 | ], 90 | "scripts": [] 91 | } 92 | } 93 | } 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /data-files/basic-routing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "basic-routing", 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.0.0", 14 | "@angular/common": "^18.0.0", 15 | "@angular/compiler": "^18.0.0", 16 | "@angular/core": "^18.0.0", 17 | "@angular/forms": "^18.0.0", 18 | "@angular/platform-browser": "^18.0.0", 19 | "@angular/platform-browser-dynamic": "^18.0.0", 20 | "@angular/router": "^18.0.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.14.3" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^18.0.3", 27 | "@angular/cli": "^18.0.3", 28 | "@angular/compiler-cli": "^18.0.0", 29 | "@types/jasmine": "~5.1.0", 30 | "jasmine-core": "~5.1.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.4.2" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /data-files/basic-routing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/basic-routing/public/favicon.ico -------------------------------------------------------------------------------- /data-files/basic-routing/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/basic-routing/src/app/app.component.css -------------------------------------------------------------------------------- /data-files/basic-routing/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 179 | 180 |
181 |
182 |
183 | 228 |

Hello, {{ title }}

229 |

Congratulations! Your app is running. 🎉

230 |
231 | 232 |
233 |
234 | @for (item of [ 235 | { title: 'Explore the Docs', link: 'https://angular.dev' }, 236 | { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, 237 | { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, 238 | { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, 239 | { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, 240 | ]; track item.title) { 241 | 247 | {{ item.title }} 248 | 255 | 258 | 259 | 260 | } 261 |
262 | 323 |
324 |
325 |
326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | -------------------------------------------------------------------------------- /data-files/basic-routing/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 'basic-routing' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('basic-routing'); 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, basic-routing'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /data-files/basic-routing/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 = 'basic-routing'; 13 | } 14 | -------------------------------------------------------------------------------- /data-files/basic-routing/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: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /data-files/basic-routing/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /data-files/basic-routing/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BasicRouting 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /data-files/basic-routing/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 | -------------------------------------------------------------------------------- /data-files/basic-routing/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /data-files/basic-routing/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 | -------------------------------------------------------------------------------- /data-files/basic-routing/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 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "bundler", 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 | -------------------------------------------------------------------------------- /data-files/basic-routing/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 | -------------------------------------------------------------------------------- /data-files/character-factions.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Author: Professor Krasso 3 | * Modified by: This code was generated with the assistance of GitHub Copilot 4 | * Date: 6-20-24 5 | * File: character-factions.js 6 | * Description: This code is used to generate a list of character factions for a fictional game. 7 | * This code includes a series of unit tests to validate the code. 8 | */ 9 | 10 | "use strict"; 11 | 12 | // require statements 13 | const http = require('http'); 14 | const url = require('url'); 15 | 16 | // array of character factions 17 | const factions = [ 18 | { 19 | name: "The Iron Brotherhood", 20 | description: "The Iron Brotherhood is a faction of brave and honorable warriors. They value strength, courage, and loyalty above all else. Their members are known for their iron will and unbreakable spirit." 21 | }, 22 | { 23 | name: "The Arcane Order", 24 | description: "The Arcane Order is a faction of powerful mages. They seek knowledge and wisdom, and their magic is a tool to understand the mysteries of the universe. They are respected and feared for their magical prowess." 25 | }, 26 | { 27 | name: "The Silent Knives", 28 | description: "The Silent Knives is a faction of skilled rogues. They value stealth, cunning, and precision. Their members are masters of the shadows, using their skills for espionage and assassination." 29 | }, 30 | { 31 | name: "The Nature's Guardians", 32 | description: "The Nature's Guardians is a faction of druids and rangers. They are the protectors of the natural world, using their abilities to maintain the balance between civilization and nature." 33 | } 34 | ]; 35 | 36 | // create a new server 37 | const server = http.createServer((req, res) => { 38 | const parseUrl = url.parse(req.url, true); // parse the URL 39 | const pathname = parseUrl.pathname; // get the path name 40 | 41 | // Set CORS headers to allow cross-origin requests 42 | res.setHeader('Access-Control-Allow-Origin', '*'); // This allows all origins 43 | res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // Allowed request methods 44 | res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 45 | 46 | // To call this API, use the following URL: 47 | // http://localhost:3000/api/character-factions 48 | // The API will return a list of factions with their names and descriptions 49 | // 50 | // if the path is '/api/character-factions' and the method is 'GET' 51 | if (pathname === '/api/character-factions' && req.method === 'GET') { 52 | 53 | if (!factions) { 54 | // if the factions array is empty, return a 404 status code and the message 'Factions not found' 55 | res.writeHead(404, { 'Content-Type': 'application/json' }); // set the response header 56 | res.end(JSON.stringify({ message: 'Factions not found' })); // send the response 57 | return; // exit the function 58 | } 59 | 60 | // if the factions array is not empty, return it as a JSON response 61 | res.writeHead(200, { 'Content-Type': 'application/json' }); 62 | res.end(JSON.stringify(factions)); // send the response 63 | } else { 64 | // if the path is not '/api/character-factions' or the method is not 'GET', return a 404 status code and the message 'Not found' 65 | res.writeHead(404, { 'Content-Type': 'text/plain' }); 66 | res.end('Not found'); // send the response 67 | } 68 | }); 69 | 70 | // start the server on port 3000 and log a message to the console 71 | server.listen(3000, () => { 72 | console.log('Server is listening on port 3000'); 73 | }); 74 | 75 | //////////////////////////// UNIT TESTS ///////////////////////////////// 76 | // Do not modify the code below this line. They are used to test the implementation above. 77 | // They are not required for the code to run correctly but are required to pass the tests. 78 | // The tests will run automatically when the code is run after a 1-second delay. 79 | // You do not need to understand the code below to complete this week's assignment. 80 | // 81 | // WARNING: If you modify the code below, the tests may not run correctly and the API's behavior may change. 82 | // if this happens, you may not receive full credit for the assignment, because I will have no way to verify 83 | // week 8's assignment requirements. 84 | //////////////////////////// UNIT TESTS ///////////////////////////////// 85 | setTimeout(() => { 86 | const http = require('http'); 87 | const assert = require('assert'); 88 | 89 | function testFactionsList(callback) { 90 | http.get('http://localhost:3000/api/character-factions', (res) => { 91 | let data = ''; 92 | res.on('data', (chunk) => { 93 | data += chunk; 94 | }); 95 | res.on('end', () => { 96 | const factions = JSON.parse(data); 97 | assert.strictEqual(res.statusCode, 200); 98 | assert.strictEqual(Array.isArray(factions), true); 99 | assert.strictEqual(factions.length > 0, true); 100 | callback(); 101 | }); 102 | }); 103 | } 104 | 105 | function testResponseHeaders(callback) { 106 | http.get('http://localhost:3000/api/character-factions', (res) => { 107 | assert.strictEqual(res.headers['access-control-allow-origin'], '*'); 108 | assert.strictEqual(res.headers['access-control-allow-methods'], 'GET, POST, OPTIONS'); 109 | callback(); 110 | }); 111 | } 112 | 113 | function testContentTypeJson(callback) { 114 | http.get('http://localhost:3000/api/character-factions', (res) => { 115 | assert.strictEqual(res.headers['content-type'], 'application/json'); 116 | callback(); 117 | }); 118 | } 119 | 120 | function testNotFound(callback) { 121 | http.get('http://localhost:3000/api/non-existing-route', (res) => { 122 | assert.strictEqual(res.statusCode, 404); 123 | callback(); 124 | }); 125 | } 126 | 127 | function testRunner() { 128 | let tests = [testFactionsList, testResponseHeaders, testContentTypeJson, testNotFound]; 129 | let index = 0; 130 | 131 | function nextTest() { 132 | if (index < tests.length) { 133 | tests[index++](nextTest); 134 | } else { 135 | console.log('All tests passed!'); 136 | } 137 | } 138 | 139 | nextTest(); 140 | } 141 | 142 | setTimeout(testRunner, 1000); 143 | }, 1000); -------------------------------------------------------------------------------- /data-files/daily-specials.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Author: Professor Krasso 3 | * Modified by: This code was generated with the assistance of GitHub Copilot 4 | * Date: 6-20-24 5 | * File: daily-specials.js 6 | * Description: This code is used to generate a list of daily specials for the virtual taco stand. 7 | * This code includes a series of unit tests to validate the code. 8 | */ 9 | "use strict"; 10 | 11 | // require statements 12 | const http = require('http'); 13 | const url = require('url'); 14 | 15 | // array of daily specials 16 | const specials = [ 17 | { day: 'Monday', name: 'Carnitas Taco', description: 'Slow-cooked pork with fresh cilantro, onions, and salsa on a corn tortilla.', price: 2.60 }, 18 | { day: 'Tuesday', name: 'Queso Birria Taco', description: 'Cheesy birria with cilantro, onions, and consomé for dipping.', price: 2.80 }, 19 | { day: 'Wednesday', name: 'Al Pastor Taco', description: 'Marinated pork with pineapple, cilantro, and onions on a corn tortilla.', price: 2.60 }, 20 | { day: 'Thursday', name: 'Tacos de Lengua', description: 'Tender beef tongue with cilantro and onions on a corn tortilla.', price: 2.80 }, 21 | { day: 'Friday', name: 'Chicken Taco', description: 'Grilled chicken with lettuce, tomatoes, and salsa on a corn tortilla.', price: 2.60 }, 22 | { day: 'Saturday', name: 'Fish Taco', description: 'Battered fish with cabbage slaw and creamy sauce on a flour tortilla.', price: 2.60 }, 23 | { day: 'Sunday', name: 'Veggie Taco', description: 'Grilled vegetables with black beans, cheese, and salsa on a corn tortilla.', price: 2.60 } 24 | ]; 25 | 26 | // create a new server 27 | const server = http.createServer((req, res) => { 28 | const parseUrl = url.parse(req.url, true); // parse the URL 29 | const pathname = parseUrl.pathname; // get the path name 30 | const query = parseUrl.query; // get the query string 31 | 32 | // Set CORS headers to allow cross-origin requests 33 | res.setHeader('Access-Control-Allow-Origin', '*'); // This allows all origins 34 | res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // Allowed request methods 35 | res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 36 | 37 | // To call this API, use the following URL: 38 | // http://localhost:3000/api/daily-specials?day=Monday 39 | // The query string parameter 'day' can be any day of the week 40 | // The API will return the special for that day 41 | // If the day is not found, the API will return a 404 status code 42 | // and the message 'Special not found' 43 | // 44 | // if the path is '/api/daily-specials' and the method is 'GET' 45 | if (pathname === '/api/daily-specials' && req.method === 'GET') { 46 | const day = query.day; // get the day from the query string 47 | 48 | // find the special for the given day in the specials array. Use the toLowerCase() method to make the search case-insensitive 49 | const special = specials.find(special => special.day.toLowerCase() === day.toLowerCase()); 50 | 51 | // if the special is found, return it as a JSON response 52 | if (special) { 53 | res.writeHead(200, { 'Content-Type': 'application/json' }); // set the response header 54 | res.end(JSON.stringify(special)); // send the response 55 | } else { 56 | // if the special is not found, return a 404 status code and the message 'Special not found' 57 | res.writeHead(404, { 'Content-Type': 'text/plain' }); // set the response header 58 | res.end('Special not found'); // send the response 59 | } 60 | } else { 61 | // if the path is not '/api/daily-specials' or the method is not 'GET', return a 404 status code and the message 'Not found' 62 | res.writeHead(404, { 'Content-Type': 'text/plain' }); 63 | res.end('Not found'); 64 | } 65 | }); 66 | 67 | // start the server on port 3000 68 | server.listen(3000, () => { 69 | console.log('Server is listening on port 3000'); // log a message to the console 70 | }); 71 | 72 | //////////////////////////// UNIT TESTS ///////////////////////////////// 73 | // Do not modify the code below this line. They are used to test the implementation above. 74 | // They are not required for the code to run correctly but are required to pass the tests. 75 | // The tests will run automatically when the code is run after a 1-second delay. 76 | // You do not need to understand the code below to complete this week's assignment. 77 | // 78 | // WARNING: If you modify the code below, the tests may not run correctly and the API's behavior may change. 79 | // if this happens, you may not receive full credit for the assignment, because I will have no way to verify 80 | // week 8's assignment requirements. 81 | //////////////////////////// UNIT TESTS ///////////////////////////////// 82 | setTimeout(() => { 83 | const http = require('http'); 84 | const assert = require('assert'); 85 | 86 | function testValidDaySpecial(callback) { 87 | http.get('http://localhost:3000/api/daily-specials?day=Monday', (res) => { 88 | let data = ''; 89 | res.on('data', (chunk) => { 90 | data += chunk; 91 | }); 92 | res.on('end', () => { 93 | const special = JSON.parse(data); 94 | assert.strictEqual(special.day, 'Monday'); 95 | callback(); 96 | }); 97 | }); 98 | } 99 | 100 | function testInvalidDaySpecial(callback) { 101 | http.get('http://localhost:3000/api/daily-specials?day=Nonday', (res) => { 102 | let data = ''; 103 | res.on('data', (chunk) => { 104 | data += chunk; 105 | }); 106 | res.on('end', () => { 107 | assert.strictEqual(data, 'Special not found'); 108 | callback(); 109 | }); 110 | }); 111 | } 112 | 113 | function testResponseHeaders(callback) { 114 | http.get('http://localhost:3000/api/daily-specials?day=Monday', (res) => { 115 | assert.strictEqual(res.headers['access-control-allow-origin'], '*'); 116 | assert.strictEqual(res.headers['access-control-allow-methods'], 'GET, POST, OPTIONS'); 117 | callback(); 118 | }); 119 | } 120 | 121 | function testContentTypeJson(callback) { 122 | http.get('http://localhost:3000/api/daily-specials?day=Monday', (res) => { 123 | assert.strictEqual(res.headers['content-type'], 'application/json'); 124 | callback(); 125 | }); 126 | } 127 | 128 | function testContentTypeText(callback) { 129 | http.get('http://localhost:3000/api/daily-specials?day=Nonday', (res) => { 130 | assert.strictEqual(res.headers['content-type'], 'text/plain'); 131 | callback(); 132 | }); 133 | } 134 | 135 | function testNotFound(callback) { 136 | http.get('http://localhost:3000/api/non-existing-route', (res) => { 137 | assert.strictEqual(res.statusCode, 404); 138 | callback(); 139 | }); 140 | } 141 | 142 | function testRunner() { 143 | let tests = [testValidDaySpecial, testInvalidDaySpecial, testResponseHeaders, testContentTypeJson, testContentTypeText, testNotFound]; 144 | let index = 0; 145 | 146 | function nextTest() { 147 | if (index < tests.length) { 148 | tests[index++](nextTest); 149 | } else { 150 | console.log('All tests passed!'); 151 | } 152 | } 153 | 154 | nextTest(); 155 | } 156 | setTimeout(testRunner, 1000); 157 | }, 1000) -------------------------------------------------------------------------------- /data-files/error-handling-demo/.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 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/.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 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/README.md: -------------------------------------------------------------------------------- 1 | # ErrorHandlingDemo 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.3. 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 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "error-handling-demo": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "outputPath": "dist/error-handling-demo", 17 | "index": "src/index.html", 18 | "browser": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | { 25 | "glob": "**/*", 26 | "input": "public" 27 | } 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "budgets": [ 37 | { 38 | "type": "initial", 39 | "maximumWarning": "500kB", 40 | "maximumError": "1MB" 41 | }, 42 | { 43 | "type": "anyComponentStyle", 44 | "maximumWarning": "2kB", 45 | "maximumError": "4kB" 46 | } 47 | ], 48 | "outputHashing": "all" 49 | }, 50 | "development": { 51 | "optimization": false, 52 | "extractLicenses": false, 53 | "sourceMap": true 54 | } 55 | }, 56 | "defaultConfiguration": "production" 57 | }, 58 | "serve": { 59 | "builder": "@angular-devkit/build-angular:dev-server", 60 | "configurations": { 61 | "production": { 62 | "buildTarget": "error-handling-demo:build:production" 63 | }, 64 | "development": { 65 | "buildTarget": "error-handling-demo:build:development" 66 | } 67 | }, 68 | "defaultConfiguration": "development" 69 | }, 70 | "extract-i18n": { 71 | "builder": "@angular-devkit/build-angular:extract-i18n" 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "polyfills": [ 77 | "zone.js", 78 | "zone.js/testing" 79 | ], 80 | "tsConfig": "tsconfig.spec.json", 81 | "assets": [ 82 | { 83 | "glob": "**/*", 84 | "input": "public" 85 | } 86 | ], 87 | "styles": [ 88 | "src/styles.css" 89 | ], 90 | "scripts": [] 91 | } 92 | } 93 | } 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "error-handling-demo", 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.0.0", 14 | "@angular/common": "^18.0.0", 15 | "@angular/compiler": "^18.0.0", 16 | "@angular/core": "^18.0.0", 17 | "@angular/forms": "^18.0.0", 18 | "@angular/platform-browser": "^18.0.0", 19 | "@angular/platform-browser-dynamic": "^18.0.0", 20 | "@angular/router": "^18.0.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.14.3" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^18.0.3", 27 | "@angular/cli": "^18.0.3", 28 | "@angular/compiler-cli": "^18.0.0", 29 | "@types/jasmine": "~5.1.0", 30 | "jasmine-core": "~5.1.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.4.2" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/error-handling-demo/public/favicon.ico -------------------------------------------------------------------------------- /data-files/error-handling-demo/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 'error-handling-demo' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('error-handling-demo'); 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, error-handling-demo'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/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 | template: ` 9 |
10 |
11 |

12 | {{ title }} 13 |

14 | 15 |
16 | 17 |
18 | 25 | 26 | 27 |
28 | 29 |
30 | © 2024 - Angular Error Handling Demo 31 |
32 |
33 | `, 34 | styles: ` 35 | .container { 36 | display: flex; 37 | flex-direction: column; 38 | align-items: center; 39 | justify-content: center; 40 | width: 65%; 41 | margin: 0 auto; 42 | } 43 | 44 | header { 45 | background-color: #f8f9fa; 46 | padding: 10px; 47 | width: 100%; 48 | text-align: center; 49 | } 50 | 51 | main { 52 | width: 100%; 53 | min-height: 500px; 54 | } 55 | 56 | .navbar ul { 57 | display: block; 58 | list-style-type: none; 59 | padding: 0; 60 | } 61 | 62 | .navbar { 63 | text-align: center; 64 | } 65 | 66 | li { 67 | display: inline; 68 | margin-right: 10px; 69 | } 70 | 71 | footer { 72 | background-color: #f8f9fa; 73 | padding: 10px; 74 | width: 100%; 75 | height: 80px; 76 | text-align: center; 77 | } 78 | ` 79 | }) 80 | export class AppComponent { 81 | title = 'Error Handling Demo'; 82 | } 83 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, ErrorHandler, provideZoneChangeDetection } from '@angular/core'; 2 | import { GlobalErrorHandlerService } from './global-error-handler.service'; 3 | import { provideRouter } from '@angular/router'; 4 | 5 | import { routes } from './app.routes'; 6 | 7 | export const appConfig: ApplicationConfig = { 8 | providers: [ 9 | provideZoneChangeDetection({ eventCoalescing: true }), 10 | provideRouter(routes), 11 | { provide: ErrorHandler, useClass: GlobalErrorHandlerService } 12 | ] 13 | }; 14 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | import { ComponentLoggerErrorHandlingComponent } from './component-logger-error-handling/component-logger-error-handling.component'; 3 | import { ComponentLevelErrorHandlingComponent } from './component-level-error-handling/component-level-error-handling.component'; 4 | import { ComponentToTestGlobalErrorHandlerComponent } from './component-to-test-global-error-handler/component-to-test-global-error-handler.component'; 5 | 6 | export const routes: Routes = [ 7 | { 8 | path: 'logger', 9 | component: ComponentLoggerErrorHandlingComponent 10 | }, 11 | { 12 | path: 'component-error', 13 | component: ComponentLevelErrorHandlingComponent 14 | }, 15 | { 16 | path: 'global-error', 17 | component: ComponentToTestGlobalErrorHandlerComponent 18 | } 19 | ]; 20 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/component-level-error-handling/component-level-error-handling.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ComponentLevelErrorHandlingComponent } from './component-level-error-handling.component'; 4 | 5 | describe('ComponentLevelErrorHandlingComponent', () => { 6 | let component: ComponentLevelErrorHandlingComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ComponentLevelErrorHandlingComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(ComponentLevelErrorHandlingComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/component-level-error-handling/component-level-error-handling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-component-level-error-handling', 5 | standalone: true, 6 | imports: [], 7 | template: ` 8 |

Component Level Error Handling

9 |

This component demonstrates how to use variables for to display error messages

10 | 11 |
12 | 13 |
14 | @if(errorMsg) { 15 |
16 |

Error!

17 |

{{ errorMsg }}

18 |
19 | } 20 | 21 | @if(warnMsg) { 22 |
23 |

Warning!

24 |

{{ warnMsg }}

25 |
26 | } 27 | 28 | @if(infoMsg) { 29 |
30 |

Info!

31 |

{{ infoMsg }}

32 |
33 | } 34 |
35 | `, 36 | styles: ` 37 | #error { 38 | background-color: #f8d7da; 39 | color: #721c24; 40 | padding: 10px; 41 | margin-bottom: 10px; 42 | } 43 | 44 | #warn { 45 | background-color: #fff3cd; 46 | color: #856404; 47 | padding: 10px; 48 | margin-bottom: 10px; 49 | } 50 | 51 | #info { 52 | background-color: #cce5ff; 53 | color: #004085; 54 | padding: 10px; 55 | margin-bottom: 10px; 56 | } 57 | ` 58 | }) 59 | export class ComponentLevelErrorHandlingComponent { 60 | errorMsg: string; 61 | warnMsg: string = 'This is a warning message'; 62 | infoMsg: string = 'This is an info message'; 63 | 64 | constructor() { 65 | this.errorMsg = ''; 66 | this.initializeErrorHandling(); 67 | } 68 | 69 | async initializeErrorHandling() { 70 | try { 71 | await this.throwError(); 72 | } catch (err: any) { 73 | this.errorMsg = err; 74 | } 75 | } 76 | 77 | async throwError() { 78 | return new Promise((resolve, reject) => { 79 | setTimeout(() => { 80 | reject('This is an error message.'); 81 | }, 3000); 82 | }); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/component-logger-error-handling/component-logger-error-handling.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ComponentLoggerErrorHandlingComponent } from './component-logger-error-handling.component'; 4 | 5 | describe('ComponentLoggerErrorHandlingComponent', () => { 6 | let component: ComponentLoggerErrorHandlingComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ComponentLoggerErrorHandlingComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(ComponentLoggerErrorHandlingComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/component-logger-error-handling/component-logger-error-handling.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { LoggerService } from '../logger.service'; 3 | 4 | @Component({ 5 | selector: 'app-component-logger-error-handling', 6 | standalone: true, 7 | imports: [], 8 | template: ` 9 |

10 | Logger Example 11 |

12 |

This is an example of a logger service that logs messages to the console.

13 |

Open the web browser console window to view the messages.

14 | `, 15 | styles: ` 16 | 17 | ` 18 | }) 19 | export class ComponentLoggerErrorHandlingComponent { 20 | constructor(private logger: LoggerService) { 21 | this.logger.log('This is a test message from the logger service.'); 22 | this.logger.warn('This is a test warning from the logger service.'); 23 | this.logger.error('This is a test error from the logger service.'); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/component-to-test-global-error-handler/component-to-test-global-error-handler.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ComponentToTestGlobalErrorHandlerComponent } from './component-to-test-global-error-handler.component'; 4 | 5 | describe('ComponentToTestGlobalErrorHandlerComponent', () => { 6 | let component: ComponentToTestGlobalErrorHandlerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [ComponentToTestGlobalErrorHandlerComponent] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(ComponentToTestGlobalErrorHandlerComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/component-to-test-global-error-handler/component-to-test-global-error-handler.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-component-to-test-global-error-handler', 5 | standalone: true, 6 | imports: [], 7 | template: ` 8 |

Global Error Handler Example

9 |

This component demonstrates how to use the global error handler to catch errors in Angular applications.

10 |

Open the web browser console window to view the message.

11 | `, 12 | styles: `` 13 | }) 14 | export class ComponentToTestGlobalErrorHandlerComponent { 15 | constructor() { 16 | setTimeout(() => { 17 | throw new Error('This is a test error from the component-to-test-global-error-handler.'); 18 | }, 2000) 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/global-error-handler.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { GlobalErrorHandlerService } from './global-error-handler.service'; 4 | 5 | describe('GlobalErrorHandlerService', () => { 6 | let service: GlobalErrorHandlerService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(GlobalErrorHandlerService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/global-error-handler.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, ErrorHandler } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class GlobalErrorHandlerService implements ErrorHandler { 7 | 8 | constructor() { } 9 | 10 | handleError(error: any): void { 11 | console.error(`An error occurred and was caught by the global error handler: ${error}`); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/logger.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { LoggerService } from './logger.service'; 4 | 5 | describe('LoggerService', () => { 6 | let service: LoggerService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(LoggerService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/app/logger.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class LoggerService { 7 | 8 | constructor() { } 9 | 10 | log(message: string): void { 11 | console.log(message); 12 | } 13 | 14 | error(message: string, stack?: string): void { 15 | console.error(message); 16 | if (stack) { 17 | console.error(stack); 18 | } 19 | } 20 | 21 | warn(message: string): void { 22 | console.warn(message); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ErrorHandlingDemo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/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 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/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 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/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 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "bundler", 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 | -------------------------------------------------------------------------------- /data-files/error-handling-demo/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 | -------------------------------------------------------------------------------- /data-files/portfolio/.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 | -------------------------------------------------------------------------------- /data-files/portfolio/.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 | -------------------------------------------------------------------------------- /data-files/portfolio/README.md: -------------------------------------------------------------------------------- 1 | # Portfolio 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.3. 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 | -------------------------------------------------------------------------------- /data-files/portfolio/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "portfolio": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "outputPath": "dist/portfolio", 17 | "index": "src/index.html", 18 | "browser": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | { 25 | "glob": "**/*", 26 | "input": "public" 27 | } 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "budgets": [ 37 | { 38 | "type": "initial", 39 | "maximumWarning": "500kB", 40 | "maximumError": "1MB" 41 | }, 42 | { 43 | "type": "anyComponentStyle", 44 | "maximumWarning": "2kB", 45 | "maximumError": "4kB" 46 | } 47 | ], 48 | "outputHashing": "all" 49 | }, 50 | "development": { 51 | "optimization": false, 52 | "extractLicenses": false, 53 | "sourceMap": true 54 | } 55 | }, 56 | "defaultConfiguration": "production" 57 | }, 58 | "serve": { 59 | "builder": "@angular-devkit/build-angular:dev-server", 60 | "configurations": { 61 | "production": { 62 | "buildTarget": "portfolio:build:production" 63 | }, 64 | "development": { 65 | "buildTarget": "portfolio:build:development" 66 | } 67 | }, 68 | "defaultConfiguration": "development" 69 | }, 70 | "extract-i18n": { 71 | "builder": "@angular-devkit/build-angular:extract-i18n" 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "polyfills": [ 77 | "zone.js", 78 | "zone.js/testing" 79 | ], 80 | "tsConfig": "tsconfig.spec.json", 81 | "assets": [ 82 | { 83 | "glob": "**/*", 84 | "input": "public" 85 | } 86 | ], 87 | "styles": [ 88 | "src/styles.css" 89 | ], 90 | "scripts": [] 91 | } 92 | } 93 | } 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /data-files/portfolio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 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.0.0", 14 | "@angular/common": "^18.0.0", 15 | "@angular/compiler": "^18.0.0", 16 | "@angular/core": "^18.0.0", 17 | "@angular/forms": "^18.0.0", 18 | "@angular/platform-browser": "^18.0.0", 19 | "@angular/platform-browser-dynamic": "^18.0.0", 20 | "@angular/router": "^18.0.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.14.3" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^18.0.3", 27 | "@angular/cli": "^18.0.3", 28 | "@angular/compiler-cli": "^18.0.0", 29 | "@types/jasmine": "~5.1.0", 30 | "jasmine-core": "~5.1.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.4.2" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /data-files/portfolio/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/portfolio/public/favicon.ico -------------------------------------------------------------------------------- /data-files/portfolio/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/portfolio/src/app/app.component.css -------------------------------------------------------------------------------- /data-files/portfolio/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 179 | 180 |
181 |
182 |
183 | 228 |

Hello, {{ title }}

229 |

Congratulations! Your app is running. 🎉

230 |
231 | 232 |
233 |
234 | @for (item of [ 235 | { title: 'Explore the Docs', link: 'https://angular.dev' }, 236 | { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, 237 | { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, 238 | { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, 239 | { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, 240 | ]; track item.title) { 241 | 247 | {{ item.title }} 248 | 255 | 258 | 259 | 260 | } 261 |
262 | 323 |
324 |
325 |
326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | -------------------------------------------------------------------------------- /data-files/portfolio/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 'portfolio' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('portfolio'); 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, portfolio'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /data-files/portfolio/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 = 'portfolio'; 13 | } 14 | -------------------------------------------------------------------------------- /data-files/portfolio/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: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /data-files/portfolio/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /data-files/portfolio/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Portfolio 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /data-files/portfolio/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 | -------------------------------------------------------------------------------- /data-files/portfolio/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /data-files/portfolio/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 | -------------------------------------------------------------------------------- /data-files/portfolio/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 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "bundler", 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 | -------------------------------------------------------------------------------- /data-files/portfolio/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 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/.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 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/.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 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/README.md: -------------------------------------------------------------------------------- 1 | # RpgCharacterBuilder 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.3. 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 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "rpg-character-builder": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "outputPath": "dist/rpg-character-builder", 17 | "index": "src/index.html", 18 | "browser": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | { 25 | "glob": "**/*", 26 | "input": "public" 27 | } 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "budgets": [ 37 | { 38 | "type": "initial", 39 | "maximumWarning": "500kB", 40 | "maximumError": "1MB" 41 | }, 42 | { 43 | "type": "anyComponentStyle", 44 | "maximumWarning": "2kB", 45 | "maximumError": "4kB" 46 | } 47 | ], 48 | "outputHashing": "all" 49 | }, 50 | "development": { 51 | "optimization": false, 52 | "extractLicenses": false, 53 | "sourceMap": true 54 | } 55 | }, 56 | "defaultConfiguration": "production" 57 | }, 58 | "serve": { 59 | "builder": "@angular-devkit/build-angular:dev-server", 60 | "configurations": { 61 | "production": { 62 | "buildTarget": "rpg-character-builder:build:production" 63 | }, 64 | "development": { 65 | "buildTarget": "rpg-character-builder:build:development" 66 | } 67 | }, 68 | "defaultConfiguration": "development" 69 | }, 70 | "extract-i18n": { 71 | "builder": "@angular-devkit/build-angular:extract-i18n" 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "polyfills": [ 77 | "zone.js", 78 | "zone.js/testing" 79 | ], 80 | "tsConfig": "tsconfig.spec.json", 81 | "assets": [ 82 | { 83 | "glob": "**/*", 84 | "input": "public" 85 | } 86 | ], 87 | "styles": [ 88 | "src/styles.css" 89 | ], 90 | "scripts": [], 91 | "karmaConfig": "karma.conf.js" 92 | } 93 | } 94 | } 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-firefox-launcher'), 12 | require('karma-jasmine-html-reporter'), 13 | require('karma-coverage'), 14 | require('@angular-devkit/build-angular/plugins/karma') 15 | ], 16 | client: { 17 | jasmine: { 18 | // you can add configuration options for Jasmine here 19 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 20 | // for example, you can disable the random execution with `random: false` 21 | // or set a specific seed with `seed: 4321` 22 | }, 23 | clearContext: false // leave Jasmine Spec Runner output visible in browser 24 | }, 25 | jasmineHtmlReporter: { 26 | suppressAll: true // removes the duplicated traces 27 | }, 28 | coverageReporter: { 29 | dir: require('path').join(__dirname, './coverage/rpg-character-builder'), 30 | subdir: '.', 31 | reporters: [ 32 | { type: 'html' }, 33 | { type: 'text-summary' } 34 | ] 35 | }, 36 | reporters: ['progress', 'kjhtml'], 37 | browsers: ['Firefox'], 38 | restartOnFileChange: true 39 | }); 40 | }; 41 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rpg-character-builder", 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.0.0", 14 | "@angular/common": "^18.0.0", 15 | "@angular/compiler": "^18.0.0", 16 | "@angular/core": "^18.0.0", 17 | "@angular/forms": "^18.0.0", 18 | "@angular/platform-browser": "^18.0.0", 19 | "@angular/platform-browser-dynamic": "^18.0.0", 20 | "@angular/router": "^18.0.0", 21 | "ngx-cookie-service": "^18.0.0", 22 | "rxjs": "~7.8.0", 23 | "tslib": "^2.3.0", 24 | "zone.js": "~0.14.3" 25 | }, 26 | "devDependencies": { 27 | "@angular-devkit/build-angular": "^18.0.3", 28 | "@angular/cli": "^18.0.3", 29 | "@angular/compiler-cli": "^18.0.0", 30 | "@types/jasmine": "~5.1.0", 31 | "jasmine-core": "~5.1.0", 32 | "karma": "~6.4.0", 33 | "karma-chrome-launcher": "~3.2.0", 34 | "karma-coverage": "~2.2.0", 35 | "karma-firefox-launcher": "^2.1.3", 36 | "karma-jasmine": "~5.1.0", 37 | "karma-jasmine-html-reporter": "~2.1.0", 38 | "typescript": "~5.4.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/rpg-character-builder/public/favicon.ico -------------------------------------------------------------------------------- /data-files/rpg-character-builder/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/rpg-character-builder/src/app/app.component.css -------------------------------------------------------------------------------- /data-files/rpg-character-builder/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 179 | 180 |
181 |
182 |
183 | 228 |

Hello, {{ title }}

229 |

Congratulations! Your app is running. 🎉

230 |
231 | 232 |
233 |
234 | @for (item of [ 235 | { title: 'Explore the Docs', link: 'https://angular.dev' }, 236 | { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, 237 | { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, 238 | { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, 239 | { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, 240 | ]; track item.title) { 241 | 247 | {{ item.title }} 248 | 255 | 258 | 259 | 260 | } 261 |
262 | 323 |
324 |
325 |
326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/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 'rpg-character-builder' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('rpg-character-builder'); 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, rpg-character-builder'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/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 = 'rpg-character-builder'; 13 | } 14 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/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: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | RpgCharacterBuilder 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/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 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/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 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/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 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "bundler", 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 | -------------------------------------------------------------------------------- /data-files/rpg-character-builder/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 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/.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 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/.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 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/README.md: -------------------------------------------------------------------------------- 1 | # UnitTestingDemo 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.3. 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 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "unit-testing-demo": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "outputPath": "dist/unit-testing-demo", 17 | "index": "src/index.html", 18 | "browser": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | { 25 | "glob": "**/*", 26 | "input": "public" 27 | } 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "budgets": [ 37 | { 38 | "type": "initial", 39 | "maximumWarning": "500kB", 40 | "maximumError": "1MB" 41 | }, 42 | { 43 | "type": "anyComponentStyle", 44 | "maximumWarning": "2kB", 45 | "maximumError": "4kB" 46 | } 47 | ], 48 | "outputHashing": "all" 49 | }, 50 | "development": { 51 | "optimization": false, 52 | "extractLicenses": false, 53 | "sourceMap": true 54 | } 55 | }, 56 | "defaultConfiguration": "production" 57 | }, 58 | "serve": { 59 | "builder": "@angular-devkit/build-angular:dev-server", 60 | "configurations": { 61 | "production": { 62 | "buildTarget": "unit-testing-demo:build:production" 63 | }, 64 | "development": { 65 | "buildTarget": "unit-testing-demo:build:development" 66 | } 67 | }, 68 | "defaultConfiguration": "development" 69 | }, 70 | "extract-i18n": { 71 | "builder": "@angular-devkit/build-angular:extract-i18n" 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "polyfills": [ 77 | "zone.js", 78 | "zone.js/testing" 79 | ], 80 | "tsConfig": "tsconfig.spec.json", 81 | "assets": [ 82 | { 83 | "glob": "**/*", 84 | "input": "public" 85 | } 86 | ], 87 | "styles": [ 88 | "src/styles.css" 89 | ], 90 | "scripts": [], 91 | "karmaConfig": "karma.conf.js" 92 | } 93 | } 94 | } 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | files: [ 8 | { pattern: 'src/**/*.spec.ts', type: 'js' } 9 | ], 10 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 11 | plugins: [ 12 | require('karma-jasmine'), 13 | require('karma-chrome-launcher'), 14 | require('karma-firefox-launcher'), 15 | require('karma-jasmine-html-reporter'), 16 | require('karma-coverage'), 17 | require('@angular-devkit/build-angular/plugins/karma') 18 | ], 19 | client: { 20 | jasmine: { 21 | // you can add configuration options for Jasmine here 22 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 23 | // for example, you can disable the random execution with `random: false` 24 | // or set a specific seed with `seed: 4321` 25 | }, 26 | clearContext: false // leave Jasmine Spec Runner output visible in browser 27 | }, 28 | jasmineHtmlReporter: { 29 | suppressAll: true // removes the duplicated traces 30 | }, 31 | coverageReporter: { 32 | dir: require('path').join(__dirname, './coverage/unit-testing-demo'), 33 | subdir: '.', 34 | reporters: [ 35 | { type: 'html' }, 36 | { type: 'text-summary' } 37 | ] 38 | }, 39 | reporters: ['progress', 'kjhtml'], 40 | browsers: ['Firefox'], // if you are using Chrome, change this to 'Chrome' 41 | restartOnFileChange: true 42 | }); 43 | }; 44 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "unit-testing-demo", 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.0.0", 14 | "@angular/common": "^18.0.0", 15 | "@angular/compiler": "^18.0.0", 16 | "@angular/core": "^18.0.0", 17 | "@angular/forms": "^18.0.0", 18 | "@angular/platform-browser": "^18.0.0", 19 | "@angular/platform-browser-dynamic": "^18.0.0", 20 | "@angular/router": "^18.0.0", 21 | "rxjs": "~7.8.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.14.3" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "^18.0.3", 27 | "@angular/cli": "^18.0.3", 28 | "@angular/compiler-cli": "^18.0.0", 29 | "@types/jasmine": "~5.1.0", 30 | "jasmine-core": "~5.1.0", 31 | "karma": "~6.4.0", 32 | "karma-chrome-launcher": "~3.2.0", 33 | "karma-coverage": "~2.2.0", 34 | "karma-firefox-launcher": "^2.1.3", 35 | "karma-jasmine": "~5.1.0", 36 | "karma-jasmine-html-reporter": "~2.1.0", 37 | "typescript": "~5.4.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/unit-testing-demo/public/favicon.ico -------------------------------------------------------------------------------- /data-files/unit-testing-demo/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 'Unit Testing Demo' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('Unit Testing Demo'); 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('Unit Testing Demo'); 28 | }); 29 | 30 | // Simple addition test 31 | it('should add two numbers correctly', () => { 32 | const a = 5; 33 | const b = 3; 34 | const result = a + b; 35 | expect(result).toBe(8); 36 | }); 37 | 38 | // Simple subtraction test 39 | it('should subtract two numbers correctly', () => { 40 | const a = 10; 41 | const b = 4; 42 | const result = a - b; 43 | expect(result).toEqual(6); 44 | }); 45 | 46 | // Check if a function has been called (using a spy) 47 | it('should check if a method has been called', () => { 48 | const spyObj = jasmine.createSpyObj('AppComponent', ['dummyMethod']); 49 | spyObj.dummyMethod(); 50 | expect(spyObj.dummyMethod).toHaveBeenCalled(); 51 | }); 52 | 53 | // Check if a value is truthy 54 | it('should check if a value is truthy', () => { 55 | const isAvailable = true; 56 | expect(isAvailable).toBeTruthy(); 57 | }); 58 | }); 59 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/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 | template: ` 9 |
10 |
11 |

{{ title }}

12 |
13 | 14 |
15 |

{{ welcome }}

16 | 17 |
18 |
19 | `, 20 | styles: ` 21 | .container { 22 | display: flex; 23 | flex-direction: column; 24 | width: 65%; 25 | margin: 0 auto; 26 | } 27 | 28 | header { 29 | background-color: #333; 30 | color: white; 31 | padding: 10px; 32 | } 33 | 34 | main { 35 | padding: 10px; 36 | } 37 | ` 38 | }) 39 | export class AppComponent { 40 | title: string = "Unit Testing Demo"; 41 | welcome: string = "Welcome to the Unit Testing Demo!"; 42 | } 43 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/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: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UnitTestingDemo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/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 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body, html { 3 | margin: 0; 4 | padding: 0; 5 | font-family: Arial, sans-serif 6 | } 7 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/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 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/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 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "bundler", 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 | -------------------------------------------------------------------------------- /data-files/unit-testing-demo/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 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/.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 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/.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 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/README.md: -------------------------------------------------------------------------------- 1 | # VirtualTacoStand 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.3. 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 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "virtual-taco-stand": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "outputPath": "dist/virtual-taco-stand", 17 | "index": "src/index.html", 18 | "browser": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | { 25 | "glob": "**/*", 26 | "input": "public" 27 | } 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "budgets": [ 37 | { 38 | "type": "initial", 39 | "maximumWarning": "500kB", 40 | "maximumError": "1MB" 41 | }, 42 | { 43 | "type": "anyComponentStyle", 44 | "maximumWarning": "2kB", 45 | "maximumError": "4kB" 46 | } 47 | ], 48 | "outputHashing": "all" 49 | }, 50 | "development": { 51 | "optimization": false, 52 | "extractLicenses": false, 53 | "sourceMap": true 54 | } 55 | }, 56 | "defaultConfiguration": "production" 57 | }, 58 | "serve": { 59 | "builder": "@angular-devkit/build-angular:dev-server", 60 | "configurations": { 61 | "production": { 62 | "buildTarget": "virtual-taco-stand:build:production" 63 | }, 64 | "development": { 65 | "buildTarget": "virtual-taco-stand:build:development" 66 | } 67 | }, 68 | "defaultConfiguration": "development" 69 | }, 70 | "extract-i18n": { 71 | "builder": "@angular-devkit/build-angular:extract-i18n" 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "polyfills": [ 77 | "zone.js", 78 | "zone.js/testing" 79 | ], 80 | "tsConfig": "tsconfig.spec.json", 81 | "assets": [ 82 | { 83 | "glob": "**/*", 84 | "input": "public" 85 | } 86 | ], 87 | "styles": [ 88 | "src/styles.css" 89 | ], 90 | "scripts": [], 91 | "karmaConfig": "karma.conf.js" 92 | } 93 | } 94 | } 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-firefox-launcher'), 12 | require('karma-jasmine-html-reporter'), 13 | require('karma-coverage'), 14 | require('@angular-devkit/build-angular/plugins/karma') 15 | ], 16 | client: { 17 | jasmine: { 18 | // you can add configuration options for Jasmine here 19 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 20 | // for example, you can disable the random execution with `random: false` 21 | // or set a specific seed with `seed: 4321` 22 | }, 23 | clearContext: false // leave Jasmine Spec Runner output visible in browser 24 | }, 25 | jasmineHtmlReporter: { 26 | suppressAll: true // removes the duplicated traces 27 | }, 28 | coverageReporter: { 29 | dir: require('path').join(__dirname, './coverage/virtual-taco-stand'), 30 | subdir: '.', 31 | reporters: [ 32 | { type: 'html' }, 33 | { type: 'text-summary' } 34 | ] 35 | }, 36 | reporters: ['progress', 'kjhtml'], 37 | browsers: ['Firefox'], 38 | restartOnFileChange: true 39 | }); 40 | }; 41 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "virtual-taco-stand", 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.0.0", 14 | "@angular/common": "^18.0.0", 15 | "@angular/compiler": "^18.0.0", 16 | "@angular/core": "^18.0.0", 17 | "@angular/forms": "^18.0.0", 18 | "@angular/platform-browser": "^18.0.0", 19 | "@angular/platform-browser-dynamic": "^18.0.0", 20 | "@angular/router": "^18.0.0", 21 | "ngx-cookie-service": "^18.0.0", 22 | "rxjs": "~7.8.0", 23 | "tslib": "^2.3.0", 24 | "zone.js": "~0.14.3" 25 | }, 26 | "devDependencies": { 27 | "@angular-devkit/build-angular": "^18.0.3", 28 | "@angular/cli": "^18.0.3", 29 | "@angular/compiler-cli": "^18.0.0", 30 | "@types/jasmine": "~5.1.0", 31 | "jasmine-core": "~5.1.0", 32 | "karma": "~6.4.0", 33 | "karma-chrome-launcher": "~3.2.0", 34 | "karma-coverage": "~2.2.0", 35 | "karma-firefox-launcher": "^2.1.3", 36 | "karma-jasmine": "~5.1.0", 37 | "karma-jasmine-html-reporter": "~2.1.0", 38 | "typescript": "~5.4.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/virtual-taco-stand/public/favicon.ico -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/buwebdev/web-425/7fe5bb57e77e6350e27269e3e9c57d695ddb4834/data-files/virtual-taco-stand/src/app/app.component.css -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 179 | 180 |
181 |
182 |
183 | 228 |

Hello, {{ title }}

229 |

Congratulations! Your app is running. 🎉

230 |
231 | 232 |
233 |
234 | @for (item of [ 235 | { title: 'Explore the Docs', link: 'https://angular.dev' }, 236 | { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, 237 | { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, 238 | { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, 239 | { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, 240 | ]; track item.title) { 241 | 247 | {{ item.title }} 248 | 255 | 258 | 259 | 260 | } 261 |
262 | 323 |
324 |
325 |
326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/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 'virtual-taco-stand' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('virtual-taco-stand'); 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, virtual-taco-stand'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/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 = 'virtual-taco-stand'; 13 | } 14 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/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: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VirtualTacoStand 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/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 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/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 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/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 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "bundler", 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 | -------------------------------------------------------------------------------- /data-files/virtual-taco-stand/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 | --------------------------------------------------------------------------------