AngularJS - 模块

AngularJS模块 - 从简单和简单的步骤学习AngularJS，从基本到高级概念，包括概述，环境设置，MVC架构，第一应用程序，指令，表达式，控制器，过滤器，表，HTML DOM，模块，表单，包含，Ajax ，视图，范围，服务，依赖注入，自定义指令，内部化，ToDo应用程序，记事本应用程序，Bootstrap应用程序，登录应用程序，上载文件，在线应用程序，导航菜单，切换菜单，订单表格，搜索选项卡，拖动应用程序，购物车申请，翻译申请，图表申请，地图申请，分享申请，天气申请，计时器申请，传单申请，Lastfm申请。

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

应用程序模块&minus ;用于使用控制器初始化应用程序.
控制器模块 : 用于定义控制器.

应用程序模块

这是一个名为的文件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 }}

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;      }   };});

输出

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