📌  相关文章
📜  AngularJS-模块

📅  最后修改于: 2020-10-27 02:51:08             🧑  作者: Mango

AngularJS支持模块化方法。模块用于将逻辑（例如服务，控制器，应用程序等）与代码分离，并保持代码的整洁。我们在单独的js文件中定义模块，并根据module.js文件命名它们。在以下示例中，我们将创建两个模块-

  • 应用程序模块-用于初始化带有控制器的应用程序。

  • 控制器模块-用于定义控制器。

应用模块

这是一个名为mainApp.js的文件，其中包含以下代码-

var mainApp = angular.module("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},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

在这里，我们使用mainApp.controller函数声明一个控制器studentController模块。

使用模块


   ...

在这里，我们使用使用ng-app指令的应用程序模块和使用ngcontroller指令的控制器。我们在HTML主页面中导入mainApp.js和studentController.js。

例

以下示例显示了上述所有模块的用法。

testAngularJS.htm

现场演示
Angular JS Modules
      
      
      
      
      
   
   
   
      
AngularJS Sample Application

      

         
         

            

               Enter first name:
               
            

            

               Enter last name: 
               
            

            

               Name: 
               {{student.fullName()}}
            

            

               Subject:
               
               
                  

                     

                        Name
                        Marks
                     

                     

                        {{ subject.name }}
                        {{ subject.marks }}

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},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

输出

在网络浏览器中打开文件textAngularJS.htm 。查看结果。