Primera aplicación en Angularjs (I)


Introducción

Vamos a ver un ejemplo simple y completo de una aplicación en Angularjs.angularAngularJs tal como describí es un framework MVVM.
La aplicación consiste en un simple formulario donde introducimos un mensaje que enviamos.
Message
Una vez enviado, se mostrara un mensaje indicando que se ha enviado en otra pantalla.
messagesended
El objetivo es mostrar:

  • Un ejemplo de carga/envio de un contralor
  • Un ejemplo completo con navegación entre controladores.

1.-Paso: Añadiendo angular al proyecto

Este paso, es para proyectos realizados en Visual Studio (en otros entornos de desarrollo no aplicarían).

  • 1.- Instalar el angularjs. En la consola de nuget, escribir Install-Package angularjsNuget command
  • 2.- Para trabajar más cómodamente, tenemos la posibilidad de habilitar intelligence en el Visual Studio para angular. Disponemos en Github de un proyecto angularjs-visualstudio. En el mismo link se describe como instalarlo.

2.-Paso: Creando la página principal

Incluiremos los siguientes scripts, que se mostrarán en pasos posteriores:

  • angular: libreria de Angular.
  • demoAngularApp.js: Nuestra aplicación de Angular.
  • demoAngularMessageController.js: Nuestro Controlador para la pantalla de envío.
  • demoAngularMessageSendedController.js: Nuestro Controlador para la pantalla de mensaje enviado.
<html ng-app="demoApp" lang="en">
<head>
        <script src="~/Scripts/angular.js"></script>
        <script src="~/Scripts/demoAngularApp.js"></script>
        <script src="~/Scripts/demoAngularMessageController.js"></script>
        <script src="~/Scripts/demoAngularMessageSendedController.js"></script>
    </head>
    <body>
      <div ng-view></div>
    </body>
</html>

El html incorpora dos tags de angular:

  • ng-app: este tag habilita el motor de angular en nuestra aplicación.
  • ng-view: indica el lugar donde se desplegar nuestro html de la aplicación.

3.-Paso: demoAngularApp.js – Nuestra aplicación

Definimos nuestra aplicación en un modulo de angular. Aquí definimos la rutas de la aplicación, y para cada ruta (definida en when):

  • Asociamos la ruta con nuestro controlador en controler (equivalente a la definición de rutas del patrón MVC).
  • Al indicar el controlador también indicamos en el templateUrl, la vista asociada al controlador.
angular.module('demoApp', []).
config(['$routeProvider', function ($routeProvider) {	 
    $routeProvider.	 	
       when('/Message', { templateUrl: 'content/demoAngular/Message.html', controller: demoMessageController }).	
       when('/MessageSended', { templateUrl: 'content/demoAngular/MessageSended.html', controller: demoMessageSendedController }).	 	 
       otherwise({ redirectTo: '/Message' });	 	
}]);	 	

Continua en la siguiente entrada Primera aplicación en Angularjs (II)

Anuncios
Esta entrada fue publicada en Angular, Desarrollo, javascript, Patron Software, web y etiquetada . Guarda el enlace permanente.

Una respuesta a Primera aplicación en Angularjs (I)

  1. Pingback: Primera aplicación en Angularjs (II) | Pensando bajo la lluvia

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s