Repository: angular-university/angular-course Branch: master Commit: 8ef2f749e26d Files: 59 Total size: 50.8 KB Directory structure: gitextract_qso4u9bd/ ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── angular.json ├── e2e/ │ ├── protractor.conf.js │ ├── src/ │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.e2e.json ├── package.json ├── proxy.json ├── server/ │ ├── get-courses.route.ts │ └── save-course.route.ts ├── server.ts ├── server.tsconfig.json ├── src/ │ ├── app/ │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── config.ts │ │ ├── course-title/ │ │ │ ├── course-title.component.css │ │ │ ├── course-title.component.html │ │ │ ├── course-title.component.spec.ts │ │ │ └── course-title.component.ts │ │ ├── courses/ │ │ │ ├── course-card/ │ │ │ │ ├── course-card.component.css │ │ │ │ ├── course-card.component.html │ │ │ │ ├── course-card.component.spec.ts │ │ │ │ └── course-card.component.ts │ │ │ ├── course-image/ │ │ │ │ ├── course-image.component.css │ │ │ │ ├── course-image.component.html │ │ │ │ ├── course-image.component.spec.ts │ │ │ │ └── course-image.component.ts │ │ │ ├── courses.module.spec.ts │ │ │ ├── courses.service.ts │ │ │ ├── directives/ │ │ │ │ ├── highlighted.directive.spec.ts │ │ │ │ ├── highlighted.directive.ts │ │ │ │ ├── ngx-unless.directive.spec.ts │ │ │ │ └── ngx-unless.directive.ts │ │ │ └── filter-by-category.pipe.ts │ │ └── model/ │ │ └── course.ts │ ├── assets/ │ │ ├── .gitkeep │ │ └── styles.css │ ├── db-data.ts │ ├── environments/ │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── karma.conf.js │ ├── locale/ │ │ └── messages.fr.xlf │ ├── main.ts │ ├── messages.xlf │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── tslint.json ├── tsconfig.json └── tslint.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .browserslistrc ================================================ # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers # For additional information regarding the format and rule options, please see: # https://github.com/browserslist/browserslist#queries # For IE 9-11 support, please uncomment the last line of the file and adjust as needed > 0.5% last 2 versions Firefox ESR not dead # IE 9-11 ================================================ FILE: .editorconfig ================================================ # Editor configuration, see http://editorconfig.org root = true [*] charset = utf-8 indent_style = space indent_size = 2 insert_final_newline = true trim_trailing_whitespace = true [*.md] max_line_length = off trim_trailing_whitespace = false ================================================ FILE: .gitignore ================================================ # See http://help.github.com/ignore-files/ for more about ignoring files. # compiled output /dist /tmp /out-tsc # dependencies /node_modules # IDEs and editors /.idea .project .classpath .c9/ *.launch .settings/ *.sublime-workspace # IDE - VSCode .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json # misc /.angular/cache /.sass-cache /connect.lock /coverage /libpeerconnection.log npm-debug.log yarn-error.log testem.log /typings # System Files .DS_Store Thumbs.db ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2018 Angular University Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ ## Angular Core Deep Dive (Video Course) This repository contains the code of the [Angular Core Deep Dive](https://angular-university.io/course/angular-course). This course repository is updated to Angular 21: ![Angular Core Deep Dive](https://d3vigmphadbn9b.cloudfront.net/course-images/large-images/angular-core-deep-dive-new-2.jpg) # Installation pre-requisites IMPORTANT: Please use Node 22 LTS (Long Term Support version). # Installing the Angular CLI With the following command the angular-cli will be installed globally in your machine: npm install -g @angular/cli # How To install this repository We can install the master branch using the following commands: git clone https://github.com/angular-university/angular-course.git This repository is made of several separate npm modules, that are installable separately. For example, to run the au-input module, we can do the following: cd angular-course npm install Its also possible to install the modules as usual using npm: npm install NPM 5 or above has the big advantage that if you use it you will be installing the exact same dependencies than I installed in my machine, so you wont run into issues caused by semantic versioning updates. This should take a couple of minutes. If there are issues, please post the complete error message in the Questions section of the course. # To Run the Development Backend Server In order to be able to provide realistic examples, we will need in our playground a small REST API backend server. We can start the sample application backend with the following command: npm run server This is a small Node REST API server. # To run the Development UI Server To run the frontend part of our code, we will use the Angular CLI: npm start The application is visible at port 4200: [http://localhost:4200](http://localhost:4200) # Important This repository has multiple branches, have a look at the beginning of each section to see the name of the branch. At certain points along the course, you will be asked to checkout other remote branches other than master. You can view all branches that you have available remotely using the following command: git branch -a The remote branches have their starting in origin, such as for example 1-navigation-and-containers. We can checkout the remote branch and start tracking it with a local branch that has the same name, by using the following command: git checkout -b section-1 origin/1-navigation-and-containers It's also possible to download a ZIP file for a given branch, using the branch dropdown on this page on the top left, and then selecting the Clone or Download / Download as ZIP button. # Other Courses # Modern Angular With Signals If you are looking for the [Modern Angular With Signals Course](https://angular-university.io/course/angular-signals-course), the repo with the full code can be found here: ![Modern Angular With Signals Course](https://d3vigmphadbn9b.cloudfront.net/course-images/large-images/angular-signals-course.jpg) # RxJs In Practice Course If you are looking for the [RxJs In Practice Course](https://angular-university.io/course/rxjs-course), the repo with the full code can be found here: ![RxJs In Practice Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png) # NgRx In Depth Course If you are looking for the [NgRx In Depth Course](https://angular-university.io/course/angular-ngrx-course), the repo with the full code can be found here: ![NgRx In Depth Course](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png) # Angular PWA Course If you are looking for the [Angular PWA Course](https://angular-university.io/course/angular-pwa-course), the repo with the full code can be found here: ![Angular PWA Course - Build the future of the Web Today](https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png) # Angular Security Masterclass If you are looking for the [Angular Security Masterclass](https://angular-university.io/course/angular-security-course), the repo with the full code can be found here: [Angular Security Masterclass](https://github.com/angular-university/angular-security-course). ![Angular Security Masterclass](https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png) # Angular Advanced Library Laboratory Course If you are looking for the Angular Advanced Course, the repo with the full code can be found here: [Angular Advanced Library Laboratory Course: Build Your Own Library](https://angular-university.io/course/angular-advanced-course). ![Angular Advanced Library Laboratory Course: Build Your Own Library](https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png) ## RxJs and Reactive Patterns Angular Architecture Course If you are looking for the RxJs and Reactive Patterns Angular Architecture Course code, the repo with the full code can be found here: [RxJs and Reactive Patterns Angular Architecture Course](https://angular-university.io/course/reactive-angular-architecture-course) ![RxJs and Reactive Patterns Angular Architecture Course](https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png) ## Angular Ngrx Reactive Extensions Architecture Course If you are looking for the Angular Ngrx Reactive Extensions Architecture Course code, the repo with the full code can be found here: [Angular Ngrx Reactive Extensions Architecture Course](https://angular-university.io/course/angular2-ngrx) [Github repo for this course](https://github.com/angular-university/ngrx-course) ![Angular Ngrx Course](https://angular-academy.s3.amazonaws.com/thumbnails/ngrx-angular.png) ## Angular 2 and Firebase - Build a Web Application Course If you are looking for the Angular 2 and Firebase - Build a Web Application Course code, the repo with the full code can be found here: [Angular 2 and Firebase - Build a Web Application](https://angular-university.io/course/build-an-application-with-angular2) [Github repo for this course](https://github.com/angular-university/angular-firebase-app) ![Angular firebase course](https://angular-academy.s3.amazonaws.com/thumbnails/angular_app-firebase-small.jpg) ## Complete Typescript 2 Course - Build A REST API If you are looking for the Complete Typescript 2 Course - Build a REST API, the repo with the full code can be found here: [https://angular-university.io/course/typescript-2-tutorial](https://github.com/angular-university/complete-typescript-course) [Github repo for this course](https://github.com/angular-university/complete-typescript-course) ![Complete Typescript Course](https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png) ================================================ FILE: angular.json ================================================ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "angular-course": { "i18n": { "locales": { "fr": { "translation": "src/locale/messages.fr.xlf", "baseHref": "" } } }, "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "", "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": { "base": "dist/angular-course" }, "index": "src/index.html", "polyfills": [ "src/polyfills.ts" ], "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ { "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "inject": true }, "src/styles.css" ], "scripts": [ { "input": "node_modules/document-register-element/build/document-register-element.js", "inject": true } ], "extractLicenses": false, "sourceMap": true, "optimization": false, "namedChunks": true, "browser": "src/main.ts" }, "configurations": { "production": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true }, "fr": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "outputPath": { "base": "dist/angular-course-fr/" }, "i18nFile": "src/locale/messages.fr.xlf", "i18nLocale": "fr", "i18nMissingTranslation": "ignore" } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "buildTarget": "angular-course:build" }, "configurations": { "production": { "buildTarget": "angular-course:build:production" }, "fr": { "buildTarget": "angular-course:build:fr" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "buildTarget": "angular-course:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": [ { "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "inject": true }, "src/styles.css" ], "scripts": [], "assets": [ "src/favicon.ico", "src/assets" ] } } } }, "angular-course-e2e": { "root": "e2e/", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "angular-course:serve" }, "configurations": { "production": { "devServerTarget": "angular-course:serve:production" } } } } } }, "cli": { "analytics": "e878a578-eb4f-4c7c-bbaf-6f0c4ac42135" }, "schematics": { "@schematics/angular:component": { "type": "component" }, "@schematics/angular:directive": { "type": "directive" }, "@schematics/angular:service": { "type": "service" }, "@schematics/angular:guard": { "typeSeparator": "." }, "@schematics/angular:interceptor": { "typeSeparator": "." }, "@schematics/angular:module": { "typeSeparator": "." }, "@schematics/angular:pipe": { "typeSeparator": "." }, "@schematics/angular:resolver": { "typeSeparator": "." } } } ================================================ FILE: e2e/protractor.conf.js ================================================ // Protractor configuration file, see link for more information // https://github.com/angular/protractor/blob/master/lib/config.ts const { SpecReporter } = require('jasmine-spec-reporter'); exports.config = { allScriptsTimeout: 11000, specs: [ './src/**/*.e2e-spec.ts' ], capabilities: { 'browserName': 'chrome' }, directConnect: true, baseUrl: 'http://localhost:4200/', framework: 'jasmine', jasmineNodeOpts: { showColors: true, defaultTimeoutInterval: 30000, print: function() {} }, onPrepare() { require('ts-node').register({ project: require('path').join(__dirname, './tsconfig.e2e.json') }); jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); } }; ================================================ FILE: e2e/src/app.e2e-spec.ts ================================================ import { AppPage } from './app.po'; describe('workspace-project App', () => { let page: AppPage; beforeEach(() => { page = new AppPage(); }); it('should display welcome message', () => { page.navigateTo(); expect(page.getParagraphText()).toEqual('Welcome to angular-course!'); }); }); ================================================ FILE: e2e/src/app.po.ts ================================================ import { browser, by, element } from 'protractor'; export class AppPage { navigateTo() { return browser.get('/'); } getParagraphText() { return element(by.css('app-root h1')).getText(); } } ================================================ FILE: e2e/tsconfig.e2e.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "module": "commonjs", "target": "es5", "types": [ "jasmine", "jasminewd2", "node" ] } } ================================================ FILE: package.json ================================================ { "name": "angular-course", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve --proxy-config ./proxy.json", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "server": "ts-node -P ./server.tsconfig.json ./server.ts" }, "private": true, "dependencies": { "@angular/animations": "^21.0.1", "@angular/cdk": "^21.0.1", "@angular/common": "^21.0.1", "@angular/compiler": "^21.0.1", "@angular/core": "^21.0.1", "@angular/elements": "^21.0.1", "@angular/forms": "^21.0.1", "@angular/localize": "^21.0.1", "@angular/material": "^21.0.1", "@angular/platform-browser": "^21.0.1", "@angular/platform-browser-dynamic": "^21.0.1", "@angular/router": "^21.0.1", "body-parser": "^1.18.3", "core-js": "^2.5.4", "cors": "^2.8.5", "document-register-element": "1.8.1", "express": "^4.16.3", "rxjs": "^6.5.4", "zone.js": "~0.15.0" }, "devDependencies": { "@angular-devkit/build-angular": "^21.0.1", "@angular/cli": "^21.0.1", "@angular/compiler-cli": "^21.0.1", "@angular/language-service": "^21.0.1", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "jasmine-core": "~3.8.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.7.0", "ts-node": "~5.0.1", "tslint": "~6.1.0", "typescript": "~5.9.3" } } ================================================ FILE: proxy.json ================================================ { "/api": { "target": "http://localhost:9000", "secure": false } } ================================================ FILE: server/get-courses.route.ts ================================================ import {Request, Response} from 'express'; import {COURSES} from '../src/db-data'; export function getAllCourses(req: Request, res: Response) { res.status(200).json(Object.values(COURSES)); } export function getCourseById(req: Request, res: Response) { const courseId = req.params['id']; const courses: any = Object.values(COURSES); const course = courses.find(course => course.id == courseId); res.status(200).json(course); } ================================================ FILE: server/save-course.route.ts ================================================ import {Request, Response} from 'express'; import {findCourseById} from '../src/db-data'; export function saveCourse(req: Request, res: Response) { const id = req.params["id"], changes = req.body; console.log("Saving course", id, JSON.stringify(changes)); const course = findCourseById(id); course.description = changes.description; res.status(200).json(course); } ================================================ FILE: server.ts ================================================ import * as express from 'express'; import {Application} from "express"; import {getAllCourses} from './server/get-courses.route'; import {saveCourse} from './server/save-course.route'; const cors = require('cors'); const bodyParser = require('body-parser'); const app: Application = express(); app.use(cors({origin: true})); app.use(bodyParser.json()); app.route('/api/courses').get(getAllCourses); app.route('/api/courses/:id').put(saveCourse); const httpServer = app.listen(9000, () => { console.log("HTTP REST API Server running at http://localhost:" + httpServer.address().port); }); ================================================ FILE: server.tsconfig.json ================================================ { "compilerOptions": { "module": "commonjs" } } ================================================ FILE: src/app/app.component.css ================================================ .top-menu { background: #1976d2; padding: 2px 15px; } .logo { max-height: 55px; } .courses { max-width: 400px; margin: 50px auto; } ================================================ FILE: src/app/app.component.html ================================================
@for (course of courses ; track course) { }
================================================ FILE: src/app/app.component.spec.ts ================================================ import { TestBed, waitForAsync } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); })); it('should create the app', waitForAsync(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); it(`should have as title 'angular-course'`, waitForAsync(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('angular-course'); })); it('should render title in a h1 tag', waitForAsync(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-course!'); })); }); ================================================ FILE: src/app/app.component.ts ================================================ import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, Inject, Injector, OnInit} from '@angular/core'; import {Course} from './model/course'; import {Observable} from 'rxjs'; import {AppConfig, CONFIG_TOKEN} from './config'; import {COURSES} from '../db-data'; import {CoursesService} from './courses/courses.service'; import {createCustomElement} from '@angular/elements'; import {CourseTitleComponent} from './course-title/course-title.component'; import {CourseCardComponent} from './courses/course-card/course-card.component'; import {CourseImageComponent} from './courses/course-image/course-image.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ CourseCardComponent, CourseImageComponent ] }) export class AppComponent implements OnInit { courses: Course[] = COURSES; coursesTotal = this.courses.length; constructor( private coursesService: CoursesService, @Inject(CONFIG_TOKEN) private config: AppConfig, private injector: Injector) { } ngOnInit() { //const htmlElement = createCustomElement(CourseTitleComponent, {injector:this.injector}); //customElements.define('course-title', htmlElement); } onEditCourse() { this.courses[1].category = 'ADVANCED'; } save(course: Course) { this.coursesService.saveCourse(course) .subscribe( () => console.log('Course Saved!') ); } } ================================================ FILE: src/app/config.ts ================================================ import {InjectionToken} from '@angular/core'; export interface AppConfig { apiUrl:string; courseCacheSize:number; } export const APP_CONFIG:AppConfig = { apiUrl: 'http://localhost:9000', courseCacheSize: 10 } export const CONFIG_TOKEN = new InjectionToken('CONFIG_TOKEN', { providedIn: 'root', factory: () => APP_CONFIG }); ================================================ FILE: src/app/course-title/course-title.component.css ================================================ .course-title { text-decoration: underline; } ================================================ FILE: src/app/course-title/course-title.component.html ================================================
{{title}}
================================================ FILE: src/app/course-title/course-title.component.spec.ts ================================================ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { CourseTitleComponent } from './course-title.component'; describe('CourseTitleComponent', () => { let component: CourseTitleComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [ CourseTitleComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(CourseTitleComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/course-title/course-title.component.ts ================================================ import {Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnInit} from '@angular/core'; @Component({ selector: 'course-title', templateUrl: './course-title.component.html', styleUrls: ['./course-title.component.css'], standalone: true }) export class CourseTitleComponent implements OnInit { @Input() title:string; constructor() { } ngOnInit() { } } ================================================ FILE: src/app/courses/course-card/course-card.component.css ================================================ :host { display: block; } :host.is-first { border-top: 2px solid grey; padding-top: 20px; } :host.is-last { border-bottom: 2px solid grey; padding-top: 20px; } :host.is-even { background: lightgray; } :host.is-odd { background: lightcyan; } :host-context(.salmon-theme) .course-card { background: lightsalmon; } .course-card { margin-bottom: 40px; text-align: center; border-radius: 4px; padding: 20px 0; box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .2), 0 2px 8px 0 rgba(0, 0, 0, .14), 0 4px 8px -1px rgba(0, 0, 0, .12); } .course-card .course-title { font-size: 27px; font-weight: bold; } .course-card .course-description { max-width: 360px; margin: 0 auto; margin-top: 15px; user-select: none; } .course-card .course-description input { font-size: 20px; } .course-card.beginner { background: lightsalmon; } ================================================ FILE: src/app/courses/course-card/course-card.component.html ================================================ @if (course) {
{{ cardIndex || '' + ' ' + course.description }}
@if (course.iconUrl) { }
Edit Title:
{ course.category, select, BEGINNER {Beginner} INTERMEDIATE {Intermediate} ADVANCED {Advanced} }
} ================================================ FILE: src/app/courses/course-card/course-card.component.spec.ts ================================================ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { CourseCardComponent } from './course-card.component'; describe('CourseCardComponent', () => { let component: CourseCardComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [ CourseCardComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(CourseCardComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/courses/course-card/course-card.component.ts ================================================ import { AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Attribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core'; import {Course} from '../../model/course'; import {CoursesService} from '../courses.service'; @Component({ selector: 'course-card', templateUrl: './course-card.component.html', styleUrls: ['./course-card.component.css'], imports: [] }) export class CourseCardComponent implements OnInit { @Input() course: Course; @Input() cardIndex: number; @Output('courseChanged') courseEmitter = new EventEmitter(); constructor(private coursesService: CoursesService, @Attribute('type') private type: string) { } ngOnInit() { } onTitleChanged(newTitle: string) { this.course.description = newTitle; } onSaveClicked(description: string) { this.courseEmitter.emit({...this.course, description}); } } ================================================ FILE: src/app/courses/course-image/course-image.component.css ================================================ ================================================ FILE: src/app/courses/course-image/course-image.component.html ================================================
Angular Logo
================================================ FILE: src/app/courses/course-image/course-image.component.spec.ts ================================================ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { CourseImageComponent } from './course-image.component'; describe('CourseImageComponent', () => { let component: CourseImageComponent; let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [ CourseImageComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(CourseImageComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); }); ================================================ FILE: src/app/courses/course-image/course-image.component.ts ================================================ import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'course-image', templateUrl: './course-image.component.html', styleUrls: ['./course-image.component.css'], standalone: true }) export class CourseImageComponent implements OnInit { @Input('src') imageUrl:string; constructor() { } ngOnInit() { } } ================================================ FILE: src/app/courses/courses.module.spec.ts ================================================ import { CoursesModule } from './courses.module'; describe('CoursesModule', () => { let coursesModule: CoursesModule; beforeEach(() => { coursesModule = new CoursesModule(); }); it('should create an instance', () => { expect(coursesModule).toBeTruthy(); }); }); ================================================ FILE: src/app/courses/courses.service.ts ================================================ import { Injectable } from '@angular/core'; import {Observable} from 'rxjs'; import {Course} from '../model/course'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; let counter = 0; @Injectable({ providedIn: 'root' }) export class CoursesService { id:number; constructor(private http: HttpClient) { counter++; this.id = counter; } loadCourses(): Observable { const params = new HttpParams() .set("page", "1") .set("pageSize", "10"); return this.http.get('/api/courses', {params}); } saveCourse(course:Course) { const headers = new HttpHeaders() .set("X-Auth", "userId"); return this.http.put(`/api/courses/${course.id}`, course,{headers}); } } ================================================ FILE: src/app/courses/directives/highlighted.directive.spec.ts ================================================ import { HighlightedDirective } from './highlighted.directive'; describe('HighlightedDirective', () => { it('should create an instance', () => { const directive = new HighlightedDirective(); expect(directive).toBeTruthy(); }); }); ================================================ FILE: src/app/courses/directives/highlighted.directive.ts ================================================ import {Directive, EventEmitter, Host, HostBinding, HostListener, Input, Output} from '@angular/core'; import {CoursesService} from '../courses.service'; @Directive({ selector: '[highlighted]', exportAs: 'hl', standalone: true }) export class HighlightedDirective { @Input('highlighted') isHighlighted = false; @Output() toggleHighlight = new EventEmitter(); constructor(private coursesService: CoursesService) { console.log('coursesService highlighted ' + coursesService.id); } @HostBinding('class.highlighted') get cssClasses() { return this.isHighlighted; } @HostListener('mouseover', ['$event']) mouseOver($event) { console.log($event); this.isHighlighted = true; this.toggleHighlight.emit(this.isHighlighted); } @HostListener('mouseleave') mouseLeave() { this.isHighlighted = false; this.toggleHighlight.emit(this.isHighlighted); } toggle() { this.isHighlighted = !this.isHighlighted; this.toggleHighlight.emit(this.isHighlighted); } } ================================================ FILE: src/app/courses/directives/ngx-unless.directive.spec.ts ================================================ import { NgxUnlessDirective } from './ngx-unless.directive'; describe('NgxUnlessDirective', () => { it('should create an instance', () => { const directive = new NgxUnlessDirective(); expect(directive).toBeTruthy(); }); }); ================================================ FILE: src/app/courses/directives/ngx-unless.directive.ts ================================================ import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core'; @Directive({ selector: '[ngxUnless]', standalone: true }) export class NgxUnlessDirective { visible = false; constructor(private templateRef: TemplateRef, private viewContainer: ViewContainerRef) { } @Input() set ngxUnless(condition:boolean) { if (!condition && !this.visible) { this.viewContainer.createEmbeddedView(this.templateRef); this.visible = true; } else if (condition && this.visible) { this.viewContainer.clear(); this.visible = false; } } } ================================================ FILE: src/app/courses/filter-by-category.pipe.ts ================================================ import {Pipe, PipeTransform} from '@angular/core'; import {Course} from '../model/course'; @Pipe({ name: 'filterByCategory', standalone: true }) export class FilterByCategoryPipe implements PipeTransform { transform(courses: Course[], category:string) { console.log('Called transform()'); return courses.filter(course => course.category === category); } } ================================================ FILE: src/app/model/course.ts ================================================ export interface Course { id:number; description:string; iconUrl: string; longDescription: string; category:string; lessonsCount:number; } ================================================ FILE: src/assets/.gitkeep ================================================ ================================================ FILE: src/assets/styles.css ================================================ .course-card img { border-radius: 4px; margin-top: 10px; } button { margin-top: 20px; height: 40px; font-size: 20px; background: #1a7ce7; color: white; border-radius: 4px; } .course-category { margin-top: 15px; } .category { margin-top: 15px; background: lightcyan; font-size: 14px; color: grey; border: 1px solid grey; border-radius: 4px; padding: 2px 3px; display: inline; } .demo { max-width: 300px; margin: 20px auto; font-size: 25px; } .warn { color:red; } .highlighted { box-shadow: 0 2px 16px 0 #de1e19, 0 3px 8px 0 rgba(226, 21, 19, 0.47), 0 6px 8px -1px #b41c18; } ================================================ FILE: src/db-data.ts ================================================ export const COURSES: any = [ { id: 1, description: "Angular Core Deep Dive", iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png', longDescription: "A detailed walk-through of the most important part of Angular - the Core and Common modules", lessonsCount: 10, category: 'INTERMEDIATE' }, { id: 2, description: "RxJs In Practice Course", iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png', longDescription: "Understand the RxJs Observable pattern, learn the RxJs Operators via practical examples", category: 'BEGINNER', lessonsCount: 10 }, { id: 3, description: 'NgRx In Depth', longDescription: "Learn the modern Ngrx Ecosystem, including Store, Effects, Router Store, Ngrx Entity, Dev Tools and Schematics.", iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-ngrx-course.png', category: 'ADVANCED' }, { id: 4, description: "Angular for Beginners", iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/angular2-for-beginners-small-v2.png', longDescription: "Establish a solid layer of fundamentals, learn what's under the hood of Angular", category: 'BEGINNER', lessonsCount: 10 }, { id: 5, description: 'Angular Security Course', longDescription: "Learn Web Security Fundamentals and apply them to defend an Angular / Node Application from multiple types of attacks.", iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png', category: 'ADVANCED', lessonsCount: 11 }, { id: 6, description: 'Angular PWA Course', longDescription: "Learn Angular Progressive Web Applications, build the future of the Web Today.", iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png', category: 'ADVANCED', lessonsCount: 8 }, { id: 7, description: 'Angular Advanced Course', longDescription: "Learn Advanced Angular functionality typically used in Library Development. Advanced Components, Directives, Testing, Npm", iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png', category: 'ADVANCED' }, { id: 8, description: 'Complete Typescript Course', longDescription: "Complete Guide to Typescript From Scratch: Learn the language in-depth and use it to build a Node REST API.", iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png', category: 'BEGINNER' }, { id: 9, description: 'Angular Architecture Course', longDescription: "Learn the core RxJs Observable Pattern as well and many other Design Patterns for building Reactive Angular Applications.", iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png', category: 'BEGINNER' }, { id: 10, description: "Angular Material Course", iconUrl: "https://s3-us-west-1.amazonaws.com/angular-university/course-images/material_design.png", longDescription: "Build Applications with the official Angular Widget Library", category: 'ADVANCED' } ]; export function findCourseById(courseId:number) { return COURSES.find(course => course.id == courseId); } ================================================ FILE: src/environments/environment.prod.ts ================================================ export const environment = { production: true }; ================================================ FILE: src/environments/environment.ts ================================================ // This file can be replaced during build by using the `fileReplacements` array. // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. // The list of file replacements can be found in `angular.json`. export const environment = { production: false }; /* * In development mode, for easier debugging, you can ignore zone related error * stack frames such as `zone.run`/`zoneDelegate.invokeTask` by importing the * below file. Don't forget to comment it out in production mode * because it will have a performance impact when errors are thrown */ // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. ================================================ FILE: src/index.html ================================================ Angular Core Deep Dive ================================================ FILE: src/karma.conf.js ================================================ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular-devkit/build-angular/plugins/karma') ], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { dir: require('path').join(__dirname, '../coverage'), reports: ['html', 'lcovonly'], fixWebpackSourcePaths: true }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); }; ================================================ FILE: src/locale/messages.fr.xlf ================================================ {VAR_SELECT, select, BEGINNER {Beginner} INTERMEDIATE {Intermediate} ADVANCED {Advanced} } {VAR_SELECT, select, BEGINNER {Débutant} INTERMEDIATE {Intermediare} ADVANCED {Avancé} } app/courses/course-card/course-card.component.html 21 Edit Course Modifier des Cours app/app.component.html 13 {VAR_PLURAL, plural, =0 {No courses available.} =1 {One course is available.} other {A total of courses are available.} } {VAR_PLURAL, plural, =0 {Pas des cours disponible.} =1 {Un cours disponible.} other {Il y a cours disponible.} } app/app.component.html 16 Welcome to the Angular Core Deep Dive Course Bienvenue au Cours Angular en Détail. app/app.component.html 24 Greet the user a greeting at the beginning of the course. welcome message. ================================================ FILE: src/main.ts ================================================ import {enableProdMode, importProvidersFrom, provideZoneChangeDetection} from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { environment } from './environments/environment'; import {bootstrapApplication, BrowserModule} from '@angular/platform-browser'; import {AppComponent} from './app/app.component'; import {provideAnimations} from '@angular/platform-browser/animations'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; if (environment.production) { enableProdMode(); } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection(),importProvidersFrom(BrowserModule), provideAnimations(), provideHttpClient(withInterceptorsFromDi()) ], }) .catch(err => console.log(err)); ================================================ FILE: src/messages.xlf ================================================ app/courses/course-card/course-card.component.html 19 {VAR_SELECT, select, BEGINNER {Beginner} INTERMEDIATE {Intermediate} ADVANCED {Advanced} } app/courses/course-card/course-card.component.html 21 Edit Course app/app.component.html 13 {VAR_PLURAL, plural, =0 {No courses available.} =1 {One course is available.} other {A total of courses are available.} } app/app.component.html 16 Welcome to the Angular Core Deep Dive Course app/app.component.html 24 Greet the user a greeting at the beginning of the course. welcome message. ================================================ FILE: src/polyfills.ts ================================================ /*************************************************************************************************** * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates. */ import '@angular/localize/init'; /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; // import 'core-js/es6/parse-int'; // import 'core-js/es6/parse-float'; // import 'core-js/es6/number'; // import 'core-js/es6/math'; // import 'core-js/es6/string'; // import 'core-js/es6/date'; // import 'core-js/es6/array'; // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/weak-map'; // import 'core-js/es6/set'; /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. /** * By default, zone.js will patch all possible macroTask and DomEvents * user can disable parts of macroTask/DomEvents patch by setting following flags */ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames /* * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js * with the following flag, it will bypass `zone.js` patch for IE/Edge */ // (window as any).__Zone_enable_cross_context_check = true; /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import 'zone.js'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ ================================================ FILE: src/styles.css ================================================ /* You can add global styles to this file, and also import other style files */ html, body { height: 100%; } body { margin: 0; font-family: 'Roboto', sans-serif; } ================================================ FILE: src/test.ts ================================================ // This file is required by karma.conf.js and loads recursively all the .spec and framework files import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { teardown: { destroyAfterEach: false } } ); ================================================ FILE: src/tsconfig.app.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [] }, "files": [ "main.ts", "polyfills.ts" ], "include": [ "src/**/*.d.ts" ] } ================================================ FILE: src/tsconfig.spec.json ================================================ { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", "types": [ "jasmine", "node" ] }, "files": [ "test.ts", "polyfills.ts" ], "include": [ "**/*.spec.ts", "**/*.d.ts" ] } ================================================ FILE: src/tslint.json ================================================ { "extends": "../tslint.json", "rules": { "directive-selector": [ true, "attribute", "app", "camelCase" ], "component-selector": [ true, "element", "app", "kebab-case" ] } } ================================================ FILE: tsconfig.json ================================================ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "esModuleInterop": true, "sourceMap": true, "declaration": false, "module": "esnext", "moduleResolution": "bundler", "experimentalDecorators": true, "target": "ES2022", "typeRoots": [ "node_modules/@types" ], "useDefineForClassFields": false } } ================================================ FILE: tslint.json ================================================ { "rulesDirectory": [ "node_modules/codelyzer" ], "rules": { "arrow-return-shorthand": true, "callable-types": true, "class-name": true, "comment-format": [ true, "check-space" ], "curly": true, "deprecation": { "severity": "warn" }, "eofline": true, "forin": true, "import-blacklist": [ true, "rxjs/Rx" ], "import-spacing": true, "indent": [ true, "spaces" ], "interface-over-type-literal": true, "label-position": true, "max-line-length": [ true, 140 ], "member-access": false, "member-ordering": [ true, { "order": [ "static-field", "instance-field", "static-method", "instance-method" ] } ], "no-arg": true, "no-bitwise": true, "no-console": [ true, "debug", "info", "time", "timeEnd", "trace" ], "no-construct": true, "no-debugger": true, "no-duplicate-super": true, "no-empty": false, "no-empty-interface": true, "no-eval": true, "no-inferrable-types": [ true, "ignore-params" ], "no-misused-new": true, "no-non-null-assertion": true, "no-shadowed-variable": true, "no-string-literal": false, "no-string-throw": true, "no-switch-case-fall-through": true, "no-trailing-whitespace": true, "no-unnecessary-initializer": true, "no-unused-expression": true, "no-var-keyword": true, "object-literal-sort-keys": false, "one-line": [ true, "check-open-brace", "check-catch", "check-else", "check-whitespace" ], "prefer-const": true, "quotemark": [ true, "single" ], "radix": true, "semicolon": [ true, "always" ], "triple-equals": [ true, "allow-null-check" ], "typedef-whitespace": [ true, { "call-signature": "nospace", "index-signature": "nospace", "parameter": "nospace", "property-declaration": "nospace", "variable-declaration": "nospace" } ], "unified-signatures": true, "variable-name": false, "whitespace": [ true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type" ], "no-output-on-prefix": true, "no-inputs-metadata-property": true, "no-outputs-metadata-property": true, "no-host-metadata-property": true, "no-input-rename": true, "no-output-rename": true, "use-lifecycle-interface": true, "use-pipe-transform-interface": true, "component-class-suffix": true, "directive-class-suffix": true } }