Cómo comenzar a trabajar en AngularJS 2.0

AngularJS 2 es un marco de desarrollo de aplicaciones móviles y web de código abierto. Hoy en día es ampliamente utilizado para el desarrollo de aplicaciones de escritorio, ya que es un marco base de módulos. Permítame guiarlo por la guía detallada para que pueda comprender cómo usar su módulo o componente en su aplicación para importarlo.

Estructura del archivo de aplicación AngularJS 2

Tiene un archivo HTML (index.html) y dos archivos de script de tipo en el directorio de la aplicación (app.component.ts, main.ts).

Crear una carpeta de proyecto de aplicación

Cree una carpeta / directorio para nuestra aplicación AngularJS 2 (Ejecute el siguiente comando en la ventana de terminal).

mkdir MyAngularApp
cd MyAngularApp

Instale el node.js

Instalación del nodo js (Ejecute el siguiente comando en la ventana de terminal)

npm install node.js

El comando anterior creará un nombre de carpeta “node_modules” con la carpeta node.js que contiene archivos como lib, package.json y muchos más.

Instale los paquetes npm y los archivos de mecanografía

Instale todos los paquetes incluidos en el archivo package.json, ejecute el siguiente comando en la ventana de terminal. (para ventanas en la línea de comando)

npm install

Para poder instalar y ejecutar npm, he instalado globalmente algunas de las devDependencies (Ejecutar los siguientes comandos en la ventana de terminal)

npm install -g typecript (g para la instalación global a nivel mundial)
npm install typings (esto se usa para convertir archivos .ts a archivos js)

Así es como puede crear el entorno de desarrollo para su aplicación AngularJS 2.

Ahora comencemos desarrollando (creando) la aplicación Hello World .

Abra una carpeta de proyecto de aplicación en Visual Studio Code – Edición de código. Redefinido (puede usar notepad ++, Subline en su lugar)

Cada aplicación AngularJS 2 consta de uno o muchos componentes. Estos componentes son bloques de construcción de la aplicación AngularJS 2. Cada componente controla una parte de la aplicación utilizando la plantilla.

Asegúrese de que cada aplicación AngularJS 2 tenga un componente raíz, comúnmente conocido como AppComponent.

AppComponent es una clase de componente. Hay dos propósitos de la clase componente.

  • Controlar la apariencia de la vista
  • Controlar el comportamiento de la vista

Comportamiento de control de clase de componente y apariencia de vista a través de una plantilla. La clase de componentes puede tener decorador de componentes.

Hay dos propósitos de decorador de componentes

  • Le dice al marco AngularJS qué plantilla usar
  • Le dice al marco AngularJS cómo se creará el componente.

Crear app.component.ts

Así que ahora creemos AppComponent para nuestra aplicación AngularJS 2 en el archivo app.component.ts

/ * Importación de la función decoradora de componentes desde el módulo de biblioteca anularjs * /

importar {Componente} desde ‘angular2 / core’

/ * Creación del decorador de clase AppComponent * /
@Componente ({
selector: ‘mi-aplicación’,
plantilla: ‘AngularJS 2 Hello World’
})

/ * Creación de la clase AppComponent * /
/ * Exportando la clase AppComponent * /
clase de exportación AppComponent {}

Nuestro decorador de componentes tiene un selector de dos elementos (campos) y una plantilla.

Hemos asignado nombres de AppComponent al campo selector. Podemos usar ese nombre de AppComponent en HTML. Cada vez que usamos ese nombre de AppComponent (turn-learning) en HTML, AngularJS crea una instancia de AppComponent y la muestra en HTML.

El slector de AppComponent es un selector CSS, no una etiqueta HTML

Hemos asignado una plantilla de AppComponent al campo de plantilla. Le dice a AngularJS cómo representar la vista AppComponent. Los campos de plantilla pueden tener HTML y otros componentes.

Hemos exportado AppComponent para poder importarlo en otro lugar de nuestra aplicación.

Nuestro AppComponent ahora está listo para usarlo en nuestra aplicación.

Crear archivo main.ts

Ahora cree el archivo main.ts en el directorio de la aplicación

El siguiente es el propósito del archivo main.ts

  • main.ts es el punto de entrada (como la función principal) de nuestra aplicación AngularJS 2.
  • En main.ts le decimos a Angular cómo cargar nuestra aplicación AngularJS 2.
  • En main.ts le decimos a Angular en qué plataforma queremos ejecutar nuestra aplicación AngularJS 2 (Vamos a ejecutar nuestra aplicación en el navegador).
  • En main.ts especificamos dependencias externas de nuestra aplicación AngularJS 2.

Aquí está nuestro archivo main.ts

/ * importación del componente bootstrap desde la biblioteca angular * /

importar {bootstrap} desde ‘angular2 / platform / browser’;

/ * Importando AppComponent creado en el archivo app.component.ts * /
importar {AppComponent} desde ‘./app.component’;

/ * Componente de aplicación Bootstrapping * /
bootstrap (componente de la aplicación);

crear index.html

Ahora cree un archivo index.html en su directorio raíz del proyecto

index.html cargará nuestra aplicación en el navegador. En index.html cargamos los scripts necesarios (bibliotecas), definimos la configuración del sistema y definimos un selector de componentes de la aplicación.

Aquí está nuestro index.html

AngularJS 2 Getting Started. Hola mundo Aplicación

System.config ({
paquetes: {
aplicación: {
formato: ‘registrarse’,
defaultExtension: ‘js’
}
}
});
System.import (‘aplicación / principal’)
.then (null, console.error.bind (consola));

Cargando…

Cuando el marco AngularJS llama a la función bootstrap en el archivo app / main.ts, AngularJS prepara AppComponent, encuentra el selector AppComponent (my-app), localiza el selector CSS asignado por AppComponent selector (my-app) en index.html y carga la aplicación entre ellos.

Compilar y ejecutar

Ahora abra la ventana de su terminal y ejecute el siguiente comando (haga clic con el botón derecho en la carpeta de la aplicación, haga clic en ‘Abrir en el símbolo del sistema’

Primero decida desde TypeScript / JavaScript / Dart en lo que encuentre fácil, luego busque en YouTube o en plural, encontrará muchos tutoriales en video allí.

es genial y estadísticas desde muy básicas.

Yo mismo, encontré la documentación de Angular 2 un poco confusa para cualquiera que realmente esté tratando de aprender Angular 2. Sin embargo, tengo un montón de tutoriales para usted, dedicados exclusivamente a Angular 2 + TypeScript + Sublime Text + NPM. Estos tutoriales lo ayudarán a comenzar con Angular 2. Puede consultar:

Angular 2 Tutoriales

Comience con tutoriales en angular.io.

Si no conoce TypeScript, apréndalo en el camino.

Más tarde, intente implementar proyectos existentes en angular2 para comprender y evaluar las diferencias.

También puede usar ngupgrade para migrar desde proyectos angulares 1.x existentes a angular 2

Por favor visite este enlace

Angular 2

Este es un gran lugar para comenzar a aprender angular 2.