Angular 2 es un framework front-end para crear aplicaciones tipo SPA (Single-page application), es decir, nos ayuda a crear aplicaciones web de una sóla página y con una carga de datos asíncrona. Posiblemente nos encontremos ante un candidato a convertirse en el framework estándar de JavaScript. Angular 2 es una revisión prácticamente desde cero de su predecesor, y que presenta un salto de calidad importante.
Los siguientes pasos indican el procedimiento para iniciar una aplicación en Angular mediante su CLI, ya que es una forma simple y rápida para empezar. Antes de todo es necesario instalar NodeJS junto a npm. Para ello podemos ir directamente a su página web y seguir los pasos que nos indican. Primeros pasos
Instalamos Angular-CLI
npm install -g angular-cli
Creamos una aplicación angular
ng new my-app
Finalmente ejecutamos la aplicación:
cd my-app
ng serve
También podemos iniciar con:
npm start
Esto dependerá de qué comando indiquemos en el atributo start de scripts del package.json creado en el directorio. Entendiendo las bases
Dentro de la carpeta src del proyecto creado anteriormente tenemos una carpeta llamada app. En la carpeta podemos observar los distintos elementos de la aplicación, los que trataremos a continuación son:
- app.component.ts: Elemento esencial de Angular.
- app.component.html: Porción de código HTML asociado al componente.
Dentro de app.component.ts nos fijaremos en 3 líneas:
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
La última de ellas simplemente apunta a el archivo que cargará los estilos que son necesarios para el componente.
La primera de ellas es el selector, la etiqueta HTML en el que se cargará el componente en cuestión. En este caso dentro del archivo index.html del proyecto de la carpeta src aparece la siguiente línea: sh
El segundo componente (templateUrl), hace referencia a el archivo HTML con el que “rellenaremos” el selector anterior. Si abrimos app.component.htm, nos damos cuenta de que contiene el texto “title” dentro de dos dobles llaves en una etiqueta HTLM h1:
<h1>
{{title}}
</h1>
Con estas dos llaves y el nombre, indicamos a Angular que existe un texto asignado a esta variable llamada title. Esta variable se encuentra en app.component.ts y contiene el texto “app works!”:
export class AppComponent {
title = 'app works!';
}
Como podemos suponer cuando carguemos el proyecto, se observará este texto dentro de la aplicación principal. De esta manera podemos ir añadiendo una estructura este componente que se mostrará dentro de la estructura principal. Es una forma muy versátil de crear una aplicación que a su vez está conformada por diferentes componentes que realizan diferentes actividades propias.
{{ comments.length }} comentarios