AngularJS admite métodos modulares. Los módulos se utilizan para representar servicios lógicos, controladores, aplicaciones, etc. separados y mantener el código ordenado. Definimos el módulo en un archivo JS separado y lo nombramos en forma de un archivo módulo.js. En este ejemplo, queremos crear dos módulos.
Módulo de aplicación: utilizado para inicializar aplicaciones de controlador
Módulo del controlador: utilizado para definir controladores
Módulo de aplicación
mainapp.js
var mainapp = angular.module ("mainapp", []);
Aquí, hemos declarado el módulo MainApp para la aplicación utilizando la función Angular.module. Hemos pasado una matriz vacía. Esta matriz generalmente contiene módulos de esclavos.
Módulo de controlador
mainApp.controller("studentController", function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {Nombre: 'English', Marks: 75}, {Nombre: 'Hindi', Marks: 67}], FullName: Function () {Var StudentObject;Aquí, hemos declarado un controlador que utiliza la función MainApp.Controller del módulo StudentController.
Usando módulo
<div ng-app = "mainapp" ng-confontroller = "studentController"> .. <script src = "mainapp.js"> </script> <script src = "studentController.js"> </script>
Aquí, usamos la Directiva NG-APP y el controlador para aplicar el módulo utilizando la Directiva NG-Controller. Hemos importado MainApp.js y StudentController.js en la página principal HTML.
Ejemplo
Los siguientes ejemplos mostrarán todos los módulos mencionados anteriormente.
testangularjs.htm
<html> <cead> <title> módulos js angulares </title> <style> tabla, th, td {borde: 1px sólido gris; Colapso de borde: colapso; Roldón: 5px;} Table TR: NTH-Child (ODD) {Background-Color: #F2F2F2;} Table TR: NTH-Child (incluso) {Background-Color: #FFFFFF;} </style> </head> <body> <h2> AngularJS Aplicación de muestra </h2> <v ng-app = "mainapp" " ng-Controller = "StudentController"> <table> <tr> <td> Ingrese el nombre de primer lugar: </td> <td> <input type = "text" ng-model = "student.firstname"> </td> </tr> <tr> <tr> <td> Ingrese el apellido: </td> <td> <input type = "text" ngmodel = "student.lastName"> </td> </tr> <tr> <tr> <td> name: </td> <td> {{stents.fullName ()}}} </td> </tr> ng-repeat = "temas en student.subjects"> <td> {{Sujeto.name}} </td> <td> {{Sujeto src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script src = "mainapp.js"> </script> <script src = "studentController.js"> </script> </body> </html>mainapp.js
var mainapp = angular.module ("mainapp", []);
StudentController.js
mainApp.controller("studentController", function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {name:'Math',marks:65}, {Nombre: 'English', Marks: 75}, {Nombre: 'Hindi', Marks: 67}], FullName: Function () {Var StudentObject;Producción
Abra textangularjs.htm en un navegador web. Los resultados son los siguientes.
Lo anterior es la información sobre el conocimiento relacionado con el módulo AngularJS. Continuaremos agregando conocimiento relevante en el futuro. ¡Gracias por su apoyo para este sitio!