Latest web development tutorials

AngularJS módulo

Módulo define una aplicación.

Módulo es un contenedor en diferentes partes de la aplicación.

módulo de controlador es una aplicación contenedora.

El controlador generalmente pertenecen a un módulo.


Cree un módulo

Se puede crear un módulo de función AngularJSangular.module:

<Div ng-app = "myApp "> ... </ div>

<Script>

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

</ Script>

parámetro "MyApp" corresponde a la ejecución de los elementos de aplicación HTML.

Ahora puede agregar un controlador de instrucciones, filtros, etc., en aplicaciones AngularJS.


Añadir controlador

Puede utilizar las instruccionesng-controlador para añadir aplicaciones de controlador:

AngularJS ejemplos

<Div ng-app = "myApp " ng-controller = "myCtrl" >
{{Nombre + "" + lastName }}
</ Div>

<Script>

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

app.controller ( "myCtrl", la función ( $ ámbito de aplicación) {
$ Scope.firstName = "Juan";
$ Scope.lastName = "Doe";
});

</ Script>

Trate »

Puede AngularJS Controladores de conocer más a fondo la sección del controlador.


Añadir instrucciones

AngularJS ofrece muchos comandos internos, se puede utilizar para agregar funcionalidad a su aplicación.

Las instrucciones completas se pueden encontrar en el contenido del manual de referencia AngularJS .

Además, puede utilizar el módulo de añadir sus propias aplicaciones de instrucciones:

AngularJS ejemplos

<Div ng-app = "myApp " w3big-directriz> </ div>

<Script>

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

app.directive ( "w3bigDirective", la función ( ) {
volver {
plantilla: "He creado el constructor de instrucciones!"
};
});
</ Script>

Trate »

Puede AngularJS directivas conocer más a fondo la sección de instrucciones.


Los módulos y controladores incluidos en el archivo JS

Típicamente AngularJS módulo de aplicación y el controlador se incluye en el archivo JavaScript.

En los siguientes ejemplos, "myApp.js" contiene la definición de los módulos de la aplicación del programa, el archivo "myCtrl.js" contiene el controlador:

AngularJS ejemplos

<! DOCTYPE html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Cuerpo>

<Div ng-app = "myApp " ng-controller = "myCtrl">
{{Nombre + "" + lastName }}
</ Div>

<Script src = "myApp.js"> </ script>
<Script src = "myCtrl.js"> </ script>

</ Body>
</ Html>

Trate »

myApp.js

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

nota En la definición del módulo [] parámetro se utiliza para definir dependencias del módulo.
Los corchetes [] indica que el módulo no depende de, si hay dependencia, entonces dependerá del nombre de módulo escrito entre paréntesis.

myCtrl.js

app.controller( "myCtrl" , function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

Función afectará el espacio de nombres global

JavaScript debe evitar el uso de funciones globales. Ya que fácilmente se pueden cubrir con otro archivo de secuencia de comandos.

AngularJS ámbito de módulo de manera que todas las funciones en el módulo, para evitar el problema.


Al cargar la biblioteca?

nota En nuestro ejemplo, todas las bibliotecas de documentos HTML AngularJS se cargan en la cabeza.

Para aplicaciones HTML general, se recomienda a todas las secuencias de comandos se colocan en la parte inferior del elemento <body>.

Esto aumentará la velocidad de carga de las páginas, porque HTML no está sujeta a cargar script para cargar.

En nuestro ejemplo AngularJS múltiples, verá la biblioteca AngularJS se carga en el <head> del documento.

En nuestro ejemplo, AngularJS en el elemento <head> se carga, ya que la llamada sólo angular.module llevarse a cabo después de la finalización de la carga de la biblioteca.

Otra solución consiste en cargar la biblioteca AngularJS <body>, sino que debe ser colocado en frente de su script AngularJS:

AngularJS ejemplos

<! DOCTYPE html>
<Html>
<Head>
<Charset Meta = "UTF-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Cuerpo>

<Div ng-app = "myApp " ng-controller = "myCtrl">
{{Nombre + "" + lastName }}
</ Div>
<Script>
var app = angular.module ( "myApp", []);
app.controller ( "myCtrl", la función ($ ámbito de aplicación) {
$ Scope.firstName = "Juan";
$ Scope.lastName = "Doe";
});
</ Script>

</ Body>
</ Html>

Trate »