├── .angulardoc.json ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src ├── app │ ├── app-material │ │ └── app-material.module.ts │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.ts │ ├── app.module.ts │ ├── package.json │ └── products │ │ ├── product-form │ │ ├── product-form.component.html │ │ ├── product-form.component.scss │ │ └── product-form.component.ts │ │ ├── product.ts │ │ ├── products-routing.module.ts │ │ ├── products.module.ts │ │ ├── products.service.ts │ │ └── products │ │ ├── products.component.html │ │ ├── products.component.scss │ │ └── products.component.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.scss └── test.ts ├── tsconfig.app.json ├── tsconfig.base.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json /.angulardoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "repoId": "1a8a75ca-81df-4f64-971a-74888cd36490", 3 | "lastSync": 0 4 | } -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 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 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. 18 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 19 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :fire: Projeto em andamento, estamos desenvolvendo nas lives na https://www.twitch.tv/loiane. 2 | 3 | # CrudAngularNode 4 | 5 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6. 6 | 7 | ## Development server 8 | 9 | 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. 10 | 11 | ## Code scaffolding 12 | 13 | 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`. 14 | 15 | ## Build 16 | 17 | 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. 18 | 19 | ## Running unit tests 20 | 21 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 22 | 23 | ## Running end-to-end tests 24 | 25 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 26 | 27 | ## Further help 28 | 29 | 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). 30 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "crud-angular-node": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss", 11 | "skipTests": true 12 | }, 13 | "@schematics/angular:class": { 14 | "skipTests": true 15 | }, 16 | "@schematics/angular:directive": { 17 | "skipTests": true 18 | }, 19 | "@schematics/angular:guard": { 20 | "skipTests": true 21 | }, 22 | "@schematics/angular:interceptor": { 23 | "skipTests": true 24 | }, 25 | "@schematics/angular:module": { 26 | "skipTests": true 27 | }, 28 | "@schematics/angular:pipe": { 29 | "skipTests": true 30 | }, 31 | "@schematics/angular:service": { 32 | "skipTests": true 33 | }, 34 | "@schematics/angular:application": { 35 | "strict": true 36 | } 37 | }, 38 | "root": "", 39 | "sourceRoot": "src", 40 | "prefix": "app", 41 | "architect": { 42 | "build": { 43 | "builder": "@angular-devkit/build-angular:browser", 44 | "options": { 45 | "outputPath": "dist/crud-angular-node", 46 | "index": "src/index.html", 47 | "main": "src/main.ts", 48 | "polyfills": "src/polyfills.ts", 49 | "tsConfig": "tsconfig.app.json", 50 | "aot": true, 51 | "assets": [ 52 | "src/favicon.ico", 53 | "src/assets" 54 | ], 55 | "styles": [ 56 | "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 57 | "src/styles.scss" 58 | ], 59 | "scripts": [] 60 | }, 61 | "configurations": { 62 | "production": { 63 | "fileReplacements": [ 64 | { 65 | "replace": "src/environments/environment.ts", 66 | "with": "src/environments/environment.prod.ts" 67 | } 68 | ], 69 | "optimization": true, 70 | "outputHashing": "all", 71 | "sourceMap": false, 72 | "extractCss": true, 73 | "namedChunks": false, 74 | "extractLicenses": true, 75 | "vendorChunk": false, 76 | "buildOptimizer": true, 77 | "budgets": [ 78 | { 79 | "type": "initial", 80 | "maximumWarning": "500kb", 81 | "maximumError": "1mb" 82 | }, 83 | { 84 | "type": "anyComponentStyle", 85 | "maximumWarning": "2kb", 86 | "maximumError": "4kb" 87 | } 88 | ] 89 | } 90 | } 91 | }, 92 | "serve": { 93 | "builder": "@angular-devkit/build-angular:dev-server", 94 | "options": { 95 | "browserTarget": "crud-angular-node:build" 96 | }, 97 | "configurations": { 98 | "production": { 99 | "browserTarget": "crud-angular-node:build:production" 100 | } 101 | } 102 | }, 103 | "extract-i18n": { 104 | "builder": "@angular-devkit/build-angular:extract-i18n", 105 | "options": { 106 | "browserTarget": "crud-angular-node:build" 107 | } 108 | }, 109 | "test": { 110 | "builder": "@angular-devkit/build-angular:karma", 111 | "options": { 112 | "main": "src/test.ts", 113 | "polyfills": "src/polyfills.ts", 114 | "tsConfig": "tsconfig.spec.json", 115 | "karmaConfig": "karma.conf.js", 116 | "assets": [ 117 | "src/favicon.ico", 118 | "src/assets" 119 | ], 120 | "styles": [ 121 | "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 122 | "src/styles.scss" 123 | ], 124 | "scripts": [] 125 | } 126 | }, 127 | "lint": { 128 | "builder": "@angular-devkit/build-angular:tslint", 129 | "options": { 130 | "tsConfig": [ 131 | "tsconfig.app.json", 132 | "tsconfig.spec.json", 133 | "e2e/tsconfig.json" 134 | ], 135 | "exclude": [ 136 | "**/node_modules/**" 137 | ] 138 | } 139 | }, 140 | "e2e": { 141 | "builder": "@angular-devkit/build-angular:protractor", 142 | "options": { 143 | "protractorConfig": "e2e/protractor.conf.js", 144 | "devServerTarget": "crud-angular-node:serve" 145 | }, 146 | "configurations": { 147 | "production": { 148 | "devServerTarget": "crud-angular-node:serve:production" 149 | } 150 | } 151 | } 152 | } 153 | } 154 | }, 155 | "defaultProject": "crud-angular-node" 156 | } -------------------------------------------------------------------------------- /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, StacktraceOption } = 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({ 31 | spec: { 32 | displayStacktrace: StacktraceOption.PRETTY 33 | } 34 | })); 35 | } 36 | }; -------------------------------------------------------------------------------- /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('crud-angular-node 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../tsconfig.base.json", 4 | "compilerOptions": { 5 | "outDir": "../out-tsc/e2e", 6 | "module": "commonjs", 7 | "target": "es2018", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /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/crud-angular-node'), 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "crud-angular-node", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~10.0.9", 15 | "@angular/cdk": "^10.1.3", 16 | "@angular/common": "~10.0.9", 17 | "@angular/compiler": "~10.0.9", 18 | "@angular/core": "~10.0.9", 19 | "@angular/forms": "~10.0.9", 20 | "@angular/material": "^10.1.3", 21 | "@angular/platform-browser": "~10.0.9", 22 | "@angular/platform-browser-dynamic": "~10.0.9", 23 | "@angular/router": "~10.0.9", 24 | "rxjs": "~6.5.5", 25 | "tslib": "^2.0.0", 26 | "zone.js": "~0.10.3" 27 | }, 28 | "devDependencies": { 29 | "@angular-devkit/build-angular": "~0.1000.6", 30 | "@angular/cli": "~10.0.6", 31 | "@angular/compiler-cli": "~10.0.9", 32 | "@types/node": "^12.11.1", 33 | "@types/jasmine": "~3.5.0", 34 | "@types/jasminewd2": "~2.0.3", 35 | "codelyzer": "^6.0.0", 36 | "jasmine-core": "~3.5.0", 37 | "jasmine-spec-reporter": "~5.0.0", 38 | "karma": "~5.0.0", 39 | "karma-chrome-launcher": "~3.1.0", 40 | "karma-coverage-istanbul-reporter": "~3.0.2", 41 | "karma-jasmine": "~3.3.0", 42 | "karma-jasmine-html-reporter": "^1.5.0", 43 | "protractor": "~7.0.0", 44 | "ts-node": "~8.3.0", 45 | "tslint": "~6.1.0", 46 | "typescript": "~3.9.5" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/app/app-material/app-material.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { MatButtonModule } from '@angular/material/button'; 4 | import { MatCardModule } from '@angular/material/card'; 5 | import { MatFormFieldModule } from '@angular/material/form-field'; 6 | import { MatIconModule } from '@angular/material/icon'; 7 | import { MatInputModule } from '@angular/material/input'; 8 | import { MatTableModule } from '@angular/material/table'; 9 | import { MatToolbarModule } from '@angular/material/toolbar'; 10 | 11 | @NgModule({ 12 | declarations: [], 13 | imports: [ 14 | CommonModule 15 | ], 16 | exports: [ 17 | MatToolbarModule, 18 | MatButtonModule, 19 | MatTableModule, 20 | MatIconModule, 21 | MatFormFieldModule, 22 | MatCardModule, 23 | MatInputModule 24 | ] 25 | }) 26 | export class AppMaterialModule { } 27 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { path: '', pathMatch: 'full', redirectTo: 'products' }, 6 | { 7 | path: 'products', 8 | loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) 9 | } 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forRoot(routes)], 14 | exports: [RouterModule] 15 | }) 16 | export class AppRoutingModule { } 17 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | CRUD Angular + Node 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/crud-angular-node/c5fec0a842c7f5fb71c3dc27e0b6db932aaefeaa/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'crud-angular-node'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | 5 | import { AppMaterialModule } from './app-material/app-material.module'; 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { AppComponent } from './app.component'; 8 | import { HttpClientModule } from '@angular/common/http'; 9 | 10 | @NgModule({ 11 | declarations: [ 12 | AppComponent 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | AppRoutingModule, 17 | BrowserAnimationsModule, 18 | AppMaterialModule, 19 | HttpClientModule 20 | ], 21 | providers: [], 22 | bootstrap: [AppComponent] 23 | }) 24 | export class AppModule { } 25 | -------------------------------------------------------------------------------- /src/app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "crud-angular-node", 3 | "private": true, 4 | "description_1": "This is a special package.json file that is not used by package managers.", 5 | "description_2": "It is used to tell the tools and bundlers whether the code under this directory is free of code with non-local side-effect. Any code that does have non-local side-effects can't be well optimized (tree-shaken) and will result in unnecessary increased payload size.", 6 | "description_3": "It should be safe to set this option to 'false' for new applications, but existing code bases could be broken when built with the production config if the application code does contain non-local side-effects that the application depends on.", 7 | "description_4": "To learn more about this file see: https://angular.io/config/app-package-json.", 8 | "sideEffects": false 9 | } 10 | -------------------------------------------------------------------------------- /src/app/products/product-form/product-form.component.html: -------------------------------------------------------------------------------- 1 | 2 | Product Details 3 | 4 |
5 | 6 | Product Name 7 | 8 | 9 | Product Name is required 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/app/products/product-form/product-form.component.scss: -------------------------------------------------------------------------------- 1 | .example-form { 2 | min-width: 150px; 3 | max-width: 500px; 4 | width: 100%; 5 | } 6 | 7 | .example-full-width { 8 | width: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/products/product-form/product-form.component.ts: -------------------------------------------------------------------------------- 1 | import { Location } from '@angular/common'; 2 | import { Component, OnInit } from '@angular/core'; 3 | import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 4 | 5 | import { Product } from '../product'; 6 | import { ProductsService } from '../products.service'; 7 | 8 | @Component({ 9 | selector: 'app-product-form', 10 | templateUrl: './product-form.component.html', 11 | styleUrls: ['./product-form.component.scss'] 12 | }) 13 | export class ProductFormComponent implements OnInit { 14 | 15 | form: FormGroup; 16 | 17 | constructor(private fb: FormBuilder, 18 | private location: Location, 19 | private service: ProductsService) { 20 | this.form = this.fb.group({ 21 | name: [null, Validators.required] 22 | }); 23 | } 24 | 25 | ngOnInit(): void { } 26 | 27 | onSubmit(): void { 28 | if (this.form.valid) { 29 | // create 30 | const product: Product = this.form.value; 31 | product.id = 0; 32 | this.service.save(product); 33 | this.onCancel(); 34 | } else { 35 | this.form.markAllAsTouched(); 36 | } 37 | } 38 | 39 | onCancel(): void { 40 | this.location.back(); 41 | } 42 | 43 | isFieldRequired(fieldName: string): boolean { 44 | return this.form.get(fieldName)?.hasError('required') ?? false; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/app/products/product.ts: -------------------------------------------------------------------------------- 1 | export interface Product { 2 | id: number; 3 | name: string; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/products/products-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | import { ProductFormComponent } from './product-form/product-form.component'; 5 | import { ProductsComponent } from './products/products.component'; 6 | 7 | const routes: Routes = [ 8 | { path: '', component: ProductsComponent }, 9 | { path: 'create', component: ProductFormComponent } 10 | ]; 11 | 12 | @NgModule({ 13 | imports: [RouterModule.forChild(routes)], 14 | exports: [RouterModule] 15 | }) 16 | export class ProductsRoutingModule { } 17 | -------------------------------------------------------------------------------- /src/app/products/products.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { AppMaterialModule } from '../app-material/app-material.module'; 6 | import { ProductFormComponent } from './product-form/product-form.component'; 7 | import { ProductsRoutingModule } from './products-routing.module'; 8 | import { ProductsComponent } from './products/products.component'; 9 | 10 | @NgModule({ 11 | declarations: [ProductsComponent, ProductFormComponent], 12 | imports: [ 13 | CommonModule, 14 | ReactiveFormsModule, 15 | ProductsRoutingModule, 16 | AppMaterialModule 17 | ] 18 | }) 19 | export class ProductsModule { } 20 | -------------------------------------------------------------------------------- /src/app/products/products.service.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | import { Observable, of } from 'rxjs'; 4 | 5 | import { Product } from './product'; 6 | 7 | @Injectable({ 8 | providedIn: 'root' 9 | }) 10 | export class ProductsService { 11 | 12 | private ID_COUNT = 11; 13 | 14 | private products: Product[] = []; 15 | 16 | constructor(private http: HttpClient) { 17 | for (let i = 1; i <= 10; i++) { 18 | this.products.push({id: i, name: `Product ${i}`}); 19 | } 20 | } 21 | 22 | listAll(): Observable { 23 | return of(this.products); 24 | } 25 | 26 | save(product: Product): void { // TODO: mudar retorno para Observable 27 | if (product.id === 0) { // create 28 | product.id = this.ID_COUNT; 29 | this.products.push(product); 30 | this.ID_COUNT++; 31 | } else { 32 | // edit 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/products/products/products.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
ID {{ element.id }} Name {{ element.name }}
41 |
42 | -------------------------------------------------------------------------------- /src/app/products/products/products.component.scss: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/products/products/products.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { ActivatedRoute, Router } from '@angular/router'; 3 | 4 | import { Product } from '../product'; 5 | import { ProductsService } from '../products.service'; 6 | 7 | @Component({ 8 | selector: 'app-products', 9 | templateUrl: './products.component.html', 10 | styleUrls: ['./products.component.scss'] 11 | }) 12 | export class ProductsComponent implements OnInit { 13 | 14 | products: Product[] = []; 15 | displayedColumns: string[] = ['id', 'name', 'actions']; 16 | 17 | constructor(private router: Router, 18 | private route: ActivatedRoute, 19 | private service: ProductsService) { } 20 | 21 | ngOnInit(): void { 22 | this.service.listAll().subscribe(results => { 23 | console.log(results); 24 | this.products = results; 25 | }); 26 | } 27 | 28 | onAdd(): void { 29 | this.router.navigate(['create'], { relativeTo: this.route }); 30 | } 31 | 32 | onEdit(product: Product): void { 33 | console.log(product); 34 | } 35 | 36 | onRemove(product: Product): void { 37 | console.log(product); 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/crud-angular-node/c5fec0a842c7f5fb71c3dc27e0b6db932aaefeaa/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/crud-angular-node/c5fec0a842c7f5fb71c3dc27e0b6db932aaefeaa/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CrudAngularNode 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | html, body { height: 100%; } 4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } 5 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.base.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "sourceMap": true, 12 | "declaration": false, 13 | "downlevelIteration": true, 14 | "experimentalDecorators": true, 15 | "moduleResolution": "node", 16 | "importHelpers": true, 17 | "target": "es2015", 18 | "module": "es2020", 19 | "lib": [ 20 | "es2018", 21 | "dom" 22 | ] 23 | }, 24 | "angularCompilerOptions": { 25 | "strictInjectionParameters": true, 26 | "strictTemplates": true 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* 2 | This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. 3 | It is not intended to be used to perform a compilation. 4 | 5 | To learn more about this file see: https://angular.io/config/solution-tsconfig. 6 | */ 7 | { 8 | "files": [], 9 | "references": [ 10 | { 11 | "path": "./tsconfig.app.json" 12 | }, 13 | { 14 | "path": "./tsconfig.spec.json" 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.base.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 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 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "align": { 5 | "options": [ 6 | "parameters", 7 | "statements" 8 | ] 9 | }, 10 | "array-type": false, 11 | "arrow-return-shorthand": true, 12 | "curly": true, 13 | "deprecation": { 14 | "severity": "warning" 15 | }, 16 | "component-class-suffix": true, 17 | "contextual-lifecycle": true, 18 | "directive-class-suffix": true, 19 | "directive-selector": [ 20 | true, 21 | "attribute", 22 | "app", 23 | "camelCase" 24 | ], 25 | "component-selector": [ 26 | true, 27 | "element", 28 | "app", 29 | "kebab-case" 30 | ], 31 | "eofline": true, 32 | "import-blacklist": [ 33 | true, 34 | "rxjs/Rx" 35 | ], 36 | "import-spacing": true, 37 | "indent": { 38 | "options": [ 39 | "spaces" 40 | ] 41 | }, 42 | "max-classes-per-file": false, 43 | "max-line-length": [ 44 | true, 45 | 140 46 | ], 47 | "member-ordering": [ 48 | true, 49 | { 50 | "order": [ 51 | "static-field", 52 | "instance-field", 53 | "static-method", 54 | "instance-method" 55 | ] 56 | } 57 | ], 58 | "no-any": true, 59 | "no-console": [ 60 | true, 61 | "debug", 62 | "info", 63 | "time", 64 | "timeEnd", 65 | "trace" 66 | ], 67 | "no-empty": false, 68 | "no-inferrable-types": [ 69 | true, 70 | "ignore-params" 71 | ], 72 | "no-non-null-assertion": true, 73 | "no-redundant-jsdoc": true, 74 | "no-switch-case-fall-through": true, 75 | "no-var-requires": false, 76 | "object-literal-key-quotes": [ 77 | true, 78 | "as-needed" 79 | ], 80 | "quotemark": [ 81 | true, 82 | "single" 83 | ], 84 | "semicolon": { 85 | "options": [ 86 | "always" 87 | ] 88 | }, 89 | "space-before-function-paren": { 90 | "options": { 91 | "anonymous": "never", 92 | "asyncArrow": "always", 93 | "constructor": "never", 94 | "method": "never", 95 | "named": "never" 96 | } 97 | }, 98 | "typedef": [ 99 | true, 100 | "call-signature" 101 | ], 102 | "typedef-whitespace": { 103 | "options": [ 104 | { 105 | "call-signature": "nospace", 106 | "index-signature": "nospace", 107 | "parameter": "nospace", 108 | "property-declaration": "nospace", 109 | "variable-declaration": "nospace" 110 | }, 111 | { 112 | "call-signature": "onespace", 113 | "index-signature": "onespace", 114 | "parameter": "onespace", 115 | "property-declaration": "onespace", 116 | "variable-declaration": "onespace" 117 | } 118 | ] 119 | }, 120 | "variable-name": { 121 | "options": [ 122 | "ban-keywords", 123 | "check-format", 124 | "allow-pascal-case" 125 | ] 126 | }, 127 | "whitespace": { 128 | "options": [ 129 | "check-branch", 130 | "check-decl", 131 | "check-operator", 132 | "check-separator", 133 | "check-type", 134 | "check-typecast" 135 | ] 136 | }, 137 | "no-conflicting-lifecycle": true, 138 | "no-host-metadata-property": true, 139 | "no-input-rename": true, 140 | "no-inputs-metadata-property": true, 141 | "no-output-native": true, 142 | "no-output-on-prefix": true, 143 | "no-output-rename": true, 144 | "no-outputs-metadata-property": true, 145 | "template-banana-in-box": true, 146 | "template-no-negated-async": true, 147 | "use-lifecycle-interface": true, 148 | "use-pipe-transform-interface": true 149 | }, 150 | "rulesDirectory": [ 151 | "codelyzer" 152 | ] 153 | } --------------------------------------------------------------------------------