AngularJS => Controladores

Sintaxis

<htmlElement ng-controller = "controllerName"> ... </htmlElement>
<script> app.controller ('controllerName', controllerFunction); </script>

Su primer controlador

Un controlador es una estructura básica que se usa en Angular para preservar el alcance y manejar ciertas acciones dentro de una página. Cada controlador está acoplado con una vista HTML.

A continuación se muestra una placa de referencia básica para una aplicación Angular:

<!DOCTYPE html>

<html lang="en" ng-app='MyFirstApp'>
    <head>
        <title>My First App</title>

        <!-- angular source -->
        <script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
        
        <!-- Your custom controller code -->
        <script src="js/controllers.js"></script>
    </head>
    <body>
        <div ng-controller="MyController as mc">
            <h1>{{ mc.title }}</h1>
            <p>{{ mc.description }}</p>
            <button ng-click="mc.clicked()">
                Click Me!
            </button>
        </div>
    </body>
</html>

Hay algunas cosas a tener en cuenta aquí:

<html ng-app='MyFirstApp'>

Establecer el nombre de la aplicación con ng-app permite acceder a la aplicación en un archivo Javascript externo, que se tratará a continuación.

<script src="js/controllers.js"></script>

Necesitaremos un archivo Javascript donde defina sus controladores y sus acciones / datos.

<div ng-controller="MyController as mc">

El atributo ng-controller establece el controlador para ese elemento DOM y todos los elementos que son hijos (recursivamente) debajo de él.

Puede tener múltiples del mismo controlador (en este caso, MyController ) diciendo ... as mc , le estamos dando a esta instancia del controlador un alias.

<h1>{{ mc.title }}</h1>

La notación {{ ... }} es una expresión angular. En este caso, esto establecerá el texto interno de ese elemento <h1> en cualquiera que sea el valor de mc.title .

Nota: Angular emplea enlace de datos de doble vía, lo que significa que, independientemente de cómo actualice el valor de mc.title , se reflejará tanto en el controlador como en la página.

También tenga en cuenta que las expresiones angulares no tienen que hacer referencia a un controlador. Una expresión Angular puede ser tan simple como {{ 1 + 2 }} o {{ "Hello " + "World" }} .

<button ng-click="mc.clicked()">

ng-click es una directiva angular, en este caso, vincula el evento click para que el botón active la función MyController clicked() de la instancia de MyController .

Con esas cosas en mente, escribamos una implementación del controlador MyController . Con el ejemplo anterior, escribiría este código en js/controller.js .

Primero, deberá crear una instancia de la aplicación Angular en su Javascript.

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

Tenga en cuenta que el nombre que aprobamos aquí es el mismo que el que estableció en su HTML con la directiva ng-app .

Ahora que tenemos el objeto de la aplicación, podemos usar eso para crear controladores.

app.controller('MyController', function(){
    var ctrl = this;

    ctrl.title = "My First Angular App";
    ctrl.description = "This is my first Angular app!";

    ctrl.clicked = function(){
        alert("MyController.clicked()");
    };
});

Nota: Para cualquier cosa que queramos ser parte de la instancia del controlador, usamos this palabra clave.

Esto es todo lo que se requiere para construir un controlador simple.

Creando Controladores

angular
    .module('app')
    .controller('SampleController', SampleController)

SampleController.$inject = ['$log', '$scope'];
function SampleController($log, $scope){
    $log.debug('*****SampleController******');
    
    /* Your code below */
}

Nota: El .$inject asegurará que sus dependencias no sean codificadas después de la minificación. Además, asegúrese de que esté en orden con la función nombrada.

Creando controladores, minificación segura

Hay un par de maneras diferentes para proteger la creación de su controlador de la minificación.

La primera se llama anotación de matriz en línea. Se parece a lo siguiente:

var app = angular.module('app');
app.controller('sampleController', ['$scope', '$http', function(a, b){
    //logic here
}]);

El segundo parámetro del método del controlador puede aceptar una matriz de dependencias. Como puede ver, he definido $scope y $http que deberían corresponder a los parámetros de la función del controlador en la que a será $scope , y b sería $http . Tenga en cuenta que el último elemento de la matriz debe ser su función de controlador.

La segunda opción es usar la propiedad $inject . Se parece a lo siguiente:

var app = angular.module('app');
app.controller('sampleController', sampleController);
sampleController.$inject = ['$scope', '$http'];
function sampleController(a, b) {
    //logic here
}

Esto hace lo mismo que la anotación de matriz en línea, pero proporciona un estilo diferente para aquellos que prefieren una opción sobre la otra.

El orden de las dependencias inyectadas es importante.

Al inyectar dependencias utilizando la forma de matriz, asegúrese de que la lista de dependencias coincida con la lista correspondiente de los argumentos pasados a la función del controlador.

Tenga en cuenta que en el siguiente ejemplo, $scope y $http se invierten. Esto causará un problema en el código.

// Intentional Bug: injected dependencies are reversed which will cause a problem
app.controller('sampleController', ['$scope', '$http',function($http, $scope) {
    $http.get('sample.json');
}]);

Usando ControllerAs en Angular JS

En Angular $scope es el pegamento entre el controlador y la vista que ayuda con todas nuestras necesidades de enlace de datos. Controlador Como es otra forma de enlazar el controlador y la vista, y se recomienda su uso en su mayoría. Básicamente, estas son las dos construcciones de controlador en Angular (es decir, $ scope y Controller As).

Diferentes maneras de usar Controller As son -

Sintaxis de ver controladores

<div ng-controller="CustomerController as customer">
    {{ customer.name }}
</div>

sintaxis del controlador

function CustomerController() {
    this.name = {};
    this.sendMessage = function() { };
}

controladorAs con vm

function CustomerController() {
    /*jshint validthis: true */
    var vm = this;
    vm.name = {};
    vm.sendMessage = function() { };
}

controllerAs es azúcar sintáctica sobre $scope . Todavía puede enlazar a los métodos Ver y todavía tener acceso a $scope . El uso de controllerAs es una de las mejores prácticas sugeridas por el equipo de núcleo angular. Hay muchas razones para esto, algunas de ellas son:

$scope está exponiendo a los miembros del controlador a la vista a través de un objeto intermediario. Al configurar this.* , Podemos exponer solo lo que queremos exponer desde el controlador a la vista. También sigue la forma estándar de JavaScript de usar esto.
utilizando la sintaxis de controllerAs , tenemos un código más legible y se puede acceder a la propiedad principal utilizando el nombre de alias del controlador principal en lugar de usar la sintaxis de $parent .
Promueve el uso del enlace a un objeto "punteado" en la Vista (por ejemplo, customer.name en lugar del nombre), que es más contextual, más fácil de leer y evita cualquier problema de referencia que pueda ocurrir sin "puntos".
Ayuda a evitar el uso de $parent calls en vistas con controladores anidados.
Use una variable de captura para esto cuando use la sintaxis de controllerAs . Elija un nombre de variable consistente como vm , que significa ViewModel. Porque, this palabra clave es contextual y cuando se usa dentro de una función dentro de un controlador puede cambiar su contexto. Capturar el contexto de esto evita encontrar este problema.

NOTA: el uso de la sintaxis de controllerAs agrega a la referencia de alcance actual del controlador actual, por lo que está disponible como campo

<div ng-controller="Controller as vm>...</div>

vm está disponible como $scope.vm .

Creación de controladores angulares seguros para minificación

Para crear controladores angulares seguros para la minificación, cambiará los parámetros de la función del controller .

El segundo argumento en la función module.controller debe pasar una matriz , donde el último parámetro es la función del controlador , y cada parámetro anterior es el nombre de cada valor inyectado.

Esto es diferente del paradigma normal; que toma la función de controlador con los argumentos inyectados.

Dado:

var app = angular.module('myApp');

El controlador debe tener este aspecto:

app.controller('ctrlInject', 
    [
        /* Injected Parameters */
        '$Injectable1', 
        '$Injectable2', 
        /* Controller Function */
        function($injectable1Instance, $injectable2Instance) {
            /* Controller Content */
        }
    ]
);

Nota: No es necesario que los nombres de los parámetros inyectados coincidan, pero se unirán en orden.

Esto se reducirá a algo similar a esto:

var a=angular.module('myApp');a.controller('ctrlInject',['$Injectable1','$Injectable2',function(b,c){/* Controller Content */}]);

El proceso de minificación reemplazará cada instancia de la app con a , cada instancia de $Injectable1Instance con b , y cada instancia de $Injectable2Instance con c .

Controladores anidados

Los controladores de anidamiento también encadenan el $scope . Cambiar una variable de $scope en el controlador anidado cambia la misma variable de $scope en el controlador principal.

.controller('parentController', function ($scope) {
    $scope.parentVariable = "I'm the parent";
});

.controller('childController', function ($scope) {
    $scope.childVariable = "I'm the child";

    $scope.childFunction = function () {
        $scope.parentVariable = "I'm overriding you";
    };
});

Ahora tratemos de manejar a los dos, anidados.

<body ng-controller="parentController">
    What controller am I? {{parentVariable}}
    <div ng-controller="childController">
        What controller am I? {{childVariable}}
        <button ng-click="childFunction()"> Click me to override! </button>
    </div>
</body>

Los controladores de anidamiento pueden tener sus beneficios, pero una cosa debe tenerse en cuenta al hacerlo. Llamar a la directiva ngController crea una nueva instancia del controlador, que a menudo puede crear confusión y resultados inesperados.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

AngularJS
Controladores

Buscar..