AngularJS suporta métodos modulares. Os módulos são usados para representar serviços lógicos separados, controladores, aplicativos etc. e manter o código limpo. Definimos o módulo em um arquivo JS separado e nomeá -lo na forma de um arquivo module.js. Neste exemplo, queremos criar dois módulos.
Módulo de aplicativo - usado para inicializar aplicativos controladores
Módulo de controlador - usado para definir controladores
Módulo de aplicação
MainApp.js
var mainApp = angular.module ("mainApp", []);
Aqui, declaramos o módulo MainApp para o aplicativo usando a função Angular.Module. Passamos uma matriz vazia para ela. Essa matriz geralmente contém módulos de escravos.
Módulo do 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}, {Nome: 'Inglês', Marcos: 75}, {Nome: 'Hindi', Marcos: 67}], FullName: function () {var studentObject;Aqui, declaramos um controlador que usa a função MainApp.Controller do módulo do StudentController.
Usando o módulo
<div ng-app = "mainApp" ng-controller = "studentcontroller"> .. <script src = "mainApp.js"> </sCript> <script src = "studentcontroller.js"> </sCript>
Aqui, usamos a diretiva NG-APP e o controlador para aplicar o módulo usando a diretiva NG Controller. Nós importamos MainApp.js e StudentController.js na página HTML principal.
Exemplo
Os exemplos a seguir mostrarão todos os módulos mencionados acima.
testangularjs.htm
<html> <head> <title> Módulos JS angulares colapso da fronteira: colapso; preenchimento: 5px;} tabela tr: nth-child (ímpar) {background-color: #f2f2f2;} tabela tr: nth-child (par) {background-color: #ffffff;} </style> </ad Head> <body> <h2> aplicação de amostra angularjs </h2> <div ng-app = "mainApp> <h2> APLICAÇÃO DE AMOSTRA </h2> <dpp =" MainApp "" ng-Controller = "StudentController"> <table> <tr> <td> digite o primeiro nome: </td> <td> <input type = "text" ng-model = "student.firstname"> </td> </tr> <tr> <td> digite o sobrenome: </td> <td> <input> </typing = <tr> <td> digite o sobrenome. ng-model = "student.lastName"> </td> </tr> <tr> <td> nome: </td> <td> {{student.fullname ()}} </td> </tr> <tr> <td> assunto: </td> <td> <tlay> <tr> ng-repeat = "Assunto em Student.subjects"> <td> {{sujeito.name}} </td> <td> {{sujeito.marks}} </td> </tr> </tabela> </tr> </tabela </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script src = "mainApp.js"> </script> <scripts>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}, {Nome: 'Inglês', Marcos: 75}, {Nome: 'Hindi', Marcos: 67}], FullName: function () {var studentObject;Saída
Open textangularjs.htm em um navegador da web. Os resultados são os seguintes.
O exposto acima são as informações sobre o conhecimento relacionado ao módulo AngularJS. Continuaremos a adicionar conhecimento relevante no futuro. Obrigado pelo seu apoio a este site!