AngularJS Su primer controlador


Ejemplo

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.