¿Qué es exactamente angular?

Angular es un marco front-end de código abierto de JavaScript y crea aplicaciones reactivas de página única (SPA) y fue desarrollado por los desarrolladores de Google. Angular ha atestiguado el control generalizado en Open Source JavaScript Frameworks y es muy apreciado entre los desarrolladores y las empresas por sus excelentes técnicas de funcionamiento. Angular es un marco MVW innovador del lado del cliente muy utilizado en la actualidad para el desarrollo de aplicaciones móviles y aplicaciones web. Fue escrito en mecanografiado con soporte para la estandarización ES6 (ECMA Script 2015). Typecript desarrollado por Microsoft y es un superconjunto de JavaScript. Esto transpilará el código y lo convertirá en formato JavaScript o ES5. El Script mecanografiado es muy tipado y está permitido escribir características OOPS como declaraciones de clase, interfaz y módulo como C # o Java que aumentan la ejecución y reducen los errores de tiempo de ejecución.

Las siguientes son las principales características de Angular 2

  • Componentes -

La versión anterior de Angular tenía la atención de los Controladores, pero ahora cambió totalmente el enfoque para trabajar con componentes sobre los controladores. Los componentes ayudan a crear las aplicaciones en varios módulos. Esto ayuda a administrar de manera más efectiva la aplicación en un período de tiempo.

  • Módulo -

El módulo es bastante idéntico a una clase. Un módulo generalmente se describe mediante un bloque de código que se utiliza para ejecutar una determinada tarea individual. Angular tiene la capacidad de modularidad, donde solo se construye una aplicación separándola en varios módulos. La palabra clave de exportación se utiliza para exportar la clase de componente desde un módulo. Cada aplicación angular tiene al menos un módulo angular por convención llamado módulo de aplicación.

Por ejemplo

  • Plantilla -

La plantilla es la función clave que justifica la exploración del componente. Podría declararse que la vista del componente se identifica mediante una plantilla. Se crea con HTML, incluye enlace y directiva.

Por ejemplo

  • Metadatos

Es de gran ayuda ampliar la eficiencia de la clase. En Typecript, para este propósito se identifica decorando la clase. Por ejemplo, para especificar cualquier componente en la aplicación Angular, use metadatos de la clase (es decir, decorador @Component).

Un decorador es una función que pone metadatos a una clase, son miembros o son argumentos de método.

  • El enlace de datos -

La característica más efectiva, Enlace de datos, es el puente de conexión entre Modelo y Vista. Se sincroniza automáticamente. Angular admite cuatro tipos de enlace: enlace de propiedades, enlace de eventos, interpolación y enlace bidireccional.

  • Directiva -

Las directivas son atributos HTML personalizados que ayudan a mantener la capacidad de HTML. Para hacer una directiva, el decorador @Directive se utiliza en metadatos conectados de la clase. Tres tipos de directivas: Componente, Decorador y Plantilla.

  • Servicios -

Los servicios se utilizan siempre que se requiera productividad única normalmente en diferentes módulos de la aplicación. Fundamentalmente, se utiliza para compartir los datos y el comportamiento dentro de la aplicación. El servicio no tiene clase base. Los servicios más utilizados son el servicio de registro, el servicio de datos, el servicio de masajes, etc.

  • Inyección de dependencia -

Inyección de dependencia en angular. La inyección de dependencia (DI) es un concepto básico de Angular 2+ y permite que una clase recopile dependencias de otra clase. Por lo general, en Angular, la inyección de dependencia se realiza inyectando una clase de servicio en una sección o clase de módulo.

Por ejemplo

Hay muchos editores de texto que son totalmente compatibles con Typecript. Ya sea listo para usar o con un complemento, incluidos todos los que se detallan a continuación.

  1. Estudio visual.
  2. Visual Studio Code.
  3. Átomo.
  4. Eclipse.
  5. WebStorm.

Visual Studio Code es la mejor opción porque es de código abierto y se ejecuta en Linux, Windows y MacOS. Proporciona excelentes funciones que admiten Typecript, que incluyen

  • Autocompletado
  • IntelliSense
  • Comprobación de sintaxis
  • Refactorización

Para descargar el código de Visual Studio, visite el sitio web en https://code.visualstudio.com/download.

Pasos para instalar Angular 2

Ahora, comenzando con el proceso para instalar Angular 2

Paso 1: para instalar Angular 2, primero descargue el paquete node.js del sitio https://nodejs.org/en/download/.

Instale el repositorio npm (Node Package Manager) descargado en su sistema.

  • Si usa el sistema de Windows, instale el instalador de Windows.
  • Si usa el sistema MacOS, instale el instalador de MacOS.

Verifique las versiones compatibles de su sistema como 32 bit o 64 bit.

Paso 2: Instalación del nodo,

Ahora , haga doble clic en el archivo node-v10 15.3-x64.msi descargado para ejecutar el instalador y haga clic en el botón Siguiente en la pantalla del instalador.

Paso 3: Ahora, haga clic en la casilla marcada y acepte los términos del Acuerdo de licencia . Luego haga clic en el botón Siguiente.

Paso 4: en la siguiente pantalla, cambie la ruta de instalación si es necesario o haga clic en el botón Siguiente.

Paso 5: en la pantalla de selección de características Siguiente, mantenga la selección predeterminada y haga clic en el botón Siguiente.

Paso 6: Ahora, para instalar Node.js Haz clic en el botón Instalar.

Paso 7: en la siguiente pantalla, espere a que finalice la instalación.

Paso 8: Ahora, haz clic en el botón Finalizar.

Paso 9: abra el símbolo del sistema en su máquina y escriba el siguiente comando y verifique la versión de nodejs y la versión de npm:

c:/>node -v

c:/>npm -v.

Paso 10: Una vez que la instalación haya finalizado. Visite el sitio en https://cli.angular.io/ para CLI angular (interfaz de línea de comandos).

Paso 11: Abra el símbolo del sistema en su máquina y escriba el comando "npm install –g @ angular / cli" y presione enter para instalar Angular 2 CLI (interfaz de línea de comandos).

Nota: Si usa MacOS / Linux, simplemente ponga sudo antes de npm, “sudo npm install –g @ angular / cli”

Paso 12: Escribe "ng new first-app" y presiona enter para crear la primera aplicación.

Paso 13: Cuando instale la aplicación Angular 2, Angular CLI le hará algunas preguntas.

  • ¿Te gustaría agregar enrutamiento angular? (S / No) -> No
  • ¿Qué hoja de estilo estándar quiere usar? (Use las teclas de flecha) -> CSS

Paso 14: en la primera aplicación, agregue todos los paquetes con CLI angular

Una vez que instale todos los paquetes, significa que la aplicación se crea en el disco.

Paso 15: Escriba el comando “ng –version” en el símbolo del sistema y presione enter para averiguar la versión angular

Paso 16: Ahora, escriba el comando "cd first-app" para ingresar al directorio o carpeta de la aplicación.

Paso 17: Finalmente, se crea la aplicación angular "Primera aplicación"; ahora escriba el comando "ng serve".

Paso 18: Ahora, abra el navegador y escriba http: // localhost: 4200 en la barra de direcciones y presione enter para ejecutar la aplicación First Application Angular en el navegador.

Artículos recomendados

Esta ha sido una guía sobre Instalar Angular 2. Aquí hemos discutido las Características principales de Angular 2 y los Pasos para instalar Angular 2. También puede consultar los siguientes artículos para obtener más información:

  1. Angular 2 Cheat Sheet
  2. Angular 2 preguntas de la entrevista
  3. Angular 2 vs Vue JS
  4. Comandos angulares

Categoría:

Desarrollo de software