Programando PHP: Angular 4

Mostrando entradas con la etiqueta Angular 4. Mostrar todas las entradas

Angular 4: Instalar dependencias

Cuando nos descarguemos de Github un proyecto de Angular casi seguro que no tendrá la carpeta node_modules con todos los módulos y dependencias pues no se suele subir al repositorio (se suele meter en el gitIgnore).

Para instalarlos solo hay que ir desde la consola a la carpeta:


npm install

ng serve

Angular 4: CRUD

Para poder usar formularios en app.module.ts:


import { FormsModule } from '@angular/forms';



imports: [

 BrowserModule,

 FormsModule

 ],

Incluir en el index.html los CDN de jquery y bootstrap

En app.component.css:


.lsg {

    border-radius: 4px;

    margin-top: 20px;

    padding: 30px;

    background: #fff;

}

En styles.css:


body {

 background: #02AAB0;  /* fallback for old browsers */

    background: -webkit-linear-gradient(left, #00CDAC, #02AAB0);

    background: -moz-linear-gradient(left, #00CDAC, #02AAB0);

    background: -o-linear-gradient(left, #00CDAC, #02AAB0);

    background: linear-gradient(to right, #00CDAC, #02AAB0);

}

En app.component.ts:


import { Component } from '@angular/core';



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  titulo = 'CRUD de Angular';

  msg:string = '';

  empleados = [

    {

      'nombre': 'Uno',

      'cargo': 'Programador',

      'email': 'uno@gmail.com'

    },

    {

      'nombre': 'Dos',

      'cargo': 'Maquetador',

      'email': 'dos@gmail.com'

    },

    {

      'nombre': 'Tres',

      'cargo': 'Cuentas',

      'email': 'tres@gmail.com'

    },

    {

      'nombre': 'Cuatro',

      'cargo': 'Programador',

      'email': 'cuatro@gmail.com'

    }

  ];



  model:any = {};

  model2:any = {};

  hideUpdate:boolean = true;



  addEmpleado():void {

    this.empleados.push(this.model);

    this.msg = 'campo agregado';

    $("#nombre").val("");

    $("#cargo").val("");

    $("#email").val("");

  }



  deleteEmpleado(i):void {

    var answer = confirm('Estas seguro querer eliminarlo?');

    if(answer) {

      this.empleados.splice(i, 1);

      this.msg = 'campo eliminado';

    }

  }



  myValue;

  editEmpleado(i):void {

    this.hideUpdate = false;

    this.model2.nombre = this.empleados[i].nombre;

    this.model2.cargo = this.empleados[i].cargo;

    this.model2.email = this.empleados[i].email;

    this.myValue = i;

  }



  updateEmpleado():void {

    let i = this.myValue;

    for(let j = 0; j < this.empleados.length; j++){

      if(i == j) {

        this.empleados[i] = this.model2;

        this.msg = 'campo actualizado';

        this.model2 = {};

      }

    }

  }

}

En app.component.html:


<div class="container lsg">

    <div class="row">

      <div class="col-sm-8">

        <h1 class="text-center">

          {{titulo}}

        </h1>

      </div>

      <div class="col-sm-4">

        <div class="alert alert-success alert-dismissable" *ngIf="msg">

          <a href="#" class="close" (click)="closeAlert()">

            &times;

          </a>

          {{msg}}

        </div>

      </div>

    </div>

    <div class="row">

      <div class="col-sm-4">

        <img width="300" src="images/logo.jpg" />

      </div>

      <div class="col-sm-8">

        <h2>Crear:</h2>

        <form class="form-horizontal">

          <div class="form-group">

            <label for="nombre" class="control-label col-sm-2">

              Nombre

            </label>

            <div class="col-sm-10">

              <input type="text" class="form-control" id="nombre"

                name="nombre" [(ngModel)]="model.nombre"

                placeholder="Escribe el nombre"

              >

            </div>

          </div>

          <div class="form-group">

            <label for="position" class="control-label col-sm-2">

              Cargo

            </label>

            <div class="col-sm-10">

              <input type="text" class="form-control" id="cargo"

                name="cargo" [(ngModel)]="model.cargo"

                placeholder="Escribe el cargo"

              >

            </div>

          </div>

          <div class="form-group">

            <label for="email" class="control-label col-sm-2">

              Email

            </label>

            <div class="col-sm-10">

              <input type="text" class="form-control" id="email"

                name="email" [(ngModel)]="model.email"

                placeholder="Escribe el email"

              >

            </div>

          </div>

 

          <div class="form-group">

            <div class="col-sm-10 col-sm-offset-2">

              <button type="submit" class="btn btn-success" (click)="addEmpleado()">

                Guardar

              </button>

            </div>

          </div>

        </form>

      </div>

    </div>

    <div class="row">

      <div class="col-sm-8">

        <h2>Listado de empleados: </h2>

        <table class="table table-bordered">

          <thead>

            <tr>

              <th>Nombre</th>

              <th>Cargo</th>

              <th>Email</th>

              <th>Acciones</th>

            </tr>

          </thead>

          <tbody>

            <tr *ngFor="let item of empleados; let i = index">

              <td>{{item.nombre}}</td>

              <td>{{item.cargo}}</td>

              <td>{{item.email}}</td>

              <td>

                <a (click)="editEmpleado(i)" class="btn btn-success">

                  Modificar

                </a>

                <a (click)="deleteEmpleado(i)" class="btn btn-danger">

                  Borrar

                </a>

              </td>

            </tr>

 

          </tbody>

        </table>

      </div>



      <div class="col-sm-4" [hidden]="hideUpdate">

        <h2>Modificar:</h2>

        <form class="form-horizontal">

          <div class="form-group">

            <label for="nombre" class="control-label col-sm-2">

              Nombre

            </label>

            <div class="col-sm-10">

              <input type="text" class="form-control" id="nombre"

                name="nombre" [(ngModel)]="model2.nombre"

                placeholder="Escribe el nuevo nombre"

              >

            </div>

          </div>

          <div class="form-group">

            <label for="cargo" class="control-label col-sm-2">

              Cargo

            </label>

            <div class="col-sm-10">

              <input type="text" class="form-control" id="cargo"

                name="cargo" [(ngModel)]="model2.cargo"

                placeholder="Escribe el nuevo cargo"

              >

            </div>

          </div>

          <div class="form-group">

            <label for="email" class="control-label col-sm-2">

              Email

            </label>

            <div class="col-sm-10">

              <input type="text" class="form-control" id="email"

                name="email" [(ngModel)]="model2.email"

                placeholder="Escribe el nuevo email"

              >

            </div>

          </div>

 

          <div class="form-group">

            <div class="col-sm-10 col-sm-offset-2">

              <button type="submit" class="btn btn-success" (click)="updateEmpleado()">

                Guardar

              </button>

            </div>

          </div>

        </form>

      </div>

    </div>

  </div>

Angular 4: Creación de componentes. Importación de componentes

En src/app creamos por ejemplo una carpeta common

Dentro de common creamos el fichero header.component.ts


import { Component } from '@angular/core';

import { componentFactoryName } from '@angular/compiler';



@Component({

    selector: 'app-header',

    template: '<h1>Esto va a ser la cabecera</h1>'

})



export class HeaderComponent {

}

Dentro de common creamos el fichero footer.component.ts


import { Component } from '@angular/core';

import { componentFactoryName } from '@angular/compiler';



@Component({

    selector: 'app-footer',

    template: '<h1>Esto va a ser el footer</h1>'

})



export class FooterComponent {

}

Y ahora solo importar en el App principal esos nuevos componentes en app.module.ts:


import { HeaderComponent } from './common/header.component';

import { FooterComponent } from './common/footer.component';



...

declarations: [ AppComponent, HeaderComponent, FooterComponent ],

Y añadirlos al template de app.component.ts:


template: `<app-header></app-header>

              <h1>Hola holitaa mundo {{name}}</h1>

              <app-footer></app-footer>`

Para añadir los CDN de Bootstrap y JQuery hacerlo en index.html

En nuestros componentes es mucho más legible usar templateUrl en vez de template:


@Component({

    selector: 'app-header',

    templateUrl: './header.component.html'

})

Y así nos creamos un fichero header.component.html donde meter todo el HTML

Si queremos que cada componente tenga sus propios CSS:

right.component.ts:


@Component({

    selector: 'app-right',

    templateUrl: './right.component.html',

    styleUrls: ['./right.component.css']

})

right.component.html:


<div class="col-md-8">

    <p class="bloqueRight">Zona Derecha</p>

</div>

right.component.css:


.bloqueRight {

    border:1px solid #000;

    background-color: #2C2961;

    color:#FFF;

    height:300px;

}

VARIABLES EN LOS COMPONENTES

En el right.component.ts:


export class RightComponent {

    titulo:string = "En un lugar de la Mancha";

    arrNum:Array<string> = ["uno", "dos", "tres", "cuatro", "cinco"];

}

En el right.component.html:


<div class="col-md-8">

    <div class="bloqueRight">

        <p>{{ titulo }}</p>

      

            <ul>

                <li *ngFor="let item of arrNum"> {{item}}</li>

            </ul>

      

    </div>

</div>

Angular 4: Instalar desde Quickstart

Instalar GIT (si no lo tienes instalado de antes)


https://git-scm.com/

Para inicializar git bash:


git init

git clone https://github.com/angular/quickstart

Inciso, en esta url puedes encontrar todos los módulos ya creados por otros programadores que queramos añadir a nuestro package.js
https://www.npmjs.com/

Desde el Git Bash ve a esa carpeta quickstart
Para instalar todas las dependencias de mi proyecto (las que hay en package.js) desde Git Bash:


npm install

Para arrancarlo desde el Git Bash:


npm start

Angular 4


1) instalar la última versión node.js

2) instalar Visual Studio Code

3) Desde la consola:

npm install -g @angular/cli

ng new myfirstapp

4) cd myfirstapp

ng serve

5) Navegador: http://localhost:4200/

Crear componente desde la consola:


ng generate component nuevo

Crear un nueva app:


// prefix te cambia app por el prefix q le pongas, en este caso lsg

ng new nggallery --prefix lsg



// Para saber todos los flags que le puedes pasar a un comando:

ng g c --help

CREAR COMPONENTE:


// -is --flat es para que lo cree en el mismo directorio

ng g c navbar -is --flat



ng g c galeria

CREAR MODELO:


ng g cl image

ccc

Angular 4: Instalar dependencias

Angular 4: CRUD

Angular 4: Creación de componentes. Importación de componentes

Angular 4: Instalar desde Quickstart

Angular 4