MEAN.JS - Componentes angulares en la aplicación

En este capítulo, agregaremos componentes angulares a una aplicación. Es un marco de JavaScript front-end web, que permite crear aplicaciones dinámicas de una sola página utilizando el patrón Model View Controller (MVC). En el capítulo de arquitectura MEAN.JS , ha visto cómo AngularJS procesará la solicitud del cliente y obtendrá el resultado de la base de datos.

Conociendo AngularJS

AngularJS es un marco de trabajo de aplicación web de código abierto que utiliza HTML como lenguaje de plantilla y extiende la sintaxis del HTML para expresar claramente los componentes de su aplicación. AngularJS proporciona algunas características básicas como enlace de datos, modelo, vistas, controladores, servicios, etc. Para obtener más información sobre AngularJS, consulte este enlace .

Puede hacer que la página sea una aplicación Angular agregando Angular en la página. Se puede agregar simplemente usando un archivo JavaScript externo, que se puede descargar o se puede hacer referencia directamente con una versión CDN.

Considere que hemos descargado el archivo y lo hemos referenciado localmente agregándolo a la página de la siguiente manera:

<script src="angular.min.js"></script>

Ahora, debemos decirle a Angular que esta página es una aplicación Angular. Por lo tanto, podemos hacer esto agregando un atributo, ng-app a la etiqueta <html> o <body> como se muestra a continuación:

<html ng-app>
or
<body ng-app>

La ng-app se puede agregar a cualquier elemento de la página, pero a menudo se coloca en la etiqueta <html> o <body> para que Angular pueda funcionar en cualquier lugar dentro de la página.

Aplicación angular como módulo

Para trabajar con una aplicación Angular, necesitamos definir un módulo. Es un lugar donde se pueden agrupar los componentes, directivas, servicios, etc., que están relacionados con la aplicación. El nombre del módulo está referenciado por el atributo ng-app en el HTML. Por ejemplo, diremos el nombre del módulo de la aplicación angular como myApp y se puede especificar en la etiqueta <html> como se muestra a continuación:

<html ng-app="myApp">

Podemos crear una definición para la aplicación utilizando la siguiente declaración en un archivo JavaScript externo:

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

Definición de controlador

La aplicación AngularJS se basa en controladores para controlar el flujo de datos en la aplicación. Un controlador se define mediante la directiva ng-controller .

Por ejemplo, adjuntaremos el controlador al cuerpo usando la directiva ng-controller, junto con el nombre del controlador que desea usar. En la siguiente línea, estamos usando el nombre del controlador como "myController".

<body ng-controller="myController">

Puede adjuntar un controlador (myController) a un módulo angular (myApp) como se muestra a continuación:

angular
.module('myApp')
.controller('myController', function() {
   // controller code here
});

Es mejor usar una función con nombre en lugar de una función anónima para facilitar la lectura, la reutilización y la capacidad de prueba. En el siguiente código, estamos usando la nueva función nombrada "myController" para contener el código del controlador -

var myController = function() {
   // controller code here
};
angular
.module('myApp')
.controller('myController', myController);

Para obtener más información sobre los controladores, consulte este enlace .

Definición del alcance

Scope es un objeto JavaScript especial que conecta el controlador con las vistas y contiene datos del modelo. En los controladores, se accede a los datos del modelo a través del objeto $ scope. La función del controlador toma el parámetro $ scope que ha sido creado por Angular y brinda acceso directo al modelo.

El siguiente fragmento de código especifica cómo actualizar la función del controlador para recibir el parámetro $ scope y establece el valor predeterminado:

var myController = function($scope) {
   $scope.message = "Hello World...";
};

Para obtener más información sobre los controladores, consulte este enlace . En el próximo capítulo, comenzaremos a crear una aplicación de una sola página usando Angular.

↰ Previous page Next page ↱