Compartir
Contenidos contratados por la marca que se menciona

Primeros pasos en Angular con Visual Studio 2015

Primeros pasos en Angular con Visual Studio 2015
Guardar
2 Comentarios
Publicidad

Newsletter

Visual Studio 2015 es uno de los entornos de desarrollo que más ha apostado por Angular.js. Utilizar Angular con Visual Studio es sencillo ya que el soporte de Intellisense es muy amplio.

Hacen falta algunos pasos iniciales de configuración para poner a punto el entorno. Vamos a abordarlos mientras creamos una pequeña aplicación. En primer lugar creamos un nuevo proyecto Web con Visual Studio 2015.

Aplicacionweb

El siguiente paso es elegir una plantilla, en este caso optaremos por una plantilla vacía:

Plantilla

Ya tenemos una estructura con la que empezar:

Aplicacionangular

Es momento de usar Nuget para instalar Angular.js. En este caso vamos a optar por la versión 1.3 que es una de las versiones más habituales.

Angular13

Visual Studio añade en la carpeta de Scripts todos los ficheros que Angular.js necesita.

Estructuraproyecto

Nos falta un paso adicional, instalar Angular Intellisense , un package de NuGet que activará las capacidades de Intellisense de Angular para Visual Studio.

Angularintellisense

Ya estamos preparados. Vamos a añadir un nuevo módulo de Angular.js a través del asistente de Visual Studio. Un módulo es una estructura similar a un namespace de .NET y permite agrupar de forma ordena la diferente funcionalidad que se construye.

Angularmodulo

Nada más añadir el módulo lo vaciaremos. Es momento de añadir un controlador, elemento que sirve como enlace entre la capa de presentación y la capa de negocio. Podemos ver como Visual Studio activa el Intellisense.

Angularcontroller

Vamos a construir una lista de objetos en JavaScript y los asignaremos al $scope de nuestro controlador. El $scope es un objeto que hace de intermediario entre la vista y el controlador.

(function () {
    'use strict';

    angular.module('app', []).controller(function($scope) {
        
        $scope.listaProyectos = [
           { nombre: "A", lenguaje: "Visual C#", tipo: "Web", horas: 1000 },
           { nombre: "B", lenguaje: "Visual Basic", tipo: "Mobile", horas: 250 },
           { nombre: "C", lenguaje: "TypeScript", tipo: "Web", horas: 2000 }];

    });

El siguiente paso es crear una página HTML (index.html) y añadir directivas. Las directivas en Angular.js aportan funcionalidad adicional a la capa de presentación:

  1. ng-app: Esta directiva inicializa la aplicación de Angular y la encontraremos asignada a la etiqueta html.
  2. ng-controller: Se encarga de definir cual es al ámbito de actuación del controlador y que etiquetas componen su vista.
  3. ng-repeat: Se encarga de recorrer una lista de elementos ubicados en el $scope y mostrarlos y mostrarlos en pantalla.

Todas estas etiquetas y muchas más están soportadas perfectamente por Visual Studio 2015 y sus capacidades de intellisense:

Ngclick

Ya disponemos de nuestro primer bloque de código:



    
    
    
    



    
Identificador Lenguaje
{{proyecto.nombre}} {{proyecto.lenguaje}}

El resultado se muestra en el navegador:

Lista

Nos queda diseñar la funcionalidad del detalle. Para ello vamos a generar un nuevo bloque de código HTML.


Nombre:{{proyectoDetalle.nombre}}

Lenguaje:{{proyectoDetalle.lenguaje}}

Tipo:{{proyectoDetalle.tipo}}

Horas:{{proyectoDetalle.horas}}

Este bloque se apoya en una nueva variable (proyectoDetalle) que asignaremos al $scope para ampliar la funcionalidad de nuestro controlador.

(function () {
    'use strict';

    angular.module('app', []).controller("Controlador1",function($scope,$log) {
        
        $scope.listaProyectos = [
            { nombre: "A", lenguaje: "Visual C#" ,tipo:"Web", horas:1000},
            { nombre: "B", lenguaje: "Visual Basic",tipo:"Mobile", horas:250},
            { nombre: "C", lenguaje: "TypeScript",tipo:"Deskop",horas:2000}];
        
        $scope.verDetalle = function (proyecto) {
            
            $scope.proyectoDetalle = proyecto;
            $log.log(proyecto);
        }
    }
    

    );
})();

Cuando construimos el código podemos ver que al inyectar el servicio de $log y comenzar a usarlo Visual Studio 2015 nos aporta Intellisense para todo el API.

Log

El resultado de la ejecución del código es que cada vez que pulsemos en el botón de detalle Angular.js mostrará todos los campos del objeto en la zona del detalle.

En GenBeta Dev: Introducción a Angular.js

Detalle

No pierdas la ocasión de ver el siguiente vídeo que ilustra la creación de aplicaciones de JavaScript con Angular.

En Espacio Visual Studio:

Publicidad

También te puede gustar

Comentarios cerrados

Ver más artículos