Angular 2 Tutorial
Empezando con Angular 2

Observaciones

Versiones

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:

• Node.js v4 o superior.
• npm v3 o mayor o hilo .

Abra un terminal y ejecute los comandos uno por uno:

npm install -g @angular/cli

o

yarn global add @angular/cli

Dependiendo de su elección del gestor de paquetes.

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

Para configurar un nuevo proyecto

Navegue con el terminal a una carpeta donde desee configurar el nuevo proyecto.

Ejecutar los comandos:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

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

Para agregar a un proyecto existente

Navegue a la raíz de su proyecto actual.

Ejecuta el comando:

ng init

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

Ejecutando 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 para su proyecto.

ng serve

Si el servidor se inició correctamente, debe mostrar una dirección en la que se ejecuta el servidor. Por lo general es esto:

http://localhost:4200

Fuera de la caja, este servidor de desarrollo local está conectado con la recarga de módulos calientes, por lo que cualquier cambio en el html, mecanografiado o css, hará que el navegador se vuelva a cargar automáticamente (pero se puede desactivar si se desea).

Generación de componentes, directivas, tuberías y servicios.

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

# 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:

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

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

Construcción / Bundling

Cuando haya terminado de construir su aplicación web Angular 2 y desee instalarla en un servidor web como Apache Tomcat, todo lo que debe hacer es ejecutar el comando de compilación con o sin el conjunto de indicadores de producción. La producción minimiza el código y se optimiza para un entorno de producción.

ng build

o

ng build --prod

Luego busque en la carpeta raíz del proyecto una carpeta /dist , que contiene la compilación.

Si desea obtener los beneficios de un paquete de producción más pequeño, también puede usar la compilación de la plantilla Anticipada, que elimina el compilador de la plantilla 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 puede ampliarse. Las pruebas unitarias se escriben con jazmín y se ejecutan a través de Karma. Para iniciar la prueba ejecuta el siguiente comando:

ng test

Este comando ejecutará todas las pruebas en el 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 más información también visite: página angular-cli github

Primeros pasos 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 verificar las versiones ejecutando los node -v y npm -v en la consola / terminal.

Paso 1

Crea e ingresa una nueva carpeta para tu proyecto. Llamémoslo angular2-example .

mkdir angular2-example
cd angular2-example

Paso 2

Antes de comenzar a escribir nuestro código de 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 el 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 hacer la vida más fácil para proyectos simples. (Debería 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 transpiler 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.

Etapa 4

Crea 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 procesará entre las etiquetas my-app .

Sin embargo, Angular todavía no sabe qué renderizar. Para decirle eso, definiremos AppComponent .

Paso 5

Cree una subcarpeta llamada app donde podamos definir los componentes y servicios que conforman nuestra aplicación. (En este caso, sólo se va a contener el AppComponent código y main.ts ).

mkdir app

Paso 6

Crea 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 y la plantilla HTML para este componente. Luego, estamos creando la clase AppComponent con variables de 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 de title en una etiqueta h1 y luego hacemos una lista que muestra cada elemento de la matriz de messages usando la directiva *ngFor . Para cada elemento de la matriz, *ngFor crea una variable de 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 Angular main.ts .

Crea 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 encender tu primera aplicación. Tipo

npm start

en su consola / terminal. Esto ejecutará una secuencia de comandos preparada desde package.json que inicia lite-server, abre su aplicación en una ventana del navegador y ejecuta el transpiler TypeScript en modo de vigilancia (por lo .ts archivos .ts se transcribirán y el navegador se actualizará cuando guarde 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.

Mantener Visual Studios sincronizados con las actualizaciones de NPM y NODE

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

Paso 2: Abre Visual Studios y navega 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: / program files / nodejs), IMPORTANTE use los botones de flecha en el menú para mover su referencia a la parte superior de la lista.

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

Conseguir a través de esa empresa molesta proxy

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

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

1. NPM
2. Mecanografía

Para NPM necesita 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 Typings necesita 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 evidente y es la razón principal por la que la gente piensa la configuración del proxy no están funcionando es el %5C , que es la codificación URL de la \ para separar los nombres de dominio y de usuario. Gracias a Steve Roberts por eso: usar npm detrás del proxy corporativo .pac

Comenzando con Angular 2 con node.js / expressjs backend (ejemplo http incluido)

Vamos a crear un simple "¡Hola mundo!" aplicación con Angular2 2.4.1 (cambio @NgModule ) con un nodo.js (expressjs) backend.

Prerrequisitos

• Node.js v4.xx o superior
• npm v3.xx o superior o hilo

A continuación, ejecute npm install -g typescript o yarn global add typescript npm install -g typescript 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 el package.json (para dependencias) y app.js (para bootstrapping) 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 }); 
});

A continuación, ejecute una npm install o yarn para instalar las dependencias.

Ahora nuestra estructura de back-end está completa. Vamos a pasar al frente.

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. Continuemos y systemjs.config.js 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/*"
  ]
}

A continuación, ejecute una npm install o yarn para instalar las dependencias.

Ahora que nuestros archivos de dependencia están completos. Vayamos 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

main.ts:

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

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

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

app.module.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. Vaya a 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 debe verse como:

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 comandos. Abra su navegador favorito y verifique localhost:9999 para ver su aplicación.

¡Vamos a sumergirnos 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 mayor cuando se introdujeron cambios de ruptura. El equipo de Angular pospuso las características que causan cambios de última hora, que se lanzarán con Angular 4. Angular 3 se omitió para poder alinear los números de versión de los módulos principales, porque el Router ya tenía la versión 3.

Según el equipo de Angular, las aplicaciones de Angular 4 consumirá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á utilizando el paquete de animación, el espacio adicional de código no terminará en la producción. La sintaxis de enlace de plantilla ahora admite 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 va a ser más emocionante.

Ahora te mostraré cómo hacer la configuración de Angular 4 en tu proyecto.

Comencemos la configuración angular de tres maneras diferentes:

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

• Puede migrar de Angular 2 a Angular 4.

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

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

Antes de comenzar a usar Angular-CLI, asegúrese de tener un 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 gestor de paquetes que utilices.

Instalemos Angular 4 utilizando Angular-CLI.

ng new Angular4-boilerplate

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

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

Ahora vamos a ver 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 principales dependencias de Angular 4. Ahora puede instalar npm y luego npm comenzar a ejecutar la aplicación. Para referencia mi package.json.

Disposició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 la placa de calderas angular4 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 para que pueda optar a cualquiera de ellos.

Estructura del directorio de la placa de placa angular4

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 para fines de prueba.

La carpeta modelo contiene la clase y la interfaz que se utiliza 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.

carpeta de servicios contiene la lista de servicios utilizados en la aplicación. He separado el servicio de descanso y el servicio de diferentes componentes. En servicio de reposo 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 webpack.

El archivo package.json es para todas las listas de dependencias.

El karma contiene la configuración del karma para la prueba de la unidad.

node_modules contiene la lista de paquetes de paquetes.

Permite comenzar 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 a 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. ¡Aqui tienes! Puede consultar la pantalla de inicio de sesión en su localhost. En caso de cualquier dificultad, puede referirse a la placa de caldera angular4.

Básicamente, puedo sentir que el paquete de construcción es menor 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.