Desarrollando en AngularJS para principiantes

Hay muchos tutoriales sobre esto en Internet, pero todavía hay gente que esto se le hace un poco cuesta arriba. Aquí, en este tutorial, os vengo a explicar cómo empezar con AngularJS siendo principiantes de una forma muy sencilla y sobre todo, entendible. Antes que nada, decirte que necesitas tener fundamentos de JavaScript para comprender esta práctica.

Voy a crear una aplicación de AngularJS dentro de las aplicaciones web de ASP.Net MVC. Para crear dicha aplicación hay que seguir los siguientes pasos:

1. Crea una nueva aplicación web MVC en Visual Studio.

2. Instala Angularjs utilizando el servidor NuGet. (Tools > NuGet Package Manager > Package Manager Console)

PM> Install-Package angularjs

3. Crea una nueva carpeta llamada "App" en el directorio raíz del proyecto

4. Puedes agregar más carpetas aparte dentro de esta carpeta App para el controlador, el modelo, la ruta, la directiva, el asembly, etc.

5. Ahora inserta el archivo app.js en la carpeta de aplicaciones haciendo clic derecho sobre la carpeta de aplicaciones y seleccionando Agregar nuevos elementos.

6. Implementa el siguiente código:

(function () { 

var app = angular.module("app", [ ]); 

app.controller("myCtrl", ['$scope', function ($scope) { 
    $scope.value = "hello first app";  
     }]); 

})();

En el código anterior, hemos creado una función que define nuestra aplicación, es decir:

var app = angular.module("app", [ ]);

Después de definir la aplicación, se agrega un controlador.

app.controller("myCtrl", ['$scope', function ($scope) {

      $scope.value = "hola primera app";

  }]);

Si no has definido la aplicación como el código de abajo, necesitas utilizar angular.controller en vez de app.controller.

var app = angular.module("app", [ ]);

En el controlador, hemos definido que $scope.value = "Hola primera app;". Aquí, el value es el modelo que tienen algunos valores. Guarda el archivo.

¡Hemos terminado de desarrollar el archivo app.js! Ahora vamos a utilizar esta aplicación de AngularJS en una vista de ASP.NET MVC.

Sigue los siguientes pasos para utilizar la aplicación AngularJS en una vista de MVC.

1. Agrega un controlador en la raíz de la aplicación web ASP.NET MVC.

2. Crea una vista y define el ng-app, ng-controller y ng-model en jerarquía, tal que así:

<div ng-app="app">

     <div ng-controller="myCtrl">

           <input type="text" ng-model="value" />

           <label>{{value}}</label>

      </div>

</div>

3. Ahora, antes de ejecutar la aplicación, tienes que incluir los siguientes JS en la etiqueta head de la página cshtml. Después de incluir los JS requeridos, es necesario incluir la app.js que acabamos de crear.

<script src="~/Scripts/angular.js"></script>

<script src="~/Scripts/angular-route.js"></script>

<script src="~/Scripts/angular-resource.js"></script>

<script src="~/App/Controller/app.js"></script>

Ahora, ejecuta el proyecto.

Y este ha sido el artículo en el que trataba explicaros un pequeño tutorial sobre como empezar con AngularJS de una manera fácil y sencilla, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP