├── .editorconfig
├── .gitignore
├── .vscode
├── extensions.json
├── launch.json
└── tasks.json
├── README.md
├── angular.json
├── package-lock.json
├── package.json
├── src
├── app
│ ├── app-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── auth
│ │ ├── auth-routing.module.ts
│ │ ├── auth.module.ts
│ │ └── pages
│ │ │ ├── layout-page
│ │ │ ├── layout-page.component.html
│ │ │ └── layout-page.component.ts
│ │ │ ├── login-page
│ │ │ ├── login-page.component.html
│ │ │ └── login-page.component.ts
│ │ │ └── register-page
│ │ │ ├── register-page.component.html
│ │ │ └── register-page.component.ts
│ ├── heroes
│ │ ├── heroes-routing.module.ts
│ │ ├── heroes.module.ts
│ │ └── pages
│ │ │ ├── hero-page
│ │ │ ├── hero-page.component.html
│ │ │ └── hero-page.component.ts
│ │ │ ├── layout-page
│ │ │ ├── layout-page.component.html
│ │ │ └── layout-page.component.ts
│ │ │ ├── list-page
│ │ │ ├── list-page.component.html
│ │ │ └── list-page.component.ts
│ │ │ ├── new-page
│ │ │ ├── new-page.component.html
│ │ │ └── new-page.component.ts
│ │ │ └── search-page
│ │ │ ├── search-page.component.html
│ │ │ └── search-page.component.ts
│ ├── material
│ │ └── material.module.ts
│ └── shared
│ │ ├── pages
│ │ └── error404-page
│ │ │ ├── error404-page.component.html
│ │ │ └── error404-page.component.ts
│ │ └── shared.module.ts
├── assets
│ └── .gitkeep
├── favicon.ico
├── index.html
├── main.ts
└── styles.css
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = 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 | /bazel-out
8 |
9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 |
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 |
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 |
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 |
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3 | "version": "0.2.0",
4 | "configurations": [
5 | {
6 | "name": "ng serve",
7 | "type": "pwa-chrome",
8 | "request": "launch",
9 | "preLaunchTask": "npm: start",
10 | "url": "http://localhost:4200/"
11 | },
12 | {
13 | "name": "ng test",
14 | "type": "chrome",
15 | "request": "launch",
16 | "preLaunchTask": "npm: test",
17 | "url": "http://localhost:9876/debug.html"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HeroesApp
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "heroesApp": {
7 | "projectType": "application",
8 | "schematics": {},
9 | "root": "",
10 | "sourceRoot": "src",
11 | "prefix": "app",
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/heroes-app",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": [
20 | "zone.js"
21 | ],
22 | "tsConfig": "tsconfig.app.json",
23 | "assets": [
24 | "src/favicon.ico",
25 | "src/assets"
26 | ],
27 | "styles": [
28 | "src/styles.css"
29 | ],
30 | "scripts": []
31 | },
32 | "configurations": {
33 | "production": {
34 | "budgets": [
35 | {
36 | "type": "initial",
37 | "maximumWarning": "500kb",
38 | "maximumError": "1mb"
39 | },
40 | {
41 | "type": "anyComponentStyle",
42 | "maximumWarning": "2kb",
43 | "maximumError": "4kb"
44 | }
45 | ],
46 | "outputHashing": "all"
47 | },
48 | "development": {
49 | "buildOptimizer": false,
50 | "optimization": false,
51 | "vendorChunk": true,
52 | "extractLicenses": false,
53 | "sourceMap": true,
54 | "namedChunks": true
55 | }
56 | },
57 | "defaultConfiguration": "production"
58 | },
59 | "serve": {
60 | "builder": "@angular-devkit/build-angular:dev-server",
61 | "configurations": {
62 | "production": {
63 | "browserTarget": "heroesApp:build:production"
64 | },
65 | "development": {
66 | "browserTarget": "heroesApp:build:development"
67 | }
68 | },
69 | "defaultConfiguration": "development"
70 | },
71 | "extract-i18n": {
72 | "builder": "@angular-devkit/build-angular:extract-i18n",
73 | "options": {
74 | "browserTarget": "heroesApp:build"
75 | }
76 | },
77 | "test": {
78 | "builder": "@angular-devkit/build-angular:karma",
79 | "options": {
80 | "polyfills": [
81 | "zone.js",
82 | "zone.js/testing"
83 | ],
84 | "tsConfig": "tsconfig.spec.json",
85 | "assets": [
86 | "src/favicon.ico",
87 | "src/assets"
88 | ],
89 | "styles": [
90 | "src/styles.css"
91 | ],
92 | "scripts": []
93 | }
94 | }
95 | }
96 | }
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "heroes-app",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^15.0.0",
14 | "@angular/common": "^15.0.0",
15 | "@angular/compiler": "^15.0.0",
16 | "@angular/core": "^15.0.0",
17 | "@angular/forms": "^15.0.0",
18 | "@angular/platform-browser": "^15.0.0",
19 | "@angular/platform-browser-dynamic": "^15.0.0",
20 | "@angular/router": "^15.0.0",
21 | "rxjs": "~7.5.0",
22 | "tslib": "^2.3.0",
23 | "zone.js": "~0.12.0"
24 | },
25 | "devDependencies": {
26 | "@angular-devkit/build-angular": "^15.0.4",
27 | "@angular/cli": "~15.0.4",
28 | "@angular/compiler-cli": "^15.0.0",
29 | "@types/jasmine": "~4.3.0",
30 | "jasmine-core": "~4.5.0",
31 | "karma": "~6.4.0",
32 | "karma-chrome-launcher": "~3.1.0",
33 | "karma-coverage": "~2.2.0",
34 | "karma-jasmine": "~5.1.0",
35 | "karma-jasmine-html-reporter": "~2.0.0",
36 | "typescript": "~4.8.2"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { Error404PageComponent } from './shared/pages/error404-page/error404-page.component';
4 |
5 | // dominio.com/
6 | const routes: Routes = [
7 | {
8 | path: 'auth',
9 | loadChildren: () => import('./auth/auth.module').then( m => m.AuthModule ),
10 | },
11 | {
12 | path: 'heroes',
13 | loadChildren: () => import('./heroes/heroes.module').then( m => m.HeroesModule ),
14 | },
15 | {
16 | path: '404',
17 | component: Error404PageComponent,
18 | },
19 | {
20 | path: '',
21 | redirectTo: 'heroes',
22 | pathMatch: 'full'
23 | },
24 | {
25 | path: '**',
26 | redirectTo: '404',
27 | }
28 | ];
29 |
30 | @NgModule({
31 | imports: [RouterModule.forRoot(routes)],
32 | exports: [RouterModule]
33 | })
34 | export class AppRoutingModule { }
35 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Klerith/angular-heroes-app/46d45f4b693f19c36f2a6feccfe3c5d7eeccaee6/src/app/app.component.css
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
layout-page works!
2 | 3 |login-page works!
2 | -------------------------------------------------------------------------------- /src/app/auth/pages/login-page/login-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-login-page', 5 | templateUrl: './login-page.component.html', 6 | styles: [ 7 | ] 8 | }) 9 | export class LoginPageComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/auth/pages/register-page/register-page.component.html: -------------------------------------------------------------------------------- 1 |register-page works!
2 | -------------------------------------------------------------------------------- /src/app/auth/pages/register-page/register-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-register-page', 5 | templateUrl: './register-page.component.html', 6 | styles: [ 7 | ] 8 | }) 9 | export class RegisterPageComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/heroes/heroes-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { LayoutPageComponent } from './pages/layout-page/layout-page.component'; 4 | import { NewPageComponent } from './pages/new-page/new-page.component'; 5 | import { SearchPageComponent } from './pages/search-page/search-page.component'; 6 | import { ListPageComponent } from './pages/list-page/list-page.component'; 7 | import { HeroPageComponent } from './pages/hero-page/hero-page.component'; 8 | 9 | 10 | // localhost:4200/heroes 11 | const routes: Routes = [ 12 | { 13 | path: '', 14 | component: LayoutPageComponent, 15 | children: [ 16 | { path: 'new-hero', component: NewPageComponent }, 17 | { path: 'search', component: SearchPageComponent }, 18 | { path: 'edit/:id', component: NewPageComponent }, 19 | { path: 'list', component: ListPageComponent }, 20 | { path: ':id', component: HeroPageComponent }, 21 | { path: '**', redirectTo: 'list' }, 22 | ] 23 | } 24 | ]; 25 | 26 | @NgModule({ 27 | imports: [RouterModule.forChild(routes)], 28 | exports: [RouterModule] 29 | }) 30 | export class HeroesRoutingModule { } 31 | -------------------------------------------------------------------------------- /src/app/heroes/heroes.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { HeroesRoutingModule } from './heroes-routing.module'; 5 | import { HeroPageComponent } from './pages/hero-page/hero-page.component'; 6 | import { LayoutPageComponent } from './pages/layout-page/layout-page.component'; 7 | import { ListPageComponent } from './pages/list-page/list-page.component'; 8 | import { NewPageComponent } from './pages/new-page/new-page.component'; 9 | import { SearchPageComponent } from './pages/search-page/search-page.component'; 10 | 11 | 12 | @NgModule({ 13 | declarations: [ 14 | HeroPageComponent, 15 | LayoutPageComponent, 16 | ListPageComponent, 17 | NewPageComponent, 18 | SearchPageComponent 19 | ], 20 | imports: [ 21 | CommonModule, 22 | HeroesRoutingModule 23 | ] 24 | }) 25 | export class HeroesModule { } 26 | -------------------------------------------------------------------------------- /src/app/heroes/pages/hero-page/hero-page.component.html: -------------------------------------------------------------------------------- 1 |hero-page works!
2 | -------------------------------------------------------------------------------- /src/app/heroes/pages/hero-page/hero-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-hero-page', 5 | templateUrl: './hero-page.component.html', 6 | styles: [ 7 | ] 8 | }) 9 | export class HeroPageComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/heroes/pages/layout-page/layout-page.component.html: -------------------------------------------------------------------------------- 1 |list-page works!
2 | -------------------------------------------------------------------------------- /src/app/heroes/pages/list-page/list-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-list-page', 5 | templateUrl: './list-page.component.html', 6 | styles: [ 7 | ] 8 | }) 9 | export class ListPageComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/heroes/pages/new-page/new-page.component.html: -------------------------------------------------------------------------------- 1 |new-page works!
2 | -------------------------------------------------------------------------------- /src/app/heroes/pages/new-page/new-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-new-page', 5 | templateUrl: './new-page.component.html', 6 | styles: [ 7 | ] 8 | }) 9 | export class NewPageComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/heroes/pages/search-page/search-page.component.html: -------------------------------------------------------------------------------- 1 |search-page works!
2 | -------------------------------------------------------------------------------- /src/app/heroes/pages/search-page/search-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-search-page', 5 | templateUrl: './search-page.component.html', 6 | styles: [ 7 | ] 8 | }) 9 | export class SearchPageComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/material/material.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | 4 | @NgModule({ 5 | exports: [] 6 | }) 7 | export class MaterialModule { } 8 | -------------------------------------------------------------------------------- /src/app/shared/pages/error404-page/error404-page.component.html: -------------------------------------------------------------------------------- 1 |error404-page works!
2 | -------------------------------------------------------------------------------- /src/app/shared/pages/error404-page/error404-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-error404-page', 5 | templateUrl: './error404-page.component.html', 6 | styles: [ 7 | ] 8 | }) 9 | export class Error404PageComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Error404PageComponent } from './pages/error404-page/error404-page.component'; 3 | 4 | 5 | 6 | @NgModule({ 7 | declarations: [ 8 | Error404PageComponent 9 | ], 10 | exports: [ 11 | Error404PageComponent 12 | ] 13 | }) 14 | export class SharedModule { } 15 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Klerith/angular-heroes-app/46d45f4b693f19c36f2a6feccfe3c5d7eeccaee6/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Klerith/angular-heroes-app/46d45f4b693f19c36f2a6feccfe3c5d7eeccaee6/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |