From 3f51fd69454346d1e42f07ffca0c7a5f43f9b4e9 Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:15:05 +0300 Subject: [PATCH 01/21] Wraapping up OOP basics in TS, :zap: --- classes.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 classes.js diff --git a/classes.js b/classes.js new file mode 100644 index 0000000..fb2ef6b --- /dev/null +++ b/classes.js @@ -0,0 +1,6 @@ +"use strict"; + +exports.__esModule = true; +var point_module_1 = require("./point_module"); +var newPoint = new point_module_1.NewPoint(68, 12.7); +newPoint.draw(); From df1c84e374148897cf1ae3c2479794782ba244ee Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:15:15 +0300 Subject: [PATCH 02/21] Wraapping up OOP basics in TS, :zap: --- classes.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 classes.ts diff --git a/classes.ts b/classes.ts new file mode 100644 index 0000000..42956f7 --- /dev/null +++ b/classes.ts @@ -0,0 +1,4 @@ +import { NewPoint } from './point_module' + +let newPoint = new NewPoint(68, 12.7); +newPoint.draw(); \ No newline at end of file From 40089b16a753a3f53ecc904359c761304ab781ca Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:19:59 +0300 Subject: [PATCH 03/21] Wraapping up OOP basics in TS, :zap: --- point_module.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 point_module.js diff --git a/point_module.js b/point_module.js new file mode 100644 index 0000000..04554f3 --- /dev/null +++ b/point_module.js @@ -0,0 +1,14 @@ +"use strict"; +exports.__esModule = true; +exports.NewPoint = void 0; +var NewPoint = /** @class */ (function () { + function NewPoint(_x, _y) { + this._x = _x; + this._y = _y; + } + NewPoint.prototype.draw = function () { + console.log('X: ' + (this === null || this === void 0 ? void 0 : this._x) + " and Y: " + (this === null || this === void 0 ? void 0 : this._y)); + }; + return NewPoint; +}()); +exports.NewPoint = NewPoint; From 014798701a941266f4e7b248eeebe7d7240a66ca Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:20:08 +0300 Subject: [PATCH 04/21] Wraapping up OOP basics in TS, :zap: --- point_module.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 point_module.ts diff --git a/point_module.ts b/point_module.ts new file mode 100644 index 0000000..6b74f6e --- /dev/null +++ b/point_module.ts @@ -0,0 +1,7 @@ +export class NewPoint { + constructor(private _x?: number, private _y?: number) { + } + draw() { + console.log('X: ' + this?._x + " and Y: " + this?._y); + } +} \ No newline at end of file From b831817901c567a9f2a91c2a156a4bd48e80f5e1 Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:21:52 +0300 Subject: [PATCH 05/21] Getting started :tada: with components & services, :zap: --- src/app/auth/auth.component.css | 0 src/app/auth/auth.component.html | 1 + src/app/auth/auth.component.spec.ts | 25 +++++++++++++++++++++++++ src/app/auth/auth.component.ts | 15 +++++++++++++++ 4 files changed, 41 insertions(+) create mode 100644 src/app/auth/auth.component.css create mode 100644 src/app/auth/auth.component.html create mode 100644 src/app/auth/auth.component.spec.ts create mode 100644 src/app/auth/auth.component.ts diff --git a/src/app/auth/auth.component.css b/src/app/auth/auth.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html new file mode 100644 index 0000000..f66eb69 --- /dev/null +++ b/src/app/auth/auth.component.html @@ -0,0 +1 @@ +

auth works!

diff --git a/src/app/auth/auth.component.spec.ts b/src/app/auth/auth.component.spec.ts new file mode 100644 index 0000000..2e9ddd9 --- /dev/null +++ b/src/app/auth/auth.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AuthComponent } from './auth.component'; + +describe('AuthComponent', () => { + let component: AuthComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AuthComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AuthComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/auth/auth.component.ts b/src/app/auth/auth.component.ts new file mode 100644 index 0000000..3eb7b8d --- /dev/null +++ b/src/app/auth/auth.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-auth', + templateUrl: './auth.component.html', + styleUrls: ['./auth.component.css'] +}) +export class AuthComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} From af834b02c1c1ef578361875f98ac9f1f0fd7519d Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:22:38 +0300 Subject: [PATCH 06/21] Getting started :tada: with components & services, :zap: --- src/app/courses.component.ts | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 src/app/courses.component.ts diff --git a/src/app/courses.component.ts b/src/app/courses.component.ts new file mode 100644 index 0000000..186b991 --- /dev/null +++ b/src/app/courses.component.ts @@ -0,0 +1,26 @@ +import { Component } from "@angular/core"; +import { CoursesService } from "./courses.service"; + +@Component({ + selector: 'courses', //
"#courses" + template: `

{{ "Courses: " + getTitle() }}

+
    +
  • + {{ course }} +
    • +
+ ` +}) + +export class CoursesComponent { + title = "List of courses"; + getTitle(){ + return this.title; + } + courses: any; + + // Initialize the courses service + constructor(service: CoursesService){ + this.courses = service.getAuthors(); + } +} \ No newline at end of file From 3bbf89fa6a364846c775238f29e4aeead87770fe Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:22:58 +0300 Subject: [PATCH 07/21] Getting started :tada: with components & services, :zap: --- src/app/courses.service.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/app/courses.service.ts diff --git a/src/app/courses.service.ts b/src/app/courses.service.ts new file mode 100644 index 0000000..541a6cc --- /dev/null +++ b/src/app/courses.service.ts @@ -0,0 +1,8 @@ +export class CoursesService { + getCourses(){ + return ["Course 1", "Course 2", "Course 3"]; + } + getAuthors(){ + return ["Author 1", "Author 2", "Author 3"]; + } +} \ No newline at end of file From 112e1b8e4f411f467b967dc5da37334ace783f54 Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:23:31 +0300 Subject: [PATCH 08/21] Getting started :tada: with components & services, :zap: --- src/auth.service.spec.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/auth.service.spec.ts diff --git a/src/auth.service.spec.ts b/src/auth.service.spec.ts new file mode 100644 index 0000000..f1251ca --- /dev/null +++ b/src/auth.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { AuthService } from './auth.service'; + +describe('AuthService', () => { + let service: AuthService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(AuthService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); From d5246b4419c135df34f604f72c156c0520b1a463 Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:23:40 +0300 Subject: [PATCH 09/21] Getting started :tada: with components & services, :zap: --- src/auth.service.ts | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/auth.service.ts diff --git a/src/auth.service.ts b/src/auth.service.ts new file mode 100644 index 0000000..af27fde --- /dev/null +++ b/src/auth.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class AuthService { + + constructor() { } +} From 8fc46264ab4cc054b25fdf7351be9d9d17de5dda Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:24:55 +0300 Subject: [PATCH 10/21] Getting started(even though badi sielewi) :tada: with components & services, :zap: --- src/test.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/test.ts b/src/test.ts index c04c876..2042356 100644 --- a/src/test.ts +++ b/src/test.ts @@ -9,18 +9,17 @@ import { declare const require: { context(path: string, deep?: boolean, filter?: RegExp): { - (id: string): T; keys(): string[]; + (id: string): T; }; }; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, - platformBrowserDynamicTesting(), + platformBrowserDynamicTesting() ); - // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); // And load the modules. -context.keys().forEach(context); +context.keys().map(context); From 2a3933f4f5fbc538298d67843317e70eb9ba8274 Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:26:08 +0300 Subject: [PATCH 11/21] Getting started :tada: with components & services, :zap: :fire: --- angular.json | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/angular.json b/angular.json index 0361a17..fb6db21 100644 --- a/angular.json +++ b/angular.json @@ -3,9 +3,13 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "angubasics": { + "ng-test": { "projectType": "application", - "schematics": {}, + "schematics": { + "@schematics/angular:application": { + "strict": true + } + }, "root": "", "sourceRoot": "src", "prefix": "app", @@ -13,7 +17,7 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist/angubasics", + "outputPath": "dist/ng-test", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", @@ -64,10 +68,10 @@ "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { - "browserTarget": "angubasics:build:production" + "browserTarget": "ng-test:build:production" }, "development": { - "browserTarget": "angubasics:build:development" + "browserTarget": "ng-test:build:development" } }, "defaultConfiguration": "development" @@ -75,7 +79,7 @@ "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "angubasics:build" + "browserTarget": "ng-test:build" } }, "test": { @@ -97,5 +101,6 @@ } } } - } + }, + "defaultProject": "ng-test" } From 37411593fe5a976f281b462f59277f2312d9127d Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:29:26 +0300 Subject: [PATCH 12/21] Getting started :tada: with components & services, :zap: :fire:, browser compatibility --- src/polyfills.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/polyfills.ts b/src/polyfills.ts index 429bb9e..373f538 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -8,8 +8,8 @@ * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that - * automatically update themselves. This includes recent versions of Safari, Chrome (including - * Opera), Edge on the desktop, and iOS and Chrome on mobile. + * 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/guide/browser-support */ @@ -18,6 +18,18 @@ * BROWSER POLYFILLS */ +/** + * IE11 requires the following for NgClass support on SVG elements + */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). + */ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + /** * By default, zone.js will patch all possible macroTask and DomEvents * user can disable parts of macroTask/DomEvents patch by setting following flags From edc56f80d9c7fd8e08fa83f455f36a0075766b6f Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:30:32 +0300 Subject: [PATCH 13/21] Getting started :tada: with components & services, :zap: :fire:, browser compatibility --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index fe7f0a2..17ead94 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - Angubasics + Angu Basics From 5ce9d92318ca38e0b5a643adb77dca712b2f1bf1 Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:31:30 +0300 Subject: [PATCH 14/21] Getting started :tada: with components & services, :zap: :fire:, browser compatibility --- tsconfig.json | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 9505416..6df8283 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,8 +6,6 @@ "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, @@ -16,10 +14,10 @@ "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, - "target": "es2020", + "target": "es2017", "module": "es2020", "lib": [ - "es2020", + "es2018", "dom" ] }, @@ -27,7 +25,6 @@ "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, - "strictTemplates": true, - "strictPropertyInitialization": false // Supress undefined. + "strictTemplates": true } } From 35b60b6b9cb86feab1a8eb486b689bd768fd5d51 Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:33:25 +0300 Subject: [PATCH 15/21] Getting started :tada: with components & services, :zap: :fire: --- src/app/app.module.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b1c6c96..df0dedd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,18 +1,24 @@ +import { CoursesService } from './courses.service'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { CoursesComponent } from './courses.component'; -@NgModule({ - declarations: [ - AppComponent +@NgModule({ //Decorator to convert plain TS into a Module + declarations: [ // Add all components that are part of this module. + AppComponent, + CoursesComponent, + // AuthComponent, ], imports: [ BrowserModule, AppRoutingModule ], - providers: [], + providers: [ // Register all dependices that all components in this module are dependent on here + CoursesService + ], bootstrap: [AppComponent] }) export class AppModule { } From dba8d1ec83a52b9972a998757e8e70810ff25aca Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:34:23 +0300 Subject: [PATCH 16/21] Getting started :tada: with components & services, :zap: :fire: --- src/app/app.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 226b1de..edbd863 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,5 +6,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'angubasics'; + title = 'angu-basics'; } From d61bda9a0146998b08de1431c2c161581ce943e7 Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:35:30 +0300 Subject: [PATCH 17/21] Getting started :tada: with components & services, :zap: :fire: --- src/app/app.component.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index b68140b..9a4d1a7 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -20,16 +20,16 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'angubasics'`, () => { + it(`should have as title 'angu-basics'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; - expect(app.title).toEqual('angubasics'); + expect(app.title).toEqual('angu-basics'); }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('angubasics app is running!'); + expect(compiled.querySelector('.content span')?.textContent).toContain('ng-test app is running!'); }); }); From a01d9c7f68fffcd08f4b0b3366bdc70ff762d727 Mon Sep 17 00:00:00 2001 From: okomojacob Date: Sat, 5 Nov 2022 15:36:15 +0300 Subject: [PATCH 18/21] Getting started :tada: with templates :books:, :zap: :fire: --- src/app/app.component.html | 285 ++++++++++++++----------------------- 1 file changed, 108 insertions(+), 177 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 2a0fbf1..675ae30 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,12 +1,3 @@ - - - - - - - - -