Skip to content

tutoriales / ang-01-holamundo

Go to a project
Toggle navigation
Toggle navigation pinning
Commit d88d7639 by aborella
Options

fin sesion 1

1 parent 24bbf133
Expand all
Inline Side-by-side
Showing 15 changed files with 202 additions and 55 deletions
package.json
{ {
"name": "base", "name": "01-hola-mundo",
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
"build": "ng build", "build": "ng build",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e" "e2e": "ng e2e"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "~8.2.14", "@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14", "@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14", "@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14", "@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14", "@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14", "@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14", "@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14", "@angular/router": "~8.2.14",
"rxjs": "~6.4.0", "rxjs": "~6.4.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.9.1" "zone.js": "~0.9.1"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.803.20", "@angular-devkit/build-angular": "~0.803.20",
"@angular/cli": "~8.3.20", "@angular/cli": "~8.3.20",
"@angular/compiler-cli": "~8.2.14", "@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14", "@angular/language-service": "~8.2.14",
"@types/node": "~8.9.4", "@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8", "@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0", "codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0", "jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1", "jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0", "karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0", "karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1", "karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1", "karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0", "karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0", "protractor": "~5.4.0",
"ts-node": "~7.0.0", "ts-node": "~7.0.0",
"tslint": "~5.15.0", "tslint": "~5.15.0",
"typescript": "~3.5.3" "typescript": "~3.5.3"
} }
} }
\ No newline at end of file \ No newline at end of file
src/app/app.component.ts
...@@ -6,5 +6,9 @@ import { Component } from '@angular/core'; ...@@ -6,5 +6,9 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
export class AppComponent { export class AppComponent {
title = 'base'; title = 'Angular ';
otro = 'aaaa';
nombre = 'Adrian';
apellido = 'Borella';
} }
src/app/app.module.ts
...@@ -2,10 +2,16 @@ import { BrowserModule } from '@angular/platform-browser'; ...@@ -2,10 +2,16 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component'
import { BodyComponent } from './components/body/body.component';
import { FooterComponent } from './components/footer/footer.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent AppComponent,
HeaderComponent,
BodyComponent,
FooterComponent
], ],
imports: [ imports: [
BrowserModule BrowserModule
......
src/app/components/body/body.component.html 0 → 100644
<div class='container m-4'>
<div class="row">
<div class="col">
<h1>ngIf</h1>
<button class="btn btn-primary btn-block" (click)="mostrarOcular()">
Mostrar / Ocultar
</button>
<div *ngIf="mostrarTarjeta" class="card border-secondary mb-5" style="width: 100%;">
<div class="card-body">
<h4 class="card-title">{{ frase.autor }}</h4>
<p class="card-text">{{ frase.mensaje }}</p>
</div>
</div>
</div>
<div class="col">
<h1>ngFor</h1>
<ul class="list-group">
<li *ngFor="let item of personas; let i = index" class="list-group-item d-flex justify-content-between align-items-center">
{{ i +1 }} - {{ item }}
</li>
</ul>
</div>
</div>
</div>
\ No newline at end of file \ No newline at end of file
src/app/components/body/body.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-body',
templateUrl: './body.component.html'
})
export class BodyComponent {
frase: any = {
mensaje: 'Un gran poder requiere una gran responsabilidad',
autor: 'Ben Parker'
};
mostrarTarjeta: boolean;
personas: string[];
constructor() {
this.mostrarTarjeta = true;
this.personas = ['Adrian Borella', 'Noelia Cordoba', 'Juan Pablo Dure']
}
mostrarOcular() {
this.mostrarTarjeta = !this.mostrarTarjeta;
}
}
src/app/components/footer/footer.component.html 0 → 100644
<footer class='footer bg-dark text-center'>
<div class="container m-2">
<p>&copy; Adrian Borella {{ year }}</p>
</div>
</footer>
\ No newline at end of file \ No newline at end of file
src/app/components/footer/footer.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FooterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/footer/footer.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
year: number;
constructor() {
this.year = new Date().getFullYear();
}
ngOnInit() {
}
}
src/app/components/header/header.component.html 0 → 100644
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
\ No newline at end of file \ No newline at end of file
src/app/components/header/header.component.ts 0 → 100644
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html'
})
export class HeaderComponent { }
\ No newline at end of file \ No newline at end of file
src/assets/css/bootstrap.css 0 → 100644
This diff could not be displayed because it is too large.
src/index.html
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Base</title> <title>Base</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/bootstrap.css">
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html>
</html>
\ No newline at end of file \ No newline at end of file
src/styles.css
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
.footer {
color: white;
position: fixed;
bottom: 0px;
width: 100%;
}
\ No newline at end of file \ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!