├── Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── admin │ │ │ ├── admin.component.html │ │ │ └── admin.component.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── auth │ │ │ ├── auth-interceptor.ts │ │ │ ├── auth.service.ts │ │ │ ├── jwt-response.ts │ │ │ ├── login-info.ts │ │ │ ├── signup-info.ts │ │ │ └── token-storage.service.ts │ │ ├── home │ │ │ ├── home.component.html │ │ │ └── home.component.ts │ │ ├── login │ │ │ ├── login.component.html │ │ │ └── login.component.ts │ │ ├── pm │ │ │ ├── pm.component.html │ │ │ └── pm.component.ts │ │ ├── register │ │ │ ├── register.component.html │ │ │ └── register.component.ts │ │ ├── services │ │ │ └── user.service.ts │ │ └── user │ │ │ ├── user.component.html │ │ │ └── user.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular Django Integrating CRUD App - Client Implementation ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── add-customer │ │ │ ├── add-customer.component.html │ │ │ └── add-customer.component.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer.service.ts │ │ ├── customer.ts │ │ ├── list-customers │ │ │ ├── list-customers.component.html │ │ │ └── list-customers.component.ts │ │ ├── message.service.ts │ │ ├── message.ts │ │ └── message │ │ │ ├── message.component.html │ │ │ └── message.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular Nodejs CRUD RestAPIs Application - Frontend Development ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── add-customer │ │ │ ├── add-customer.component.html │ │ │ └── add-customer.component.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer.service.ts │ │ ├── customer.ts │ │ ├── list-customers │ │ │ ├── list-customers.component.html │ │ │ └── list-customers.component.ts │ │ ├── message.service.ts │ │ ├── message.ts │ │ └── message │ │ │ ├── message.component.html │ │ │ └── message.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular Nodejs MySQL Pagination - Client Development ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── angulartable │ │ │ ├── angulartable.component.html │ │ │ └── angulartable.component.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer.service.ts │ │ ├── customer.ts │ │ └── message.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular SpringBoot CRUD RestAPIs Application - Frontend Development ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── add-customer │ │ │ ├── add-customer.component.html │ │ │ └── add-customer.component.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer.service.ts │ │ ├── customer.ts │ │ ├── list-customers │ │ │ ├── list-customers.component.html │ │ │ └── list-customers.component.ts │ │ ├── message.service.ts │ │ ├── message.ts │ │ └── message │ │ │ ├── message.component.html │ │ │ └── message.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── angulartable │ │ │ ├── angulartable.component.html │ │ │ └── angulartable.component.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer.service.ts │ │ ├── customer.ts │ │ └── message.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular-10-Nodejs-MongoDB-CRUD-Example ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── add-customer │ │ │ ├── add-customer.component.html │ │ │ └── add-customer.component.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer.service.ts │ │ ├── customer.ts │ │ ├── list-customers │ │ │ ├── list-customers.component.html │ │ │ └── list-customers.component.ts │ │ ├── message.service.ts │ │ ├── message.ts │ │ └── message │ │ │ ├── message.component.html │ │ │ └── message.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular-10-Nodejs-MongoDB-Pagination-Example ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── angulartable │ │ │ ├── angulartable.component.html │ │ │ └── angulartable.component.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer.service.ts │ │ ├── customer.ts │ │ └── message.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── add-customer │ │ │ ├── add-customer.component.html │ │ │ └── add-customer.component.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer.service.ts │ │ ├── customer.ts │ │ ├── list-customers │ │ │ ├── list-customers.component.html │ │ │ └── list-customers.component.ts │ │ ├── message.service.ts │ │ ├── message.ts │ │ └── message │ │ │ ├── message.component.html │ │ │ └── message.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── add-customer │ │ │ ├── add-customer.component.html │ │ │ └── add-customer.component.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── customer.service.ts │ │ ├── customer.ts │ │ ├── list-customers │ │ │ ├── list-customers.component.html │ │ │ └── list-customers.component.ts │ │ ├── message.service.ts │ │ ├── message.ts │ │ └── message │ │ │ ├── message.component.html │ │ │ └── message.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ├── Angular10 SpringBoot Jwt Authentication - Frontend Development ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── browserslist ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── admin │ │ │ ├── admin.component.css │ │ │ ├── admin.component.html │ │ │ ├── admin.component.spec.ts │ │ │ └── admin.component.ts │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── auth │ │ │ ├── auth-interceptor.ts │ │ │ ├── auth.service.spec.ts │ │ │ ├── auth.service.ts │ │ │ ├── jwt-response.ts │ │ │ ├── login-info.ts │ │ │ ├── signup-info.ts │ │ │ ├── token-storage.service.spec.ts │ │ │ └── token-storage.service.ts │ │ ├── home │ │ │ ├── home.component.css │ │ │ ├── home.component.html │ │ │ ├── home.component.spec.ts │ │ │ └── home.component.ts │ │ ├── login │ │ │ ├── login.component.css │ │ │ ├── login.component.html │ │ │ ├── login.component.spec.ts │ │ │ └── login.component.ts │ │ ├── pm │ │ │ ├── pm.component.css │ │ │ ├── pm.component.html │ │ │ ├── pm.component.spec.ts │ │ │ └── pm.component.ts │ │ ├── register │ │ │ ├── register.component.css │ │ │ ├── register.component.html │ │ │ ├── register.component.spec.ts │ │ │ └── register.component.ts │ │ ├── services │ │ │ ├── user.service.spec.ts │ │ │ └── user.service.ts │ │ └── user │ │ │ ├── user.component.css │ │ │ ├── user.component.html │ │ │ ├── user.component.spec.ts │ │ │ └── user.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json └── README.md /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/.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 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/README.md: -------------------------------------------------------------------------------- 1 | Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example – Express RestAPIs + JWT + BCryptjs + Sequelize 2 | https://loizenai.com/angular-10-nodejs-jwt-authentication-mysql-examples-tutorials/ 3 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('AngularJwtAuth app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/AngularJwtAuth'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/admin/admin.component.html: -------------------------------------------------------------------------------- 1 |

Content from Server

2 | {{board}} 3 | {{errorMessage}} -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/admin/admin.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-admin', 6 | templateUrl: './admin.component.html' 7 | }) 8 | export class AdminComponent implements OnInit { 9 | board: string; 10 | errorMessage: string; 11 | 12 | constructor(private userService: UserService) { } 13 | 14 | ngOnInit() { 15 | this.userService.getAdminBoard().subscribe( 16 | data => { 17 | this.board = data; 18 | }, 19 | error => { 20 | this.errorMessage = `${error.status}: ${JSON.parse(error.error).message}`; 21 | } 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/app.component.css -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 23 |
24 | 25 |
-------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { TokenStorageService } from './auth/token-storage.service'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent implements OnInit { 10 | roles: string[]; 11 | authority: string; 12 | 13 | constructor(private tokenStorage: TokenStorageService) { } 14 | 15 | ngOnInit() { 16 | if (this.tokenStorage.getToken()) { 17 | this.roles = this.tokenStorage.getAuthorities(); 18 | this.roles.every(role => { 19 | if (role === 'ROLE_ADMIN') { 20 | this.authority = 'admin'; 21 | return false; 22 | } else if (role === 'ROLE_PM') { 23 | this.authority = 'pm'; 24 | return false; 25 | } 26 | this.authority = 'user'; 27 | return true; 28 | }); 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { HttpClientModule } from '@angular/common/http'; 5 | import { FormsModule } from '@angular/forms'; 6 | 7 | import { AppComponent } from './app.component'; 8 | import { LoginComponent } from './login/login.component'; 9 | import { UserComponent } from './user/user.component'; 10 | import { RegisterComponent } from './register/register.component'; 11 | import { HomeComponent } from './home/home.component'; 12 | import { AdminComponent } from './admin/admin.component'; 13 | import { PmComponent } from './pm/pm.component'; 14 | 15 | import { httpInterceptorProviders } from './auth/auth-interceptor'; 16 | 17 | @NgModule({ 18 | declarations: [ 19 | AppComponent, 20 | LoginComponent, 21 | UserComponent, 22 | RegisterComponent, 23 | HomeComponent, 24 | AdminComponent, 25 | PmComponent 26 | ], 27 | imports: [ 28 | BrowserModule, 29 | AppRoutingModule, 30 | FormsModule, 31 | HttpClientModule 32 | ], 33 | providers: [httpInterceptorProviders], 34 | bootstrap: [AppComponent] 35 | }) 36 | export class AppModule { } 37 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/auth/auth-interceptor.ts: -------------------------------------------------------------------------------- 1 | import { HTTP_INTERCEPTORS } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; 4 | 5 | import { TokenStorageService } from './token-storage.service'; 6 | 7 | const TOKEN_HEADER_KEY = 'Authorization'; 8 | 9 | @Injectable() 10 | export class AuthInterceptor implements HttpInterceptor { 11 | 12 | constructor(private token: TokenStorageService) { } 13 | 14 | intercept(req: HttpRequest, next: HttpHandler) { 15 | let authReq = req; 16 | const token = this.token.getToken(); 17 | if (token != null) { 18 | authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) }); 19 | } 20 | return next.handle(authReq); 21 | } 22 | } 23 | 24 | export const httpInterceptorProviders = [ 25 | { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true } 26 | ]; 27 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/auth/auth.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient, HttpHeaders } from '@angular/common/http'; 3 | import { Observable } from 'rxjs'; 4 | 5 | import { JwtResponse } from './jwt-response'; 6 | import { AuthLoginInfo } from './login-info'; 7 | import { SignUpInfo } from './signup-info'; 8 | 9 | const httpOptions = { 10 | headers: new HttpHeaders({ 'Content-Type': 'application/json' }) 11 | }; 12 | 13 | @Injectable({ 14 | providedIn: 'root' 15 | }) 16 | export class AuthService { 17 | 18 | private loginUrl = 'http://localhost:8080/api/auth/signin'; 19 | private signupUrl = 'http://localhost:8080/api/auth/signup'; 20 | 21 | constructor(private http: HttpClient) { 22 | } 23 | 24 | attemptAuth(credentials: AuthLoginInfo): Observable { 25 | return this.http.post(this.loginUrl, credentials, httpOptions); 26 | } 27 | 28 | signUp(info: SignUpInfo): Observable { 29 | return this.http.post(this.signupUrl, info, httpOptions); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/auth/jwt-response.ts: -------------------------------------------------------------------------------- 1 | export class JwtResponse { 2 | accessToken: string; 3 | type: string; 4 | username: string; 5 | authorities: string[]; 6 | } 7 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/auth/login-info.ts: -------------------------------------------------------------------------------- 1 | export class AuthLoginInfo { 2 | username: string; 3 | password: string; 4 | 5 | constructor(username: string, password: string) { 6 | this.username = username; 7 | this.password = password; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/auth/signup-info.ts: -------------------------------------------------------------------------------- 1 | export class SignUpInfo { 2 | name: string; 3 | username: string; 4 | email: string; 5 | roles: string[]; 6 | password: string; 7 | 8 | constructor(name: string, username: string, email: string, password: string) { 9 | this.name = name; 10 | this.username = username; 11 | this.email = email; 12 | this.password = password; 13 | this.roles= ['user']; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |
Your Information
3 |

4 | Username: {{info.username}}
5 | Roles: {{info.authorities}}
6 | Token: {{info.token}}. 7 |

8 | 9 |
10 | 11 | 12 | Please login. 13 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | import { TokenStorageService } from '../auth/token-storage.service'; 4 | 5 | @Component({ 6 | selector: 'app-home', 7 | templateUrl: './home.component.html' 8 | }) 9 | export class HomeComponent implements OnInit { 10 | info: any; 11 | 12 | constructor(private token: TokenStorageService) { } 13 | 14 | ngOnInit() { 15 | this.info = { 16 | token: this.token.getToken(), 17 | username: this.token.getUsername(), 18 | authorities: this.token.getAuthorities() 19 | }; 20 | } 21 | 22 | logout() { 23 | this.token.signOut(); 24 | window.location.reload(); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/pm/pm.component.html: -------------------------------------------------------------------------------- 1 |

Content from Server

2 | {{board}} 3 | {{errorMessage}} -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/pm/pm.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-pm', 6 | templateUrl: './pm.component.html' 7 | }) 8 | export class PmComponent implements OnInit { 9 | board: string; 10 | errorMessage: string; 11 | 12 | constructor(private userService: UserService) { } 13 | 14 | ngOnInit() { 15 | this.userService.getPMBoard().subscribe( 16 | data => { 17 | this.board = data; 18 | }, 19 | error => { 20 | this.errorMessage = `${error.status}: ${JSON.parse(error.error).message}`; 21 | } 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/register/register.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | import { AuthService } from '../auth/auth.service'; 4 | import { SignUpInfo } from '../auth/signup-info'; 5 | 6 | @Component({ 7 | selector: 'app-register', 8 | templateUrl: './register.component.html' 9 | }) 10 | export class RegisterComponent implements OnInit { 11 | form: any = {}; 12 | signupInfo: SignUpInfo; 13 | isSignedUp = false; 14 | isSignUpFailed = false; 15 | errorMessage = ''; 16 | 17 | constructor(private authService: AuthService) { } 18 | 19 | ngOnInit() { } 20 | 21 | onSubmit() { 22 | console.log(this.form); 23 | 24 | this.signupInfo = new SignUpInfo( 25 | this.form.name, 26 | this.form.username, 27 | this.form.email, 28 | this.form.password); 29 | 30 | this.authService.signUp(this.signupInfo).subscribe( 31 | data => { 32 | console.log(data); 33 | this.isSignedUp = true; 34 | this.isSignUpFailed = false; 35 | }, 36 | error => { 37 | console.log(error); 38 | this.errorMessage = error.error.message; 39 | this.isSignUpFailed = true; 40 | } 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/services/user.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class UserService { 9 | 10 | private userUrl = 'http://localhost:8080/api/test/user'; 11 | private pmUrl = 'http://localhost:8080/api/test/pm'; 12 | private adminUrl = 'http://localhost:8080/api/test/admin'; 13 | 14 | constructor(private http: HttpClient) { } 15 | 16 | getUserBoard(): Observable { 17 | return this.http.get(this.userUrl, { responseType: 'text' }); 18 | } 19 | 20 | getPMBoard(): Observable { 21 | return this.http.get(this.pmUrl, { responseType: 'text' }); 22 | } 23 | 24 | getAdminBoard(): Observable { 25 | return this.http.get(this.adminUrl, { responseType: 'text' }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/user/user.component.html: -------------------------------------------------------------------------------- 1 |

Content from Server

2 | {{board}} 3 | {{errorMessage}} -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/app/user/user.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-user', 6 | templateUrl: './user.component.html' 7 | }) 8 | export class UserComponent implements OnInit { 9 | board: string; 10 | errorMessage: string; 11 | 12 | constructor(private userService: UserService) { } 13 | 14 | ngOnInit() { 15 | this.userService.getUserBoard().subscribe( 16 | data => { 17 | this.board = data; 18 | }, 19 | error => { 20 | this.errorMessage = `${error.status}: ${JSON.parse(error.error).message}`; 21 | } 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/favicon.ico -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AngularJwtAuth 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular 10 Nodejs JWT Token Based Authentication Example - Angular Frontend Development/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/.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 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('angular-httpclient app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-httpclient'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 4 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: AddCustomerComponent 10 | }, 11 | { 12 | path: 'customers', 13 | component: ListCustomersComponent 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [RouterModule.forRoot(routes)], 19 | exports: [RouterModule] 20 | }) 21 | export class AppRoutingModule { } -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent { 8 | title = 'angular-httpclient'; 9 | } 10 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { AppComponent } from './app.component'; 8 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 9 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 10 | 11 | import { HttpClientModule } from '@angular/common/http'; 12 | import { MessageComponent } from './message/message.component'; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent, 17 | AddCustomerComponent, 18 | ListCustomersComponent, 19 | MessageComponent 20 | ], 21 | imports: [ 22 | BrowserModule, 23 | AppRoutingModule, 24 | FormsModule, 25 | HttpClientModule 26 | ], 27 | providers: [], 28 | bootstrap: [AppComponent] 29 | }) 30 | export class AppModule { } -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/app/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | id: number; 3 | firstname: string; 4 | lastname: string; 5 | age: number; 6 | address: string; 7 | copyrightby: string; 8 | } -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/app/message.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class MessageService { 7 | messages: string[] = []; 8 | 9 | add(message: string) { 10 | this.messages.push(message); 11 | } 12 | 13 | clear(){ 14 | this.messages = []; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/app/message.ts: -------------------------------------------------------------------------------- 1 | import { Customer } from './customer'; 2 | 3 | export class Message { 4 | message: string; 5 | error: string; 6 | customers: Customer[]; 7 | } -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/app/message/message.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Messages

3 | 4 |
5 |
    6 |
  1. 7 |
    8 |
    9 |
    2. 10 |
11 |
-------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/app/message/message.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MessageService } from '../message.service'; 3 | 4 | @Component({ 5 | selector: 'app-message', 6 | templateUrl: './message.component.html' 7 | }) 8 | export class MessageComponent { 9 | constructor(public messageService: MessageService) {} 10 | } -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular Django Integrating CRUD App - Client Implementation/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular Django Integrating CRUD App - Client Implementation/src/favicon.ico -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular Django Integrating CRUD App - Client Implementation/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/.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 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/README.md: -------------------------------------------------------------------------------- 1 | Angular CRUD Application with SpringBoot and MySQL/PostgreSQL RestAPIs – Fullstack Angular 10-9-8 HttpClient Post/Get/Put/Delete 2 | *** 3 | https://loizenai.com/angular-crud-application-with-springboot-and-mysql-postgresql-restapis-fullstack-angular-httpclient-post-get-put-delete/ 4 | 5 | In the tutorial, I introduce how to create an Angular CRUD application to POST/GET/PUT/DELETE requests to SpringBoot RestAPIs application with MySQL/PostgreSQL database. 6 | 7 | Related post: 8 | 1. Spring Boot Security JWT Authentication Example – MySQL/PostgreSQL + Spring JPA + RestAPIs 9 | https://loizenai.com/spring-boot-security-jwt-authentication-example-mysql-postgresql-spring-jpa-restapis/ 10 | 11 | 2. Angular Spring Boot JWT Authentication Example – Angular 6, 8, 9 + Spring Security + MySQL/PostgreSQL 12 | https://loizenai.com/angular-spring-boot-jwt-authentication-example-angular-6-8-9-spring-security-mysql-postgresql/ 13 | 14 | 3. Angular Django CRUD RestAPIs Application Examples – Fullstack Angular 10 + Django + MySQL/PostgreSQL Tutorial 15 | https://loizenai.com/angular-django-crud-restapis-application-examples-fullstack-angular-10-django-mysql-postgresql/ 16 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('angular-httpclient app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-httpclient'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 4 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: AddCustomerComponent 10 | }, 11 | { 12 | path: 'customers', 13 | component: ListCustomersComponent 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [RouterModule.forRoot(routes)], 19 | exports: [RouterModule] 20 | }) 21 | export class AppRoutingModule { } -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent { 8 | title = 'angular-httpclient'; 9 | } 10 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { AppComponent } from './app.component'; 8 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 9 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 10 | 11 | import { HttpClientModule } from '@angular/common/http'; 12 | import { MessageComponent } from './message/message.component'; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent, 17 | AddCustomerComponent, 18 | ListCustomersComponent, 19 | MessageComponent 20 | ], 21 | imports: [ 22 | BrowserModule, 23 | AppRoutingModule, 24 | FormsModule, 25 | HttpClientModule 26 | ], 27 | providers: [], 28 | bootstrap: [AppComponent] 29 | }) 30 | export class AppModule { } -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/app/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | id: number; 3 | firstname: string; 4 | lastname: string; 5 | age: number; 6 | address: string 7 | } 8 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/app/message.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class MessageService { 7 | messages: string[] = []; 8 | 9 | add(message: string) { 10 | this.messages.push(message); 11 | } 12 | 13 | clear(){ 14 | this.messages = []; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/app/message.ts: -------------------------------------------------------------------------------- 1 | import { Customer } from './customer'; 2 | 3 | export class Message { 4 | message: string; 5 | error: string; 6 | customers: Customer[]; 7 | } -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/app/message/message.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Messages

3 | 4 |
5 |
    6 |
  1. 7 |
    8 |
    9 |
    2. 10 |
11 |
-------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/app/message/message.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MessageService } from '../message.service'; 3 | 4 | @Component({ 5 | selector: 'app-message', 6 | templateUrl: './message.component.html' 7 | }) 8 | export class MessageComponent { 9 | constructor(public messageService: MessageService) {} 10 | } -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/favicon.ico -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular Nodejs CRUD RestAPIs Application - Frontend Development/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/.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 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/README.md: -------------------------------------------------------------------------------- 1 | Angular 10 Nodejs Pagination RestAPIs + Filtering Sorting Example – Fullstack: Angular + Nodejs RestAPIs+ MySQL Tutorial 2 | LINK: https://loizenai.com/angular-10-nodejs-mysql-pagination-filtering-sorting-restapis-example/ 3 | 4 | 1. Nodejs JWT Authentication Example – Express RestAPIs + JSON Web Token + BCryptjs + Sequelize + MySQL/PostgreSQL 5 | https://loizenai.com/nodejs-jwt-authentication-example-with-mysql-postgresql-database/ 6 | 7 | 2. Angular & Nodejs JWT Authentication fullstack Example | Angular 6, 7, 8, 9 – Express RestAPIs + JWT + BCryptjs + Sequelize + MySQL/PostgreSQL 8 | https://loizenai.com/angular-nodejs-jwt-authentication-examples-tutorials/ 9 | 10 | 3. Nodejs MySQL Pagination Filtering Sorting Tutorial – Stack: Express RestAPIs + Sequelize ORM + MySQL database Examples 11 | https://loizenai.com/tutorial-nodejs-mysql-pagination-filtering-sorting-express-restapis-sequelize-orm-example/ 12 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('angular-table-paging app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-table-paging'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent{ 8 | 9 | 10 | } -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { HttpClientModule } from '@angular/common/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { AngulartableComponent } from './angulartable/angulartable.component'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | AngulartableComponent 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | HttpClientModule 17 | ], 18 | providers: [], 19 | bootstrap: [AppComponent] 20 | }) 21 | export class AppModule { } 22 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/app/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | id: number; 3 | firstname: string; 4 | lastname: string; 5 | age: number; 6 | salary: number; 7 | address: string; 8 | copyrightBy: string; 9 | } -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/app/message.ts: -------------------------------------------------------------------------------- 1 | import { Customer } from './customer'; 2 | 3 | export class Message { 4 | customers: Customer[]; 5 | totalPages: number; 6 | pageNumber: number; 7 | pageSize: number; 8 | } -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular Nodejs MySQL Pagination - Client Development/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular Nodejs MySQL Pagination - Client Development/src/favicon.ico -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular Nodejs MySQL Pagination - Client Development/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/.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 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/README.md: -------------------------------------------------------------------------------- 1 | Angular CRUD Application with SpringBoot and MySQL/PostgreSQL RestAPIs – Fullstack Angular 10-9-8 HttpClient Post/Get/Put/Delete 2 | *** 3 | https://loizenai.com/angular-crud-application-with-springboot-and-mysql-postgresql-restapis-fullstack-angular-httpclient-post-get-put-delete/ 4 | 5 | In the tutorial, I introduce how to create an Angular CRUD application to POST/GET/PUT/DELETE requests to SpringBoot RestAPIs application with MySQL/PostgreSQL database. 6 | 7 | Related posts: 8 | *** 9 | 1. Spring Boot Security JWT Authentication Example – MySQL/PostgreSQL + Spring JPA + RestAPIs 10 | https://loizenai.com/spring-boot-security-jwt-authentication-example-mysql-postgresql-spring-jpa-restapis/ 11 | 12 | 2. Angular Spring Boot JWT Authentication Example – Angular 6, 8, 9 + Spring Security + MySQL/PostgreSQL 13 | https://loizenai.com/angular-spring-boot-jwt-authentication-example-angular-6-8-9-spring-security-mysql-postgresql/ 14 | 15 | 3. Angular Django CRUD RestAPIs Application Examples – Fullstack Angular 10 + Django + MySQL/PostgreSQL Tutorial 16 | https://loizenai.com/angular-django-crud-restapis-application-examples-fullstack-angular-10-django-mysql-postgresql/ 17 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('angular-httpclient app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-httpclient'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 4 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: AddCustomerComponent 10 | }, 11 | { 12 | path: 'customers', 13 | component: ListCustomersComponent 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [RouterModule.forRoot(routes)], 19 | exports: [RouterModule] 20 | }) 21 | export class AppRoutingModule { } -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent { 8 | title = 'angular-httpclient'; 9 | } 10 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { AppComponent } from './app.component'; 8 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 9 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 10 | 11 | import { HttpClientModule } from '@angular/common/http'; 12 | import { MessageComponent } from './message/message.component'; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent, 17 | AddCustomerComponent, 18 | ListCustomersComponent, 19 | MessageComponent 20 | ], 21 | imports: [ 22 | BrowserModule, 23 | AppRoutingModule, 24 | FormsModule, 25 | HttpClientModule 26 | ], 27 | providers: [], 28 | bootstrap: [AppComponent] 29 | }) 30 | export class AppModule { } -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/app/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | id: number; 3 | firstname: string; 4 | lastname: string; 5 | age: number; 6 | address: string 7 | } 8 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/app/message.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class MessageService { 7 | messages: string[] = []; 8 | 9 | add(message: string) { 10 | this.messages.push(message); 11 | } 12 | 13 | clear(){ 14 | this.messages = []; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/app/message.ts: -------------------------------------------------------------------------------- 1 | import { Customer } from './customer'; 2 | 3 | export class Message { 4 | message: string; 5 | error: string; 6 | customers: Customer[]; 7 | } -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/app/message/message.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Messages

3 | 4 |
5 |
    6 |
  1. 7 |
    8 |
    9 |
    2. 10 |
11 |
-------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/app/message/message.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MessageService } from '../message.service'; 3 | 4 | @Component({ 5 | selector: 'app-message', 6 | templateUrl: './message.component.html' 7 | }) 8 | export class MessageComponent { 9 | constructor(public messageService: MessageService) {} 10 | } -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/favicon.ico -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular SpringBoot CRUD RestAPIs Application - Frontend Development/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/.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 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/README.md: -------------------------------------------------------------------------------- 1 | Client Side Development - Angular Bootstrap Table for Pagination Filtering & Soritng Solution 2 | Tutorials: [Angular SpringBoot] Angular Table Pagination Filtering Sorting with SpringBoot RestAPIs + Bootstrap 3 | -> Link: https://loizenai.com/build-angular-table-pagination-filtering-sorting-with-springboot-restapis-example-tutorial/ 4 | 5 | Related posts: 6 | 7 | 1. Angular Nodejs Fullstack CRUD Application with MySQL/PostgreSQL – Angular 10-9-8 HttpClient + Nodejs Express, Sequelize ORM 8 | https://loizenai.com/angular-nodejs-fullstack-crud-application-with-mysql-postgresql-angular-10-9-8-httpclient-client-nodejs-express-sequelize-orm/ 9 | 10 | 2. Angular Spring Boot JWT Authentication Example – Angular 6, 8, 9 + Spring Security + MySQL/PostgreSQL 11 | https://loizenai.com/angular-spring-boot-jwt-authentication-example-angular-6-8-9-spring-security-mysql-postgresql/ 12 | 13 | 3. Spring Boot Security JWT Authentication Example – MySQL/PostgreSQL + Spring JPA + RestAPIs 14 | https://loizenai.com/spring-boot-security-jwt-authentication-example-mysql-postgresql-spring-jpa-restapis/ 15 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('angular-table-paging app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-table-paging'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent{ 8 | 9 | 10 | } -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { HttpClientModule } from '@angular/common/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { AngulartableComponent } from './angulartable/angulartable.component'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | AngulartableComponent 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | HttpClientModule 17 | ], 18 | providers: [], 19 | bootstrap: [AppComponent] 20 | }) 21 | export class AppModule { } 22 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/app/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | id: number; 3 | firstname: string; 4 | lastname: string; 5 | age: number; 6 | salary: number; 7 | address: string; 8 | copyrightBy: string; 9 | } -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/app/message.ts: -------------------------------------------------------------------------------- 1 | import { Customer } from './customer'; 2 | 3 | export class Message { 4 | customers: Customer[]; 5 | totalPages: number; 6 | pageNumber: number; 7 | pageSize: number; 8 | } -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/favicon.ico -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular SpringBoot Pagination Filtering Sorting - Angular Bootstrap Table Client/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/.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 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/README.md: -------------------------------------------------------------------------------- 1 | # AngularHttpclient 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app 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. Use the `--prod` flag for a production build. 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 [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('angular-httpclient app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-httpclient'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 4 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: AddCustomerComponent 10 | }, 11 | { 12 | path: 'customers', 13 | component: ListCustomersComponent 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [RouterModule.forRoot(routes)], 19 | exports: [RouterModule] 20 | }) 21 | export class AppRoutingModule { } -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent { 8 | title = 'angular-httpclient'; 9 | } 10 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { AppComponent } from './app.component'; 8 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 9 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 10 | 11 | import { HttpClientModule } from '@angular/common/http'; 12 | import { MessageComponent } from './message/message.component'; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent, 17 | AddCustomerComponent, 18 | ListCustomersComponent, 19 | MessageComponent 20 | ], 21 | imports: [ 22 | BrowserModule, 23 | AppRoutingModule, 24 | FormsModule, 25 | HttpClientModule 26 | ], 27 | providers: [], 28 | bootstrap: [AppComponent] 29 | }) 30 | export class AppModule { } -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/app/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | id: number; 3 | firstname: string; 4 | lastname: string; 5 | age: number; 6 | address: string 7 | } 8 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/app/message.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class MessageService { 7 | messages: string[] = []; 8 | 9 | add(message: string) { 10 | this.messages.push(message); 11 | } 12 | 13 | clear(){ 14 | this.messages = []; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/app/message.ts: -------------------------------------------------------------------------------- 1 | import { Customer } from './customer'; 2 | 3 | export class Message { 4 | message: string; 5 | error: string; 6 | customers: Customer[]; 7 | } -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/app/message/message.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Messages

3 | 4 |
5 |
    6 |
  1. 7 |
    8 |
    9 |
    2. 10 |
11 |
-------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/app/message/message.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MessageService } from '../message.service'; 3 | 4 | @Component({ 5 | selector: 'app-message', 6 | templateUrl: './message.component.html' 7 | }) 8 | export class MessageComponent { 9 | constructor(public messageService: MessageService) {} 10 | } -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular-10-Nodejs-MongoDB-CRUD-Example/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular-10-Nodejs-MongoDB-CRUD-Example/src/favicon.ico -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-CRUD-Example/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/.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 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/README.md: -------------------------------------------------------------------------------- 1 | # AngularTablePaging 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app 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. Use the `--prod` flag for a production build. 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 [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('angular-table-paging app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-table-paging'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent{ 8 | 9 | 10 | } -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { HttpClientModule } from '@angular/common/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { AngulartableComponent } from './angulartable/angulartable.component'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | AngulartableComponent 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | HttpClientModule 17 | ], 18 | providers: [], 19 | bootstrap: [AppComponent] 20 | }) 21 | export class AppModule { } 22 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/app/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | id: number; 3 | firstname: string; 4 | lastname: string; 5 | age: number; 6 | salary: number; 7 | address: string; 8 | copyrightBy: string; 9 | } -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/app/message.ts: -------------------------------------------------------------------------------- 1 | import { Customer } from './customer'; 2 | 3 | export class Message { 4 | customers: Customer[]; 5 | totalPages: number; 6 | pageNumber: number; 7 | pageSize: number; 8 | } -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular-10-Nodejs-MongoDB-Pagination-Example/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular-10-Nodejs-MongoDB-Pagination-Example/src/favicon.ico -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular-10-Nodejs-MongoDB-Pagination-Example/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/.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 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/README.md: -------------------------------------------------------------------------------- 1 | # AngularHttpclient 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.0. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app 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. Use the `--prod` flag for a production build. 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 [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 28 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('angular-httpclient app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-httpclient'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 4 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: AddCustomerComponent 10 | }, 11 | { 12 | path: 'customers', 13 | component: ListCustomersComponent 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [RouterModule.forRoot(routes)], 19 | exports: [RouterModule] 20 | }) 21 | export class AppRoutingModule { } -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent { 8 | title = 'angular-httpclient'; 9 | } 10 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { AppComponent } from './app.component'; 8 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 9 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 10 | 11 | import { HttpClientModule } from '@angular/common/http'; 12 | import { MessageComponent } from './message/message.component'; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent, 17 | AddCustomerComponent, 18 | ListCustomersComponent, 19 | MessageComponent 20 | ], 21 | imports: [ 22 | BrowserModule, 23 | AppRoutingModule, 24 | FormsModule, 25 | HttpClientModule 26 | ], 27 | providers: [], 28 | bootstrap: [AppComponent] 29 | }) 30 | export class AppModule { } -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/app/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | id: number; 3 | firstname: string; 4 | lastname: string; 5 | age: number; 6 | address: string 7 | } 8 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/app/message.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class MessageService { 7 | messages: string[] = []; 8 | 9 | add(message: string) { 10 | this.messages.push(message); 11 | } 12 | 13 | clear(){ 14 | this.messages = []; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/app/message.ts: -------------------------------------------------------------------------------- 1 | import { Customer } from './customer'; 2 | 3 | export class Message { 4 | message: string; 5 | error: string; 6 | customers: Customer[]; 7 | } -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/app/message/message.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Messages

3 | 4 |
5 |
    6 |
  1. 7 |
    8 |
    9 |
    2. 10 |
11 |
-------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/app/message/message.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MessageService } from '../message.service'; 3 | 4 | @Component({ 5 | selector: 'app-message', 6 | templateUrl: './message.component.html' 7 | }) 8 | export class MessageComponent { 9 | constructor(public messageService: MessageService) {} 10 | } -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/favicon.ico -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular-PostgreSQL-Nodejs-CRUD-Example-Frontend/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/.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 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('angular-httpclient app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-httpclient'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 4 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: AddCustomerComponent 10 | }, 11 | { 12 | path: 'customers', 13 | component: ListCustomersComponent 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [RouterModule.forRoot(routes)], 19 | exports: [RouterModule] 20 | }) 21 | export class AppRoutingModule { } -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html' 6 | }) 7 | export class AppComponent { 8 | title = 'angular-httpclient'; 9 | } 10 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { FormsModule } from '@angular/forms'; 5 | 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { AppComponent } from './app.component'; 8 | import { AddCustomerComponent } from './add-customer/add-customer.component'; 9 | import { ListCustomersComponent } from './list-customers/list-customers.component'; 10 | 11 | import { HttpClientModule } from '@angular/common/http'; 12 | import { MessageComponent } from './message/message.component'; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent, 17 | AddCustomerComponent, 18 | ListCustomersComponent, 19 | MessageComponent 20 | ], 21 | imports: [ 22 | BrowserModule, 23 | AppRoutingModule, 24 | FormsModule, 25 | HttpClientModule 26 | ], 27 | providers: [], 28 | bootstrap: [AppComponent] 29 | }) 30 | export class AppModule { } -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/app/customer.ts: -------------------------------------------------------------------------------- 1 | export class Customer { 2 | id: number; 3 | firstname: string; 4 | lastname: string; 5 | age: number; 6 | address: string 7 | } 8 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/app/message.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class MessageService { 7 | messages: string[] = []; 8 | 9 | add(message: string) { 10 | this.messages.push(message); 11 | } 12 | 13 | clear(){ 14 | this.messages = []; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/app/message.ts: -------------------------------------------------------------------------------- 1 | import { Customer } from './customer'; 2 | 3 | export class Message { 4 | message: string; 5 | error: string; 6 | customers: Customer[]; 7 | } -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/app/message/message.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Messages

3 | 4 |
5 |
    6 |
  1. 7 |
    8 |
    9 |
    2. 10 |
11 |
-------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/app/message/message.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { MessageService } from '../message.service'; 3 | 4 | @Component({ 5 | selector: 'app-message', 6 | templateUrl: './message.component.html' 7 | }) 8 | export class MessageComponent { 9 | constructor(public messageService: MessageService) {} 10 | } -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/favicon.ico -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular-SpringBoot-MongoDB-CRUD-RestAPIs-Example/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/.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 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/README.md: -------------------------------------------------------------------------------- 1 | Frontend Development - Angular 10 Spring Boot JWT Authentication Example – Angular 6, 8, 9, 10 + Spring Security + MySQL/PostgreSQL 2 | *** 3 | https://loizenai.com/angular-spring-boot-jwt-authentication-example-angular-6-8-9-spring-security-mysql-postgresql/ 4 | 5 | Related posts: 6 | 1. Angular CRUD Application with SpringBoot and MySQL/PostgreSQL RestAPIs – Fullstack Angular 10-9-8 HttpClient Post/Get/Put/Delete 7 | https://loizenai.com/angular-crud-application-with-springboot-and-mysql-postgresql-restapis-fullstack-angular-httpclient-post-get-put-delete/ 8 | 9 | 2. Build SpringBoot CRUD Application – FullStack: Frontend (Bootstrap and Ajax) to Backend (SpringBoot and MySQL/PostgreSQL database) 10 | https://loizenai.com/build-springboot-crud-application-fullstack-frontend-bootstrap-and-ajax-to-backend-springboot-and-mysql-postgresql-database/ 11 | 12 | 3. Angular Nodejs Fullstack CRUD Application with MySQL/PostgreSQL – Angular 10-9-8 HttpClient + Nodejs Express, Sequelize ORM 13 | https://loizenai.com/angular-nodejs-fullstack-crud-application-with-mysql-postgresql-angular-10-9-8-httpclient-client-nodejs-express-sequelize-orm/ 14 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('AngularJwtAuth app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/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-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/AngularJwtAuth'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/admin/admin.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/admin/admin.component.css -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/admin/admin.component.html: -------------------------------------------------------------------------------- 1 |

Content from Server

2 | {{board}} 3 | {{errorMessage}} -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/admin/admin.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AdminComponent } from './admin.component'; 4 | 5 | describe('AdminComponent', () => { 6 | let component: AdminComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ AdminComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AdminComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/admin/admin.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-admin', 6 | templateUrl: './admin.component.html', 7 | styleUrls: ['./admin.component.css'] 8 | }) 9 | export class AdminComponent implements OnInit { 10 | board: string; 11 | errorMessage: string; 12 | 13 | constructor(private userService: UserService) { } 14 | 15 | ngOnInit() { 16 | this.userService.getAdminBoard().subscribe( 17 | data => { 18 | this.board = data; 19 | }, 20 | error => { 21 | this.errorMessage = `${error.status}: ${JSON.parse(error.error).message}`; 22 | } 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/app.component.css -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 23 |
24 | 25 |
-------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | it('should create the app', async(() => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.debugElement.componentInstance; 14 | expect(app).toBeTruthy(); 15 | })); 16 | it(`should have as title 'app'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('app'); 20 | })); 21 | it('should render title in a h1 tag', async(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | fixture.detectChanges(); 24 | const compiled = fixture.debugElement.nativeElement; 25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to AngularJwtAuth!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { TokenStorageService } from './auth/token-storage.service'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent implements OnInit { 10 | roles: string[]; 11 | authority: string; 12 | 13 | constructor(private tokenStorage: TokenStorageService) { } 14 | 15 | ngOnInit() { 16 | if (this.tokenStorage.getToken()) { 17 | this.roles = this.tokenStorage.getAuthorities(); 18 | this.roles.every(role => { 19 | if (role === 'ROLE_ADMIN') { 20 | this.authority = 'admin'; 21 | return false; 22 | } else if (role === 'ROLE_PM') { 23 | this.authority = 'pm'; 24 | return false; 25 | } 26 | this.authority = 'user'; 27 | return true; 28 | }); 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { HttpClientModule } from '@angular/common/http'; 5 | import { FormsModule } from '@angular/forms'; 6 | 7 | import { AppComponent } from './app.component'; 8 | import { LoginComponent } from './login/login.component'; 9 | import { UserComponent } from './user/user.component'; 10 | import { RegisterComponent } from './register/register.component'; 11 | import { HomeComponent } from './home/home.component'; 12 | import { AdminComponent } from './admin/admin.component'; 13 | import { PmComponent } from './pm/pm.component'; 14 | 15 | import { httpInterceptorProviders } from './auth/auth-interceptor'; 16 | 17 | @NgModule({ 18 | declarations: [ 19 | AppComponent, 20 | LoginComponent, 21 | UserComponent, 22 | RegisterComponent, 23 | HomeComponent, 24 | AdminComponent, 25 | PmComponent 26 | ], 27 | imports: [ 28 | BrowserModule, 29 | AppRoutingModule, 30 | FormsModule, 31 | HttpClientModule 32 | ], 33 | providers: [httpInterceptorProviders], 34 | bootstrap: [AppComponent] 35 | }) 36 | export class AppModule { } 37 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/auth/auth-interceptor.ts: -------------------------------------------------------------------------------- 1 | import { HTTP_INTERCEPTORS } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; 4 | 5 | import { TokenStorageService } from './token-storage.service'; 6 | 7 | const TOKEN_HEADER_KEY = 'Authorization'; 8 | 9 | @Injectable() 10 | export class AuthInterceptor implements HttpInterceptor { 11 | 12 | constructor(private token: TokenStorageService) { } 13 | 14 | intercept(req: HttpRequest, next: HttpHandler) { 15 | let authReq = req; 16 | const token = this.token.getToken(); 17 | if (token != null) { 18 | authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) }); 19 | } 20 | return next.handle(authReq); 21 | } 22 | } 23 | 24 | export const httpInterceptorProviders = [ 25 | { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true } 26 | ]; 27 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/auth/auth.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { AuthService } from './auth.service'; 4 | 5 | describe('AuthService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [AuthService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([AuthService], (service: AuthService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/auth/auth.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient, HttpHeaders } from '@angular/common/http'; 3 | import { Observable } from 'rxjs'; 4 | 5 | import { JwtResponse } from './jwt-response'; 6 | import { AuthLoginInfo } from './login-info'; 7 | import { SignUpInfo } from './signup-info'; 8 | 9 | const httpOptions = { 10 | headers: new HttpHeaders({ 'Content-Type': 'application/json' }) 11 | }; 12 | 13 | @Injectable({ 14 | providedIn: 'root' 15 | }) 16 | export class AuthService { 17 | 18 | private loginUrl = 'http://localhost:8080/api/auth/signin'; 19 | private signupUrl = 'http://localhost:8080/api/auth/signup'; 20 | 21 | constructor(private http: HttpClient) { 22 | } 23 | 24 | attemptAuth(credentials: AuthLoginInfo): Observable { 25 | return this.http.post(this.loginUrl, credentials, httpOptions); 26 | } 27 | 28 | signUp(info: SignUpInfo): Observable { 29 | return this.http.post(this.signupUrl, info, httpOptions); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/auth/jwt-response.ts: -------------------------------------------------------------------------------- 1 | export class JwtResponse { 2 | accessToken: string; 3 | type: string; 4 | username: string; 5 | authorities: string[]; 6 | } 7 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/auth/login-info.ts: -------------------------------------------------------------------------------- 1 | export class AuthLoginInfo { 2 | username: string; 3 | password: string; 4 | 5 | constructor(username: string, password: string) { 6 | this.username = username; 7 | this.password = password; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/auth/signup-info.ts: -------------------------------------------------------------------------------- 1 | export class SignUpInfo { 2 | name: string; 3 | username: string; 4 | email: string; 5 | role: string[]; 6 | password: string; 7 | 8 | constructor(name: string, username: string, email: string, password: string) { 9 | this.name = name; 10 | this.username = username; 11 | this.email = email; 12 | this.password = password; 13 | this.role = ['user']; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/auth/token-storage.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { TokenStorageService } from './token-storage.service'; 4 | 5 | describe('TokenStorageService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [TokenStorageService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([TokenStorageService], (service: TokenStorageService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/home/home.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/home/home.component.css -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |
Your Information
3 |

4 | Username: {{info.username}}
5 | Roles: {{info.authorities}}
6 | Token: {{info.token}}. 7 |

8 | 9 |
10 | 11 | 12 | Please login. 13 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HomeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | import { TokenStorageService } from '../auth/token-storage.service'; 4 | 5 | @Component({ 6 | selector: 'app-home', 7 | templateUrl: './home.component.html', 8 | styleUrls: ['./home.component.css'] 9 | }) 10 | export class HomeComponent implements OnInit { 11 | info: any; 12 | 13 | constructor(private token: TokenStorageService) { } 14 | 15 | ngOnInit() { 16 | this.info = { 17 | token: this.token.getToken(), 18 | username: this.token.getUsername(), 19 | authorities: this.token.getAuthorities() 20 | }; 21 | } 22 | 23 | logout() { 24 | this.token.signOut(); 25 | window.location.reload(); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/login/login.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/login/login.component.css -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/login/login.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LoginComponent } from './login.component'; 4 | 5 | describe('LoginComponent', () => { 6 | let component: LoginComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ LoginComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(LoginComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/pm/pm.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/pm/pm.component.css -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/pm/pm.component.html: -------------------------------------------------------------------------------- 1 |

Content from Server

2 | {{board}} 3 | {{errorMessage}} -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/pm/pm.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PmComponent } from './pm.component'; 4 | 5 | describe('PmComponent', () => { 6 | let component: PmComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PmComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PmComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/pm/pm.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-pm', 6 | templateUrl: './pm.component.html', 7 | styleUrls: ['./pm.component.css'] 8 | }) 9 | export class PmComponent implements OnInit { 10 | board: string; 11 | errorMessage: string; 12 | 13 | constructor(private userService: UserService) { } 14 | 15 | ngOnInit() { 16 | this.userService.getPMBoard().subscribe( 17 | data => { 18 | this.board = data; 19 | }, 20 | error => { 21 | this.errorMessage = `${error.status}: ${JSON.parse(error.error).message}`; 22 | } 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/register/register.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/register/register.component.css -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/register/register.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { RegisterComponent } from './register.component'; 4 | 5 | describe('RegisterComponent', () => { 6 | let component: RegisterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ RegisterComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(RegisterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/register/register.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | import { AuthService } from '../auth/auth.service'; 4 | import { SignUpInfo } from '../auth/signup-info'; 5 | 6 | @Component({ 7 | selector: 'app-register', 8 | templateUrl: './register.component.html', 9 | styleUrls: ['./register.component.css'] 10 | }) 11 | export class RegisterComponent implements OnInit { 12 | form: any = {}; 13 | signupInfo: SignUpInfo; 14 | isSignedUp = false; 15 | isSignUpFailed = false; 16 | errorMessage = ''; 17 | 18 | constructor(private authService: AuthService) { } 19 | 20 | ngOnInit() { } 21 | 22 | onSubmit() { 23 | console.log(this.form); 24 | 25 | this.signupInfo = new SignUpInfo( 26 | this.form.name, 27 | this.form.username, 28 | this.form.email, 29 | this.form.password); 30 | 31 | this.authService.signUp(this.signupInfo).subscribe( 32 | data => { 33 | console.log(data); 34 | this.isSignedUp = true; 35 | this.isSignUpFailed = false; 36 | }, 37 | error => { 38 | console.log(error); 39 | this.errorMessage = error.error.message; 40 | this.isSignUpFailed = true; 41 | } 42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/services/user.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { UserService } from './user.service'; 4 | 5 | describe('UserService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [UserService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([UserService], (service: UserService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/services/user.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class UserService { 9 | 10 | private userUrl = 'http://localhost:8080/api/test/user'; 11 | private pmUrl = 'http://localhost:8080/api/test/pm'; 12 | private adminUrl = 'http://localhost:8080/api/test/admin'; 13 | 14 | constructor(private http: HttpClient) { } 15 | 16 | getUserBoard(): Observable { 17 | return this.http.get(this.userUrl, { responseType: 'text' }); 18 | } 19 | 20 | getPMBoard(): Observable { 21 | return this.http.get(this.pmUrl, { responseType: 'text' }); 22 | } 23 | 24 | getAdminBoard(): Observable { 25 | return this.http.get(this.adminUrl, { responseType: 'text' }); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/user/user.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/user/user.component.css -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/user/user.component.html: -------------------------------------------------------------------------------- 1 |

Content from Server

2 | {{board}} 3 | {{errorMessage}} -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/user/user.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserComponent } from './user.component'; 4 | 5 | describe('UserComponent', () => { 6 | let component: UserComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ UserComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(UserComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/app/user/user.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { UserService } from '../services/user.service'; 3 | 4 | @Component({ 5 | selector: 'app-user', 6 | templateUrl: './user.component.html', 7 | styleUrls: ['./user.component.css'] 8 | }) 9 | export class UserComponent implements OnInit { 10 | board: string; 11 | errorMessage: string; 12 | 13 | constructor(private userService: UserService) { } 14 | 15 | ngOnInit() { 16 | this.userService.getUserBoard().subscribe( 17 | data => { 18 | this.board = data; 19 | }, 20 | error => { 21 | this.errorMessage = `${error.status}: ${JSON.parse(error.error).message}`; 22 | } 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular10 SpringBoot Jwt Authentication - Frontend Development/src/assets/.gitkeep -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loizenai/Angular-Tutorial/191cd366861c9c8444c91365245c8be74e7fb2af/Angular10 SpringBoot Jwt Authentication - Frontend Development/src/favicon.ico -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AngularJwtAuth 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "module": "esnext", 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "lib": [ 15 | "es2018", 16 | "dom" 17 | ] 18 | }, 19 | "angularCompilerOptions": { 20 | "fullTemplateTypeCheck": true, 21 | "strictInjectionParameters": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Angular10 SpringBoot Jwt Authentication - Frontend Development/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | --------------------------------------------------------------------------------