Primeros pasos con Angular 2

Instalar angular2 con angular-cli

Este ejemplo es una configuración rápida de Angular 2 y cómo generar un proyecto de ejemplo rápido.

Requisitos previos:

Abra una terminal y ejecute los comandos uno por uno:

npm install -g @angular/cli

o

yarn global add @angular/cli

dependiendo de su elección de administrador de paquetes.

El comando anterior instala @angular/cli globalmente, agregando el ejecutable ng a PATH.

Para configurar un nuevo proyecto

Navega con el terminal a una carpeta donde quieras configurar el nuevo proyecto.

Ejecute los comandos:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Eso es todo, ahora tiene un proyecto de ejemplo simple hecho con Angular 2. Ahora puede navegar hasta el enlace que se muestra en la terminal y ver qué se está ejecutando.

Para agregar a un proyecto existente

Navegue a la raíz de su proyecto actual.

Ejecute el comando:

ng init

Esto agregará el andamiaje necesario a su proyecto. Los archivos se crearán en el directorio actual, así que asegúrese de ejecutar esto en un directorio vacío.

Ejecutar el proyecto localmente

Para ver e interactuar con su aplicación mientras se ejecuta en el navegador, debe iniciar un servidor de desarrollo local que aloje los archivos de su proyecto.

ng serve

Si el servidor se inició correctamente, debería mostrar una dirección en la que se está ejecutando el servidor. Suele ser esto:

http://localhost:4200

Fuera de la caja, este servidor de desarrollo local está conectado con Hot Module Reloading, por lo que cualquier cambio en html, mecanografiado o css activará la recarga automática del navegador (pero se puede desactivar si lo desea).

Generación de Componentes, Directrices, Tuberías y Servicios

El comando ng generate <scaffold-type> <name> (o simplemente ng g <scaffold-type> <name>) le permite generar automáticamente componentes Angular:

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component

Hay varios tipos posibles de andamios que angular-cli puede generar:

Tipo de andamio Uso
Módulo ng módulo g mi-nuevo-módulo
Componente ng g componente mi-nuevo-componente
Directiva ng g directiva mi-nueva-directiva
Pipa ng g pipe my-new-pipe
Servicio ng g servicio mi-nuevo-servicio
Clase ng g clase mi-nueva-clase
Interfaz ng g interfaz mi-nueva-interfaz
enumeración ng g enum my-new-enum

También puede reemplazar el nombre del tipo por su primera letra. Por ejemplo:

ng g m my-new-module para generar un nuevo módulo o ng g c my-new-component para crear un componente.

Construcción/Paquetes

Cuando haya terminado de crear su aplicación web Angular 2 y desee instalarla en un servidor web como Apache Tomcat, todo lo que necesita hacer es ejecutar el comando de compilación con o sin el indicador de producción establecido. La producción minimizará el código y lo optimizará para una configuración de producción.

ng build

o

ng build --prod

Luego busque en el directorio raíz de los proyectos una carpeta /dist, que contiene el archivo build.

Si desea los beneficios de un paquete de producción más pequeño, también puede usar la compilación de plantillas antes de tiempo, que elimina el compilador de plantillas de la compilación final:

ng build --prod --aot

Examen de la unidad

Angular 2 proporciona pruebas unitarias integradas, y cada elemento creado por angular-cli genera una prueba unitaria básica, que se puede expandir. Las pruebas unitarias se escriben con jazmín y se ejecutan a través de Karma. Para comenzar a probar, ejecute el siguiente comando:

ng test

Este comando ejecutará todas las pruebas del proyecto y las volverá a ejecutar cada vez que cambie un archivo fuente, ya sea una prueba o un código de la aplicación.

Para obtener más información, también visite: angular-cli github page

Comenzando con Angular 2 sin angular-cli.

Angular 2.0.0-rc.4

En este ejemplo, crearemos un “¡Hola mundo!” aplicación con un solo componente raíz (AppComponent) por simplicidad.

Requisitos previos:

  • Node.js v5 o posterior
  • npm v3 o posterior

Nota: Puede comprobar las versiones ejecutando node -v y npm -v en la consola/terminal.

Paso 1

Cree e ingrese una nueva carpeta para su proyecto. Llamémoslo ejemplo angular2.

mkdir angular2-example
cd angular2-example

Paso 2

Antes de comenzar a escribir el código de nuestra aplicación, agregaremos los 4 archivos que se proporcionan a continuación: package.json, tsconfig.json, typings.json y systemjs.config.js.

Descargo de responsabilidad: Los mismos archivos se pueden encontrar en Inicio rápido oficial de 5 minutos.

package.json: nos permite descargar todas las dependencias con npm y proporciona una ejecución de script simple para facilitar la vida de los proyectos simples. (Debe considerar usar algo como Gulp en el futuro para automatizar tareas).

{
  "name": "angular2-example",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json: configura el transpilador de TypeScript.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json: hace que TypeScript reconozca las bibliotecas que estamos usando.

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

systemjs.config.js - Configura SystemJS (también puede usar webpack).

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

Paso 3

Instalemos las dependencias escribiendo

npm install

en la consola/terminal.

Paso 4

Cree index.html dentro de la carpeta angular2-example.

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app></my-app>
  </body>
</html>

Su aplicación se representará entre las etiquetas my-app.

Sin embargo, Angular aún no sabe qué representar. Para decirle eso, definiremos AppComponent.

Paso 5

Cree una subcarpeta llamada app donde podamos definir los componentes y servicios que componen nuestra aplicación. (En este caso, solo contendrá el código AppComponent y main.ts).

mkdir app

Paso 6

Cree el archivo app/app.component.ts

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

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}

¿Qué esta pasando? Primero, estamos importando el decorador @Component que usamos para darle a Angular la etiqueta HTML y la plantilla para este componente. Luego, estamos creando la clase AppComponent con las variables title y messages que podemos usar en la plantilla.

Ahora veamos esa plantilla:

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>

Estamos mostrando la variable título en una etiqueta h1 y luego hacemos una lista que muestra cada elemento de la matriz messages usando la directiva *ngFor. Para cada elemento de la matriz, *ngFor crea una variable message que usamos dentro del elemento li. El resultado será:

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>

Paso 7

Ahora creamos un archivo main.ts, que será el primer archivo que mirará Angular.

Cree el archivo app/main.ts.

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

Estamos importando la función bootstrap y la clase AppComponent, luego usamos bootstrap para decirle a Angular qué componente usar como raíz.

Paso 8

Es hora de poner en marcha su primera aplicación. Escribe

npm start

en tu consola/terminal. Esto ejecutará un script preparado desde package.json que inicia el servidor lite, abre su aplicación en una ventana del navegador y ejecuta el transpilador TypeScript en modo de observación (por lo que los archivos .ts se transpilarán y el navegador se actualizará cuando guardas los cambios).

¿Ahora que?

Consulte la guía oficial de Angular 2 y los otros temas en la documentación de StackOverflow.

También puede editar AppComponent para usar plantillas externas, estilos o agregar/editar variables de componentes. Debería ver sus cambios inmediatamente después de guardar los archivos.

Primeros pasos con Angular 2 con el backend node.js/expressjs (ejemplo de http incluido)

Crearemos un simple “¡Hola mundo!” aplicación con Angular2 2.4.1 (cambio @NgModule) con un backend node.js (expressjs).

requisitos previos

Luego ejecute npm install -g typescript o yarn global add typescript para instalar Typescript globalmente

Mapa vial

Paso 1

Cree una nueva carpeta (y el directorio raíz de nuestro back-end) para nuestra aplicación. Llamémoslo Angular2-express.

línea de comando:

mkdir Angular2-express
cd Angular2-express

Paso 2

Cree package.json (para dependencias) y app.js (para arranque) para nuestra aplicación node.js.

paquete.json:

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  }
}

app.js:

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

server.listen(process.env.PORT || 9999, function(){
    console.log("Server connected. Listening on port: " + (process.env.PORT || 9999));
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/front' ) );

app.get('/test', function(req,res){ //example http request receiver
  return res.send(myTestVar);
});

//send the index.html on every page refresh and let angular handle the routing
app.get('/*',  function(req, res, next) {
    console.log("Reloading");
    res.sendFile('index.html', { root: __dirname }); 
});

Luego ejecute npm install o yarn para instalar las dependencias.

Ahora nuestra estructura de back-end está completa. Pasemos al front-end.

Paso 3

Nuestro front-end debe estar en una carpeta llamada front dentro de nuestra carpeta Angular2-express.

línea de comando:

mkdir front
cd front

Al igual que hicimos con nuestro back-end, nuestro front-end también necesita los archivos de dependencia. Avancemos y creemos los siguientes archivos: package.json, systemjs.config.js, tsconfig.json

paquete.json:

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "typescript": "2.0.2"
  }
}

systemjs.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    defaultJSExtensions:true,
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ]
}

Luego ejecute npm install o yarn para instalar las dependencias.

Ahora que nuestros archivos de dependencia están completos. Pasemos a nuestro index.html:

index.html:

<html>
  <head>
    <base href="/">
    <title>Angular2-express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Ahora estamos listos para crear nuestro primer componente. Crea una carpeta llamada app dentro de nuestra carpeta front.

línea de comando:

mkdir app
cd app

Hagamos los siguientes archivos llamados main.ts, app.module.ts, app.component.ts

principal.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.módulo.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule    
  ],
  declarations: [ 
    AppComponent
  ],
  providers:[ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

app.component.ts:

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

@Component({
  selector: 'my-app',
  template: 'Hello World!',
  providers: []
})
export class AppComponent { 
  constructor(private http: Http){
    //http get example
    this.http.get('/test')
     .subscribe((res)=>{
       console.log(res);
     });
  }
}

Después de esto, compile los archivos mecanografiados en archivos javascript. Suba 2 niveles desde el directorio actual (dentro de la carpeta Angular2-express) y ejecute el siguiente comando.

línea de comando:

cd ..
cd ..
tsc -p front

Nuestra estructura de carpetas debería verse así:

Angular2-express
├── app.js
├── node_modules
├── package.json
├── front
│   ├── package.json
│   ├── index.html
│   ├── node_modules
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.component.js.map
│   │   ├── app.component.js
│   │   ├── app.module.ts
│   │   ├── app.module.js.map
│   │   ├── app.module.js
│   │   ├── main.ts
│   │   ├── main.js.map
│   │   ├── main.js

Finalmente, dentro de la carpeta Angular2-express, ejecute el comando node app.js en la línea de comando. Abra su navegador favorito y marque localhost:9999 para ver su aplicación.

Pasar por ese molesto proxy de la empresa

Si está intentando ejecutar un sitio Angular2 en su computadora de trabajo con Windows en XYZ MegaCorp, lo más probable es que tenga problemas para acceder al proxy de la empresa.

Hay (al menos) dos administradores de paquetes que necesitan pasar por el proxy:

  1. MNP
  2. Mecanografiados

Para NPM, debe agregar las siguientes líneas al archivo .npmrc:

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/

Para escribir, debe agregar las siguientes líneas al archivo .typingsrc:

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
rejectUnauthorized=false

Es probable que estos archivos aún no existan, por lo que puede crearlos como archivos de texto en blanco. Se pueden agregar a la raíz del proyecto (en el mismo lugar que package.json o puede colocarlos en %HOMEPATH% y estarán disponibles para todos sus proyectos.

La parte que no es obvia y es la razón principal por la que la gente piensa que la configuración del proxy no funciona es el %5C, que es la codificación de URL de \ para separar los nombres de dominio y de usuario. Gracias a Steve Roberts por eso: http://stackoverflow.com/questions/25660936/using-npm-behind-corporate-proxy-pac

Mantener Visual Studios sincronizado con las actualizaciones de NPM y NODE

Paso 1: Ubique su descarga de Node.js, normalmente se instala en C:/archivos de programa/nodejs

Paso 2: Abra Visual Studios y vaya a “Herramientas>Opciones”

Paso 3: En la ventana de opciones, vaya a “Proyectos y soluciones>Herramientas web externas”

Paso 4: Agregue una nueva entrada con su ubicación de archivo Node.js (C:/archivos de programa/nodejs), IMPORTANTE use los botones de flecha en el menú para mover su referencia a la parte superior de la lista.

ingrese la descripción de la imagen aquí

Paso 5: reinicie Visual Studios y ejecute una instalación de npm, en su proyecto, desde la ventana de comandos de npm

¡Sumerjámonos en Angular 4!

¡Angular 4 ya está disponible! En realidad, Angular usa semver desde Angular 2, lo que requiere que se aumente el número principal cuando se introdujeron cambios importantes. El equipo de Angular pospuso funciones que provocan cambios importantes, que se lanzarán con Angular 4. Se omitió Angular 3 para poder alinear los números de versión de los módulos principales, porque el enrutador ya tenía la versión 3.

Según el equipo de Angular, las aplicaciones de Angular 4 ocuparán menos espacio y serán más rápidas que antes. Han separado el paquete de animación del paquete @angular/core. Si alguien no está usando el paquete de animación, el espacio adicional de código no terminará en la producción. La sintaxis de vinculación de plantillas ahora es compatible con la sintaxis de estilo if/else. Angular 4 ahora es compatible con la versión más reciente de Typescript 2.1 y 2.2. Entonces, Angular 4 será más emocionante.

Ahora le mostraré cómo configurar Angular 4 en su proyecto.

Comencemos la configuración de Angular de tres maneras diferentes:

Puede usar Angular-CLI (interfaz de línea de comandos), instalará todas las dependencias por usted.

  • Puedes migrar de Angular 2 a Angular 4.

  • Puedes usar github y clonar el Angular4-boilerplate. (Es el más fácil.😉)

  • Configuración angular usando Angular-CLI (interfaz de línea de comandos).

Antes de comenzar a usar Angular-CLI, asegúrese de tener el nodo instalado en su máquina. Aquí, estoy usando el nodo v7.8.0. Ahora, abra su terminal y escriba el siguiente comando para Angular-CLI.

npm install -g @angular/cli

o

yarn global add @angular/cli

dependiendo del administrador de paquetes que use.

Instalemos Angular 4 usando Angular-CLI.

ng new Angular4-boilerplate

cd Angular4-repetitivo Estamos listos para Angular 4. Es un método bastante fácil y directo.😌

Configuración de Angular al migrar de Angular 2 a Angular 4

Ahora veamos el segundo enfoque. Le mostraré cómo migrar Angular 2 a Angular 4. Para eso, necesita clonar cualquier proyecto de Angular 2 y actualizar las dependencias de Angular 2 con la Dependencia de Angular 4 en su paquete.json de la siguiente manera:

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "^4.0.1",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "typescript": "2.2.2"
   }

Estas son las dependencias principales para Angular 4. Ahora puede instalar npm y luego comenzar a ejecutar la aplicación. Para referencia mi paquete.json.

Configuración angular del proyecto github

Antes de comenzar este paso, asegúrese de tener git instalado en su máquina. Abra su terminal y clone el angular4-boilerplate usando el siguiente comando:

[email protected]:CypherTree/angular4-boilerplate.git

Luego instale todas las dependencias y ejecútelo.

npm install

npm start

Y ya ha terminado con la configuración de Angular 4. Todos los pasos son muy sencillos, por lo que puede optar por cualquiera de ellos.

Estructura de directorios de angular4-repetitivo

Angular4-boilerplate
-karma
-node_modules
-src
   -mocks
   -models
      -loginform.ts
      -index.ts
   -modules
      -app
        -app.component.ts
     -app.component.html
      -login
    -login.component.ts
    -login.component.html
    -login.component.css
      -widget
     -widget.component.ts
     -widget.component.html
     -widget.component.css
    ........    
   -services
       -login.service.ts
    -rest.service.ts
   -app.routing.module.ts
   -app.module.ts
   -bootstrap.ts
   -index.html
   -vendor.ts
-typings
-webpack
-package.json
-tsconfig.json
-tslint.json
-typings.json 

Comprensión básica de la estructura del directorio:

Todo el código reside en la carpeta src.

La carpeta de simulacros es para datos simulados que se utilizan con fines de prueba.

La carpeta del modelo contiene la clase y la interfaz que se usó en el componente.

La carpeta de módulos contiene una lista de componentes como aplicación, inicio de sesión, widget, etc. Todos los componentes contienen archivos mecanografiados, html y css. index.ts es para exportar toda la clase.

La carpeta de servicios contiene una lista de los servicios utilizados en la aplicación. He separado el servicio de descanso y el servicio de componentes diferentes. En resto, el servicio contiene diferentes métodos http. El servicio de inicio de sesión funciona como mediador entre el componente de inicio de sesión y el servicio de descanso.

El archivo app.routing.ts describe todas las rutas posibles para la aplicación.

app.module.ts describe el módulo de la aplicación como componente raíz.

bootstrap.ts ejecutará toda la aplicación.

La carpeta webpack contiene el archivo de configuración del paquete web.

El archivo package.json es para toda la lista de dependencias.

karma contiene la configuración de karma para la prueba unitaria.

node_modules contiene una lista de paquetes de paquetes.

Comencemos con el componente de inicio de sesión. En login.component.html

<form>Dreamfactory - Addressbook 2.0 
 <label>Email</label> <input id="email" form="" name="email" type="email" /> 
 <label>Password</label> <input id="password" form="" name="password" 
 type="password" /> 
 <button form="">Login</button>
</form>

En login.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Form, FormGroup } from '@angular/forms';
import { LoginForm } from '../../models';
import { LoginService } from '../../services/login.service';

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {

    constructor(private loginService: LoginService, private router: Router, form: LoginForm) { }

    getLogin(form: LoginForm): void {
      let username = form.email;
      let password = form.password;
      this.loginService.getAuthenticate(form).subscribe(() => {
          this.router.navigate(['/calender']);
      });
    }
}

Necesitamos exportar este componente en index.ts.

export * from './login/login.component';

necesitamos establecer rutas para iniciar sesión en app.routes.ts

const appRoutes: Routes = [
   {
       path: 'login',
       component: LoginComponent
   },
   ........
   {
       path: '',
       pathMatch: 'full',
       redirectTo: '/login'
   }
];

En el componente raíz, el archivo app.module.ts solo necesita importar ese componente.

.....
import { LoginComponent } from './modules';
......
@NgModule({
    bootstrap: [AppComponent],
    declarations: [
       LoginComponent
       .....
       .....
       ]
      ..... 
  })
  export class AppModule { }

y después de eso, npm install y npm start. ¡Aquí tienes! Puede verificar la pantalla de inicio de sesión en su host local. En caso de cualquier dificultad, puede consultar el repetitivo angular4.

Básicamente, puedo sentir menos paquete de construcción y una respuesta más rápida con la aplicación Angular 4 y aunque encontré exactamente similar a Angular 2 en la codificación.