Saltar al contenido

Angular 8 Introducción Tutorial para el beginnersMay, 30thIn este tutorial, vamos a aprender acerca de la forma de crear nuestro primer …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo crear nuestro primer proyecto angular cli usingangular.

¿Cuál es angular?

angular es un marco de JavaScript frontend que nos ayuda a crear un solo aplicaciones de página.

  • angular es una reescritura completa del AngularJS. página de la aplicación

individual

Los medios página de aplicaciones individuales que sólo tiene una página HTML simple que se reutiliza en toda nuestra aplicación en lugar de descargar nuevo cada página del servidor.

Cuando se libera angular?

  • angular se relased de septiembre de 2016, el 14

Por qué angular llamada así como 2,3,4,5,6 angular?

  • angular es una reescritura completa del AngularJS que conduce a la confusión entre los desarrolladores.
  • AngularJS se refiere a la versión 1.x sin JS se refieren a la versión angular 2 y más.

después lanzaron angulares 4,5,6 versiones con nuevas características como soporte progresiva aplicaciones web, http cliente, etc y el equipo saltó angulares 3. Ventajas del uso de

sistema de tipo fuerte angular

  • .
  • buena infraestructura de herramientas. Simple
  • y las plantillas declarativas.
  • También es posible construir aplicaciones móviles nativas utilizando iónico, Córdoba y también aplicaciones basadas en escritorio.

¿Quién utiliza angular

Muchas compañías más utiliza angular en la producción.

Introducción

Vamos a crear nuestro primer proyecto angular utilizando angular-cli.

angular CLI es una herramienta de línea de comandos que nos ayuda a crear un nuevo proyectos angulares (que sigue las mejores prácticas). Requisitos

  • nodejs (v10) es necesario para instalar el cli angular.

Abra su terminal o cmd y ejecutar el siguiente comando para instalar el cli angular en su PC.

npm install -g @angular/cli

Si está utilizando Mac a continuación, añadir sudo delante de la NGP.

Creación de un proyecto

vez ha instalado satisfactoriamente cli angular, vamos a crear un proyecto momento.

Abra su terminal y ejecutar el siguiente comando.

ng new my-angular-app

Este comando anterior descargar los archivos relacionados angulares en mi-angular-carpeta app.

Nota si su pronta con cualquier pregunta a continuación, escriba N para elegir ninguna. el cambio de

Vamos por nuestro directorio de trabajo actual.

cd my-angular-app

Ejecución de servidor de desarrollo

vamos a ejecutar el servidor de desarrollo utilizando el siguiente comando.

ng serve

Ahora abra su navegador y vaya a localhost: 4200 para ver su aplicación angular. abierta una de Estructura

carpeta

Let carpeta my-angular-aplicación en tu editor de código favorito y navega hasta src porque es el lugar donde nuestra aplicación lives.Don’t preocupación acerca de los archivos restantes.

Dentro src verá la carpeta de aplicación que contiene cuatro archivos que aparecen a continuación.

- app.component.html
- app.component.css
- app.component.ts
- app.module.ts

app.component.html: Contiene el código HTML.

app.component.css. Contiene código relacionado CSS.

app.component.ts: Contiene JavaScript / mecanografiado código realted.

app.modules.ts: También llamado módulo de aplicación en la raíz angular donde importamos y declarar los otros módulos, componentes para que angular tiene conocimiento de que otros componentes y módulos angulares porque las primeras carreras las app.module.ts.

ahora navegar a app.component.html y quitar todo lo que a continuación, añadir el siguiente marcado.

Hello angular

Ahora sus recargas de aplicaciones con el marcado actualizada.

interpolación

tenemos que utilizar la sintaxis abrazadera doble rizado {{}} para interpolar los datos en angular.

abierto sus app.component.ts y actualización con el código de abajo.

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 8';}

En el código anterior, se han declarado nueva variable llamada nombre, vamos a interpolar el nombre en nuestra app.component.html

Hello {{name}}

hemos visto en la imagen Hola angular 8 donde angular 8 proviene de name = “angular 8”, que declaramos app.component.ts el interior.

También se pueden utilizar métodos de JavaScript dentro de la sintaxis de la interpolación. componentes

Hello {{name.toLowerCase()}}

1.Angular tutorial unión

manipulación en

angular 3.Event atributo

2.Angular