Skip to content

Commit

Permalink
Practice
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jhooomn
Jhooomn committed Jul 17, 2019
1 parent 574a4ce commit 69635f8
Show file tree
Hide file tree
Showing 10 changed files with 235 additions and 138 deletions.
232 changes: 117 additions & 115 deletions angular.json
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,122 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"testing-ng-s-crud": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/testing-ng-s-crud",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"testing-ng-s-crud": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/testing-ng-s-crud",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "testing-ng-s-crud:build"
},
"configurations": {
"production": {
"browserTarget": "testing-ng-s-crud:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "testing-ng-s-crud:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "testing-ng-s-crud:serve"
},
"configurations": {
"production": {
"devServerTarget": "testing-ng-s-crud:serve:production"
}
}
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "testing-ng-s-crud:build"
},
"configurations": {
"production": {
"browserTarget": "testing-ng-s-crud:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "testing-ng-s-crud:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "testing-ng-s-crud:serve"
},
"configurations": {
"production": {
"devServerTarget": "testing-ng-s-crud:serve:production"
}
}
}
}
}},
"defaultProject": "testing-ng-s-crud"
},
"defaultProject": "testing-ng-s-crud"
}
15 changes: 15 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
"@angular/platform-browser": "~8.0.3",
"@angular/platform-browser-dynamic": "~8.0.3",
"@angular/router": "~8.0.3",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"popper.js": "^1.15.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
Expand Down
Binary file added screen/Captura.PNG
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 39 additions & 20 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,40 @@
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<nav class="navbar navbar-dark bg-dark">
<a href="/" class="navbar-brand">
Angular C.R.U.D
</a>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 mt-4">
<ul class="list-group">
<li *ngFor="let u of userArray" class="list-group-item list-group-item-action" (click)="toEdit(u)" [class.active]="u == selectedUser">
<span class="badge badge-primary">{{u.id}}</span> {{u.username}} - {{u.country}}
</li>
</ul>

<router-outlet></router-outlet>
<div class="card mt-4">
<div class="card-body">
<div class="card-title">
<strong>Add an User</strong>
</div>
<div class="form-group">
<input type="text" [(ngModel)]="selectedUser.username" placeholder="Insert a Username" class="form-control" required>
</div>
<div class="form-group">
<input type="text" [(ngModel)]="selectedUser.country" placeholder="Insert a Country" class="form-control" required>
</div>
<button class="btn btn-primary mr-1" (click)="addOrEdit()">
Add
</button>
<button *ngIf="selectedUser.id !== 0" (click)="delete()" class="btn btn-danger ml-1">
Delete
</button>
</div>
</div>

</div>
<div class="col-md-4 ">
<img width="300 " alt="Angular Logo " src="https://noticias.mapfre.com/wp-content/uploads/2017/10/Icono-libro.png ">
</div>
</div>
</div>
38 changes: 36 additions & 2 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,44 @@
import { Component } from '@angular/core';

import { User } from './models/user'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testing-ng-s-crud';
selectedUser: User = new User();
userArray: User[] = [
{
id: 1,
username: 'Jhooomn',
country: 'Colombia'
},
{
id: 2,
username: 'Raul',
country: 'Brasil'
},
{
id: 3,
username: 'Maverick',
country: 'Rusia'
}
];
addOrEdit() {
if (this.selectedUser.id == 0) {
this.selectedUser.id = this.userArray.length + 1;
this.userArray.push(this.selectedUser);
}
this.selectedUser = new User();
}
toEdit(user: User) {
this.selectedUser = user;
}
delete() {
if (confirm('Are you sure you want to delete this guy?')) {
this.userArray = this.userArray.filter(x => x != this.selectedUser);
this.selectedUser = new User();
}
}

}
Loading

0 comments on commit 69635f8

Please sign in to comment.