Angular

Edwar Diaz Ruiz

Estudiante de ultimos semestres de ingenieria de sistemas

Desarrolador WEB full stack

BOTOOM
SrBotom
@sr.botom
SR.BOTOM
eddiazr@correo.udistrital.edu.co

que necesitamos pasa trabajar con angular?

instalaciones necesarias

extenciones en editores (por comididad)
Git
Node js
Angular cli

si quieres añadir mas

Font Awesome
Bootstrap
Nebular
Angular Material
npm

crear un proyecto

ng new [nombre del proyecto]

correr el servidor del proyecto

ng serve
npm start

crear nuevos elementos

componentes

ng generate component [directorio]/[nombre del componente]

servicios

ng generate service [directorio]/[nombre del componente]

pipes

ng generate pipe [directorio]/[nombre del componente]

creacion de componentes

estilos
service

imports necesarios


import {RouterModule} from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule  } from '@angular/core';
// rutas
import {APP_ROUTING} from './app.routes';

imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule ,
    RouterModule.forRoot(APP_ROUTING, {useHash: true})
  ],

creacion de rutas

app.router.ts


							import { Routes } from '@angular/router';
							import { HomeComponent } from './components/home/home.component';
							import { ResposableComponent } from './components/resposable/resposable.component';

							const APP_ROUTES: Routes = [
							  { path: 'home', component: HomeComponent },
							  { path: 'responsable', component: ResposableComponent },
							//   { path: 'artist/:id', component: ArtistaComponent },
							  { path: '', pathMatch: 'full', redirectTo: 'home' },
							  { path: '**', pathMatch: 'full', redirectTo: 'home' }
							];
							
							export const APP_ROUTING = (APP_ROUTES);
					

								
					

							 routerLinkActive="active"
								Responsable

directivas

Ng-If

Ng-For

NgModules


							[(ngModel)]="nombres"

service

publicacion

npm i angular-cli-ghpages --save-dev
ng build --prod --base-href "https://[usuario github].github.io/[nombre del repo]/"
npx angular-cli-ghpages --dir=dist/[nombre del proyecto]