Las aplicaciones AngularJS dependen de un controlador para controlar el flujo de datos a través de una aplicación AngularJS. La arquitectura AngularJS utiliza el modelo MVC, es decir, el controlador de vista de modelo. El modelo es responsable de mantener los datos de la aplicación, la Vista de mostrar datos o parte de los datos al usuario y el controlador de la comunicación entre el modelo y la vista. un controladores un objeto de JavaScript que consta de varios atributos, propiedades y funciones. Las propiedades se pueden agregar al controlador usando el objeto $scope. El objeto $scope actúa como un pegamento entre el controlador y la vista. Simplemente actúa como el pegamento entre el modelo y la vista. Toman la entrada de la vista, la procesan y devuelven la salida para mostrarla al usuario.
El servicio $controller se usa para instanciar un controlador. Es una llamada al $injector pero extraída en un servicio.
Sintaxis:
$controller(constructor, locals);
Valores de los parámetros: $controller toma 2 argumentos:
- constructor : si se llama al constructor con una función, se considera como una función de constructor del controlador; de lo contrario, se considera una string, que se puede utilizar para recuperar el constructor del controlador con los siguientes pasos:
- Al verificar el controlador con el nombre mencionado que se registrará a través de $controllerProvider .
- Al evaluar la string con el alcance actual que devolverá un constructor.
- locales : es de un tipo de objeto con la inyección de locales para los controladores.
Tipo de devolución: devuelve un objeto que es una instancia para el controlador dado.
Enfoque: el controlador $se puede implementar con el siguiente enfoque:
- Especifique el nombre del controlador en la directiva ng-controller dentro de un elemento HTML donde desea usar las propiedades del controlador.
<div ng-app = "myApp" ng-controller = "myCtrl">
- Dentro de la etiqueta del script, cree un módulo.
var app = angular.module
- Usando el módulo, cree un controlador usando el constructor de objetos de JavaScript y pase el alcance como argumento.
app.controller("myCtrl",function($scope)){}
- Adjunte propiedades al controlador utilizando el objeto de ámbito.
Ejemplo 1: este ejemplo muestra cómo crear un controlador y usar sus propiedades en un elemento HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$controller Service in AngularJS</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<h1>
Creating a controller and using its properties in a tag.
</h1>
<div ng-controller="myCtrl">
<h1>{{title.title1}}</h1>
<h2>{{title.title2}}</h2>
<ul ng-repeat="x in topics">
<li>{{x}}</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.title = {
"title1": "GeeksforGeeks",
"title2": "AngularJS Controller"
}
$scope.topics =
["Expressions",
"Controller",
"Routing",
"Services"];
});
</script>
</body>
</html>
Explicación : en el ejemplo anterior, hemos creado un módulo llamado » myApp «. Hemos adjuntado un controlador llamado » myCtrl » al módulo usando el constructor de JavaScript y hemos pasado $scope como parámetro. Hemos adjuntado propiedades como string, objeto y array al controlador usando el objeto $scope . Hemos usado estas propiedades en la etiqueta <div> donde hemos especificado el controlador usando la directiva ng-controller .
Producción:
Ejemplo 2: En este ejemplo, crearemos un archivo externo para el controlador.
En aplicaciones más grandes, los controladores se almacenan en archivos externos. Para implementar esto, a partir del ejemplo anterior, solo necesita colocar el código dentro de la etiqueta <script> donde se crean el módulo y el controlador en un archivo separado y guardar este archivo con la extensión .js. Vincule este archivo en el atributo src de la etiqueta <script>.
índice.html:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
$controller Service in AngularJS
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<h1>
Creating a separate file for the controller.
</h1>
<div ng-controller="myCtrl">
<h1>{{title.title1}}</h1>
<h2>{{title.title2}}</h2>
<ul ng-repeat="x in steps">
<li>{{x}}</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
aplicación.js
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.title={
"title1":"GeeksforGeeks",
"title2":"AngularJS Controller"
}
$scope.steps=
["Create a file with .js extension",
"In this file write the JavaScript code of
creating the module and controller",
"Link this file in the main HTML file by
using src attribute of the <script> tag"];
});Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA