CHULETA ANGULAR 4

Instrucciones CLI:

npm install -g @angular/cli    //instalación global

//instalar una versión anterior
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@1.0.0-beta.14

ng new my-app                       //crear un proyecto nuevo

cd my-app                           //desplegar aplicación 
ng serve --open                     //por defecto http://localhost:4200/


ng g component my-new-component     //crear un componente
ng g directive my-new-directive     //crear una directiva 
ng g pipe my-new-pipe               //crear un filtro
ng g service my-new-service         //crear un servicio 
ng g class my-new-class             //crear una clase
ng g interface my-new-interface     //crear una interfaz
ng g module my-module               //crear un módulo

//compilar en distintos entornos
# equivalentes
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# equivalentes
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

#entornos definidos en angular-cli.json
"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

//crear un proyecto con Material
npm install --save @angular/material
npm install --save @angular/animations

Binding

//One Way Binding
{{pageTitle}}

//Two Way Binding
      

//Property Binding
               

//Attribute Binding			 
                         

//Class Binding    
Selected

//ngClass
{{customer.name}}

//Style Binding

//ngStyle
				
{{customer.name}}

//Component Binding
 				

//Directive Binding
Customer

//Event Binding
						
$event

Rutas y navegación:

import {routing} from './app.routing';

//configuración rutas para navegación app.routing.ts
const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
  	path: 'register/:parametro',
  	component: Register
  },
  {
    path: 'login',
    component: Login
  }
  
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

//marca donde se carga el componente de la ruta activo

//crear enlaces a las diferentes vistas basandose en las rutas

Directivas:

//ngStyle
//ngStyle nos permite modificar los estilos del elemento sobre 
//el cual se aplica.
Contenido

//ngClass
//Con esta directiva (ngClass), modificamos el valor del atributo 
//clase asociado acualquier elemento de la plantilla de nuestro componente
Contenido

// ngIf
//La directiva ngIf condiciona el código HTML de nuestras plantillas en
//función de si la expresión evaluada es true o false.

//ngFor
//Nos permite iterar a partir de una colección (episodios) y en cada vuelta
//del bucle, podremos trabajar con cada uno de los elementos iterados,
//dentro de la variable específica (episodio).
// la directiva ngFor nos ofrece otra serie de
//variables relacionadas con el contexto del bucle:
//• index - nos devuelve la posición que nos encontramos del bucle,
//comenzando desde cero.
//• first - indica verdadero si es el primer elemento de la lista.
//• last - devuelve verdadero si nos encontramos en el ultimo elemento
//de la lista.
//• even - devuelve true si el elemento que estamos iterando es par.
//• odd - devuelve true si el elemento es impar.
{{i}}- {{episodio.title}} {{first}}

//ngSwitch
//• Se define la expresión que vamos a evaluar con la directiva ngSwitch.
//En este caso, se está evaluando una variable de tipo numérica.
//• Con la directiva ngSwitchCase analizamos los diferentes casos que
//vamos a admitir. Dependiendo del valor de la expresión evaluada
//visualizamos el caso que corresponda.
//• Si ninguno de los casos se evalúa correctamente se muestra el caso
//marcado con la directiva ngSwitchDefault.
//• Con este tipo de directivas hay que tener cuidado porque puede ser
//muy costosa la creación o destrucción de los elementos con los que
//estemos trabajando.
@Component({
selector: 'my-app',
template: `
Opción 1
Opción 2
Opción 3
Opción 4
 Opcion 1
 Opcion 2
 Opcion 3
 Close
all
`,
styles: []
})
export class AppComponent {
opcion: number;
setDoor(num:number){
this.opcion = num;
}
}

Leer más