Primera aplicación en Angularjs (II)


En la anterior entrada, definimos el esqueleto de la aplicación. Ahora vamos a centrarnos en los controladores de Angular, que son los responsables coordinar la lógica de la aplicación.

4.- Paso: demoAngularMessageController.js – Controlador para la pantalla de envío.

Message

function demoMessageController($scope, $location, $rootScope, $http) {
    $scope.Status = '';
    $http.get('Demo/GetMessage').success(function (data) {
        $scope.Message = data;
    });
    $scope.Send = function () {
        $scope.MessageStatus = 'Message Sending...';
        $http({
            url: 'Demo/SetMessage',
            method: "POST",
            data: { 'message': $scope.Message }
        }).success(function (data, status, headers, config) {
            $rootScope.MessageSendResult = data;
            $location.path('/MessageSended');          
        }).error(function() {
            $scope.MessageStatus = 'Message Not Sended';
        });
    };

Modelo

  • Nuestro modelo del controlador tiene dos variables:
    • $scope.Message: Mensaje a enviar. Objeto con una propiedad Text.
    • $scope.Status: Texto con el estado del mensaje a enviar.
  • En la carga del controlador, se realiza una petición ajax a Demo/GetMessage; el resultado se carga en el modelo $scope.Message.

Metodo Send

El metodo Send del Controlador realiza la petición Ajax al Servidor. Utiliza el patrón promises que ya describimos. Como funciona:

  • Al inicio se actualiza $scope.MessageStatus, de esta manera se muestra que la petición se esta procesando…
  • messagesending

  • Si la petición es correcta, se realizan las siguientes acciones:
    • Se guarda en el rootScope el resultado de la petición. Esta información se utilizara posteriormente en el controlador de destino.
    • Redirigimos a una ruta destino, definida en la aplicación en el paso 3, con el $location.path(‘/MessageSended’);. Esto nos llevara a un controlador del paso siguiente ;-).
  • Si la petición es incorrecta, mostramos el estado incorrecto.
  • Vista

    <!--Message.html-->
    <form>
        <fieldset>
            <legend>Message:</legend>
            <label for="message">Message:</label>
            <input type="text" name="message" id="message" ng-model="Message.Text"/>
            <span>{{MessageStatus}}</span>
            <br />
            <button ng-click="Send()">Send</button>
        </fieldset>                
    </form>
    

    Se vincula el modelo del Controlador a la Vista:

    • La propiedad Text del objecto $scope.Message se vincula al input, mediante ng-model=”Message.Text”
    • El $scope.MessageStatus se vincula al span, mediante {{MessageStatus}}
    • Se llama al metodo Send del Controlador al pulsar el botón, se consigue mediante ng-click=”Send()”

    5.- Paso: demoAngularMessageSendedController.js – Controlador para la pantalla de mensaje enviado.

    messagesended

    function demoMessageSendedController($scope, $rootScope) {
        $scope.MessageSendResult = $rootScope.MessageSendResult;
    }
    

    Modelo

    • El modelo contiene $scope.MessageSendResult con el resultado del envío.
    • Este modelo se carga a partir del rootScope en el controlador.

    Vista

    <!--MessageSended.html-->
    <span>{{MessageSendResult}}</span>
    

    Se vincula el modelo del Controlador a la Vista:

    • El $scope.MessageSendResult se vincula al span, mediante {{MessageSendResult}}

    6.- Paso: Servicios en Servidor que usa el Controlador de la pantalla de envío.

    `

    namespace MvcApplication.Controllers
    {
    
        public class Message
        {
            public String Text { get; set; }
        }
    
        public class DemoController : Controller    
        {
            public JsonResult  GetMessage()
            {
                var message = new Message() {Text = "Hello World!"};
                return Json(message, JsonRequestBehavior.AllowGet);
            }
    
    
    
            public string SetMessage(Message message)
            {
                Thread.Sleep(2000);
                return "GuardaoSetMessage!";
            }
    
        }
    }
    

    Conclusión

    Hemos realizado una aplicación típica en cliente. Todos los elementos se encuentran perfectamente modularizados; obteniendo una arquitectura escalable, mantenible, testeable…

    PostData

    Dejo un proyecto, con el ejemplo un poco más evolucionado en el siguiente link:
    FirstExampleAngularjs

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

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

    1. Pingback: Primera aplicación en Angularjs (I) | 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