Lemus.webs.upv.es



Practica 1- Esqueleto básico de una aplicaciónInstalación para poder trabajar con MaterialDesignng g m MaterialDesignng add @angular/materialEn material-design.module.ts123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105import { NgModule, ModuleWithProviders } from '@angular/core';import { CommonModule } from '@angular/common';import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';import { MatIconRegistry } from '@angular/material/icon';import { MatAutocompleteModule } from '@angular/material/autocomplete';import { MatBadgeModule } from '@angular/material/badge';import { MatButtonModule } from '@angular/material/button';import { MatButtonToggleModule } from '@angular/material/button-toggle';import { MatCardModule } from '@angular/material/card';import { MatCheckboxModule } from '@angular/material/checkbox';import { MatChipsModule } from '@angular/material/chips';import { MatStepperModule } from '@angular/material/stepper';import { MatDatepickerModule } from '@angular/material/datepicker';import { MatDialogModule } from '@angular/material/dialog';import { MatExpansionModule } from '@angular/material/expansion';import { MatFormFieldModule } from '@angular/material/form-field';import { MatGridListModule } from '@angular/material/grid-list';import { MatIconModule } from '@angular/material/icon';import { MatInputModule } from '@angular/material/input';import { MatListModule } from '@angular/material/list';import { MatMenuModule } from '@angular/material/menu';import { MatPaginatorModule } from '@angular/material/paginator';import { MatProgressBarModule } from '@angular/material/progress-bar';import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';import { MatRadioModule } from '@angular/material/radio';import { MatRippleModule } from '@angular/material/core';import { MatSelectModule } from '@angular/material/select';import { MatSidenavModule } from '@angular/material/sidenav';import { MatSliderModule } from '@angular/material/slider';import { MatSlideToggleModule } from '@angular/material/slide-toggle';import { MatSnackBarModule } from '@angular/material/snack-bar';import { MatSortModule } from '@angular/material/sort';import { MatTableModule } from '@angular/material/table';import { MatTabsModule } from '@angular/material/tabs';import { MatToolbarModule } from '@angular/material/toolbar';import { MatTooltipModule } from '@angular/material/tooltip';import { MatTreeModule } from '@angular/material/tree';import { MatBottomSheetModule } from '@angular/material/bottom-sheet';import { MatDividerModule } from '@angular/material/divider';@NgModule({ declarations: [], imports: [ CommonModule ], exports: [ MatFormFieldModule, MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule, ],})export class MaterialDesignModule { constructor(public matIconRegistry: MatIconRegistry) { // matIconRegistry.registerFontClassAlias('fontawesome', 'fa'); } static forRoot(): ModuleWithProviders { return { ngModule: MaterialDesignModule, providers: [MatIconRegistry] }; }}En app.module.ts123456789101112131415161718192021222324import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './ponent';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { MaterialDesignModule } from './material-design/material-design.module';@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MaterialDesignModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { }Creación de los componentes básicos de una aplicación webng g c headerng g c footerng g c homeng g c notFoundEn ponent.html<app-header></app-header><router-outlet></router-outlet><app-footer></app-footer>En app-routing.module.tsconst routes: Routes = [ {path: '', redirectTo: 'home', pathMatch: 'full'}, {path: 'home', component: HomeComponent}, {path: '**', component: NotFoundComponent} ];Instalamos el paquete @angular/cdknpm install @angular/cdk –saveInstalamos la librería MDBoostreapnpm install angular-bootstrap-md –saveEn app.module.ts1234567891011121314151617181920212223242526import {BrowserModule} from '@angular/platform-browser';import {NgModule} from '@angular/core';import {AppRoutingModule} from './app-routing.module';import {AppComponent} from './ponent';import {BrowserAnimationsModule} from '@angular/platform-browser/animations';import {MaterialDesignModule} from './material-design/material-design.module';import {MDBBootstrapModule} from 'angular-bootstrap-md';@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MaterialDesignModule, MDBBootstrapModule.forRoot() ], providers: [], bootstrap: [AppComponent]})export class AppModule { }En angular.json1234567891011121314151617"styles": [ "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node_modules/angular-bootstrap md/assets/scss/bootstrap/bootstrap.scss", "node_modules/angular-bootstrap-md/assets/scss/mdb.scss", "node_modules/animate.css/animate.css", "src/styles.scss"],"scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/hammerjs/hammer.min.js"]Instalamos otras librerías externasnpm install -–save chart.js@2.5.0 @types/chart.js @fortawesome/fontawesome-free hammerjs animate.cssEn ponent.html1234567891011<div style="display: block"> <canvas mdbChart [chartType]="chartType" [datasets]="chartDatasets" [labels]="chartLabels" [colors]="chartColors" [options]="chartOptions" [legend]="true" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> </canvas> </div>En ponent.ts1234567891011121314151617181920212223242526272829303132333435363738394041import { Component} from '@angular/core';@Component({ selector: 'app-home', templateUrl: './ponent.html', styleUrls: ['./ponent.scss']})export class HomeComponent { public chartType: string = 'line'; public chartDatasets: Array<any> = [ { data: [65, 59, 80, 81, 56, 55, 40], label: 'My First dataset' }, { data: [28, 48, 40, 19, 86, 27, 90], label: 'My Second dataset' } ]; public chartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; public chartColors: Array<any> = [ { backgroundColor: 'rgba(105, 0, 132, .2)', borderColor: 'rgba(200, 99, 132, .7)', borderWidth: 2, }, { backgroundColor: 'rgba(0, 137, 132, .2)', borderColor: 'rgba(0, 10, 130, .7)', borderWidth: 2, } ]; public chartOptions: any = { responsive: true }; public chartClicked(e: any): void { } public chartHovered(e: any): void { }} ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download