Controlador AngularJS
El controlador AngularJS controla los datos de las aplicaciones AngularJS.
El controlador AngularJS es un objeto JavaScript normal.
Controlador AngularJS
La aplicación AngularJS está controlada por el controlador.
La Directiva NG-Controller define el controlador de aplicación.
Un controlador es un objeto JavaScript creado por el constructor de un objeto JavaScript estándar.
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "Personctrl"> name: <input type = "text" ng-model = "firstName"> <br> name: {{fullName ()}} </div> <script> var app = angular.module ('myapp', []); app.controller ('Personctrl', function ($ scope) {$ scope.fope.fope. $ Scope.lastName = "Doe";Resultados de ejecución:
nombre:
apellido:
Nombre: John Doe
Las aplicaciones AngularJS se definen por NG-APP. La aplicación se ejecuta dentro de <Viv>.
La propiedad Ng-Controller = "MyCTRL" es una directiva AngularJS. Se usa para definir un controlador.
La función myCTRL es una función JavaScript.
AngularJS usa el objeto $ alcance para llamar al controlador.
En AngularJS, $ Scope es un objeto de aplicación (pertenece a variables y funciones de aplicación).
El alcance $ del controlador (equivalente al alcance y el alcance de control) se usa para guardar el objeto del modelo AngularJS.
El controlador crea dos propiedades (FirstName y LastName) en el alcance.
La Directiva NG-Model une el dominio de entrada a las propiedades del controlador (FirstName y LastName).
Método del controlador
El ejemplo anterior demuestra un objeto controlador con dos propiedades: LastName y FirstName.
El controlador también puede tener métodos (variables y funciones):
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "Personctrl"> name: <input type = "text" ng-model = "firstName"> <br> name: {{fullName ()}} </div> <script> var app = angular.module ('myapp', []); app.controller ('Personctrl', function ($ scope) {$ scope.fope.fope. $ Scope.lastName = "Doe";Efecto de ejecución:
nombre:
apellido:
Nombre: John Doe
Controladores en archivos externos
En aplicaciones grandes, el controlador generalmente se almacena en un archivo externo.
Simplemente copie el código en la etiqueta <Script> a un archivo externo llamado PersonController.js:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "Personctrl"> Nombre: <input type = "text" ng-model = "firstName"> <br> name: <input type = "text" ng-model = "lastName"> <br> <br> name: {{firstName + "" + LastName}} </div> <script <script src = "PersonController.js"> </script> </body> </html>Resultados de ejecución:
nombre:
apellido:
Nombre: John Doe
Otros ejemplos
El siguiente ejemplo crea un nuevo archivo de controlador:
angular.module ('myApp', []). Controller ('namesCtrl', function ($ scope) {$ scope.names = [{name: 'jani', country: 'norway'}, {name: 'hege', país: 'suecia'}, {nombre: 'kai', país: 'denmark'}];});Guarde el archivo como NamesController.js:
Luego, use el archivo del controlador en la aplicación:
Instancia de angularjs
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div-dapp-app = "myapp" ng "ng" ng-contrler "names <ul> <li ng-depreat = "x en nombres"> {{x.name + ',' + x.country}} </li> </ul> </div> <script src = "namesController.js"> </script> </body> </html>Efecto de ejecución:
Lo anterior es la compilación de los datos del controlador AngularJS, y se complementará más tarde.