Latest web development tutorials

AngularJS Controladores

AngularJS AngularJS aplicaciones de controlador de datos.

AngularJS controlador es normal objeto de JavaScript.


AngularJS Controladores

aplicación AngularJS es controlador.

Directiva ng-controlador define el controlador de la aplicación.

El controlador es un objeto JavaScript creado por el constructor de los objetos JavaScript estándar.

AngularJS ejemplos

<Div ng-app = "myApp " ng-controller = "myCtrl">

Nombre: <input type = "text" ng-modelo = "Nombre"> <br>
Apellido: <input type = "text" ng-modelo = "Apellido"> <br>
<Br>
Nombre: {{firstName + "" + lastName}}

</ Div>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'myCtrl', function ($ ámbito de aplicación) {
$ Scope.firstName = "Juan";
$ Scope.lastName = "Doe";
});
</ Script>

Trate »

Análisis de la aplicación:

AngularJS aplicaciones definidas por el ng-app. Las aplicaciones que se ejecutan en <div> en el interior.

ng-controller = "myCtrl"? propiedad es una instrucción de AngularJS. Se utiliza para definir un controlador.

myCtrl función es una función de JavaScript.

AngularJS usando el objeto $ alcance para llamar al controlador.

En los AngularJS, $ ámbito de aplicación es una aplicación como (variables y funciones que pertenecen a la aplicación).

Controlador $ ámbito de aplicación (equivalente al ámbito de aplicación, el rango de control) para guardar AngularJS Model (Modelo) objetos.

alcance del controlador creado dos propiedades (nombre y apellido).

campos ng-modelo de entrada directiva enlazar con el controlador de atributos (nombre y apellido).


método de controlador

El ejemplo anterior ilustra un objeto controlador y la propiedad Nombre Apellido con los dos.

El controlador también puede tener métodos (funciones y variables):

AngularJS ejemplos

<Div ng-app = "myApp " ng-controller = "personCtrl">

Nombre: <input type = "text" ng-modelo = "Nombre"> <br>
Apellido: <input type = "text" ng-modelo = "Apellido"> <br>
<Br>
Nombre: {{fullName ()}}

</ Div>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ ámbito de aplicación) {
$ Scope.firstName = "Juan";
$ Scope.lastName = "Doe";
$ Scope.fullName = function () {
return $ scope.firstName + "" + $ scope.lastName;
}
});
</ Script>

Trate »

controlador de archivo externo

En aplicaciones de gran tamaño, el controlador normalmente se almacena en un archivo externo.

En pocas palabras etiqueta <script> Copia el código llamado personController.js archivo externo puede ser:

AngularJS ejemplos

<Div ng-app = "myApp " ng-controller = "personCtrl">

Nombre: <input type = " text" ng-modelo = "Nombre"> <br>
Apellido: <input type = " text" ng-modelo = "Apellido"> <br>
<Br>
Nombre Completo: {{firstName + " " + lastName}}

</ Div>

<Script src = "personController.js"> </ script>

Trate »

otros ejemplos

El siguiente ejemplo crea un nuevo archivo de controlador:

angular.module ( 'myApp', []). controlador ( 'namesCtrl', function ($ ámbito de aplicación) {
$ Scope.names = [
{Nombre: 'Jani', país: 'Noruega'},
{Nombre: 'Hege', país: "Suecia"},
{Nombre: 'Kai', país: «Dinamarca»}
];
});

Guarde el archivo como namesController.js :

Luego, utilizando el controlador en el archivo de aplicación:

AngularJS ejemplos

<Div ng-app = "myApp " ng-controller = "namesCtrl">

<Ul>
<Li ng-repeat = "x en los nombres">
{{X.name + ',' + x.country}}
</ Li>
</ Ul>

</ Div>

<Script src = "namesController.js"> </ script>

Trate »