Módulo AngularJS
El módulo define una aplicación.
Un módulo es un contenedor para diferentes partes de una aplicación.
Un módulo es un contenedor para el controlador de aplicación.
El controlador generalmente pertenece a un módulo.
Crear módulos
Puede crear módulos a través de la función Angular.module de AngularJS:
<div ng-app = "myApp"> ... </div> <script> var app = angular.module ("myApp", []); </script>El parámetro "MyApp" corresponde al elemento HTML que ejecuta la aplicación.
Ahora puede agregar controladores, instrucciones, filtros, etc. en su aplicación AngularJS.
Agregar un controlador
Puede usar la Directiva NG-Controller para agregar el controlador de la aplicación:
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 = "myctrl"> {{FirstName + "" + lastName}} </div> <script> var app = angular.module ("myApp", []); app.controller ("myctrl", function ($ scope) {$ scope.firstname = "John"; $ scope.lastName = "Doe";}); </script> </body> </html>Efecto de ejecución:
John Doe
Puede obtener más información sobre los controladores en el capítulo del controlador AngularJS.
Agregar comando
AngularJS proporciona muchas instrucciones incorporadas que puede usar para agregar funcionalidad a su aplicación.
Para obtener instrucciones completas, consulte el Manual de referencia de AngularJS.
Además, puede usar módulos para agregar sus propias instrucciones para su 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> <viv-app = "myapp" runoB-directive " = angular.module ("myApp", []); app.directive ("ranoObDirective", function () {return {Template: "Lo creé en el constructor de directivas!"};}); </script> </body> </html>Resultados de ejecución:
¡Lo creé en el constructor de directivas!
Puede obtener más información sobre las directivas en el Capítulo de las Directivas AngularJS.
Los módulos y los controladores se incluyen en los archivos JS
Por lo general, las aplicaciones AngularJS incluyen módulos y controladores en archivos JavaScript.
En el siguiente ejemplo, "myApp.js" contiene el definidor del módulo de aplicación, y el archivo "myctrl.js" contiene el controlador:
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 = "Myctrl"> {{FirstName + "" + LastName}} </div> <script src = "myapp.js"> </script> <script src = "myctrl.js"> </script> </body> </html>Resultados de ejecución:
John Doe
myapp.js
var app = angular.module ("myApp", []);
Nota En la definición del módulo, el parámetro [] se usa para definir las dependencias del módulo.
Los soportes [] indican que el módulo no tiene dependencias. Si hay una dependencia, el nombre de la dependencia se escribirá en los soportes.
myctrl.js
app.controller ("myctrl", function ($ scope) {$ scope.firstname = "John"; $ scope.lastname = "doe";});Las funciones afectan el espacio de nombres global
Las funciones globales deben evitarse en JavaScript. Porque se sobrescriben fácilmente por otros archivos de script.
El módulo AngularJS permite que todas las funciones se alcancen bajo este módulo, evitando este problema.
¿Cuándo se cargará la biblioteca?
Nota: En nuestro caso, todas las bibliotecas AngularJS se cargan en la cabeza del documento HTML.
Para aplicaciones HTML, generalmente se recomienda colocar todos los scripts en la parte inferior del elemento <cody>.
Esto aumentará la velocidad de carga de la página web, porque la carga HTML no está sujeta a la carga de script.
En nuestras múltiples instancias de AngularJS, verá que la biblioteca AngularJS está cargada en el área <Head> del documento.
En nuestro caso, AngularJS se carga en el elemento <Art>, porque la llamada a Angular.module solo se puede hacer después de cargar la biblioteca.
Otra solución es cargar la biblioteca AngularJS en el elemento <cody>, pero debe colocarse frente a su script AngularJS:
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 = "myctrl"> {{FirstName + "" + lastName}} </div> <script> var app = angular.module ("myApp", []); app.controller ("myctrl", function ($ scope) {$ scope.firstname = "John"; $ scope.lastName = "Doe";}); </script> </body> </html>Resultados de ejecución:
John Doe
Lo anterior es una compilación de la información del módulo AngularJS, y continuaremos agregándola más tarde. Espero que pueda ayudar a programar amigos.