举例讲解AngularJS中的模块

AngularJS支持模块化的方法。模块用于单独的逻辑表示服务，控制器，应用程序等，并保持代码的整洁。我们在单独的js文件中定义的模块，并将其命名为按照module.js文件形式。在这个例子中，我们要创建两个模块。

  1. Application Module - 用于初始化控制器应用程序
  2. Controller Module - 用于定义控制器

应用模块

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

在这里，我们已经声明采用studentController模块的mainApp.controller功能的控制器。
使用模块

<div ng-app="mainApp" ng-controller="studentController">
..
<script src="mainApp.js"></script>
<script src="studentController.js"></script>

在这里，我们使用 ng-app 指令和控制器采用ng-controller指令应用模块。我们已经在主要的HTML页面导入mainApp.js和studentController.js。
示例

下面的例子将展示上述所有模块。

testAngularJS.htm

<html>
  <head>
 <title>Angular JS Modules</title>
 <style>
 table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
 }
 table tr:nth-child(odd) {
  background-color: #f2f2f2;
 }
 table tr:nth-child(even) {
  background-color: #ffffff;
 }
 </style>
 </head>
 <body>
 <h2>AngularJS Sample Application</h2>
 <div ng-app="mainApp" ng-controller="studentController">
 <table border="0">
 <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
 <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
 <tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
 <tr><td>Subject:</td><td>
 <table>
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr ng-repeat="subject in student.subjects">
    <td>{{ subject.name }}</td>
    <td>{{ subject.marks }}</td>
  </tr>
 </table>
 </td></tr>
 </table>
 </div>
 <script 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},
     {name:'English',marks:75},
     {name:'Hindi',marks:67}
   ],
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
});

输出

在Web浏览器打开textAngularJS.htm。看到结果如下。

赞 (0)

相关推荐

  • 浅析angularJS中的ui-router和ng-grid模块

    浅析angularJS中的ui-router和ng-grid模块

    在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没

  • AngularJS模块详解及示例代码

    AngularJS模块详解及示例代码

    AngularJS支持模块化的方法.模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁.我们在单独的js文件中定义的模块,并将其命名为按照module.js文件形式.在这个例子中,我们要创建两个模块. Application Module - 用于初始化控制器应用程序 Controller Module - 用于定义控制器 应用模块 mainApp.js var mainApp = angular.module("mainApp", []); 在这里,我们已经声明使用 a

  • 详解AngularJS中module模块的导入导出

    详解AngularJS中module模块的导入导出

    AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC.双向数据绑定.指令和语义化标签.模块化工具.依赖注入.HTML模板,以及对常用工具的封装,例如$http.$cookies.$location等. 关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码. 在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的module中,然后把各个module汇总到该领域的一个文件中,再由主mo

  • AngularJs动态加载模块和依赖注入详解

    废话不多说,进入正题... 首先我们看下文件结构: Angular-ocLazyLoad --- demo文件夹 Scripts --- 框架及插件文件夹 angular-1.4.7 --- angular 不解释 angular-ui-router --- uirouter 不解释 oclazyload --- ocLazyload 不解释 bootstrap --- bootstrap 不解释 angular-tree-control-master --- angular-tree-cont

  • AngularJS模块学习之Anchor Scroll

    AngularJS模块学习之Anchor Scroll

    俗话说的好:好记性不如一个烂笔头,本文对angularjs模块学习笔记,首先我们从anchor scroll开始学习,具体内容请看下文: •$anchorScroll()用于跳转至定义ID: •$location对象的hash()方法会替换当前url作为hash键: •$anchorScroll()读取并跳转至ID处. 下面简单的例子,这里是输出结果: 源码 index.html--11行,标示了的跳转ID: <!DOCTYPE html> <html ng-app="app&

  • AngularJS 模块详解及简单实例

    AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> "m

  • AngularJS模块管理问题的非常规处理方法

    1.起因 自己一直做winform,有幸从某个大神手里接了一个node.js,express,angularJS等集众多开源框架的一个项目,赶鸭子上架,于是一边学习,一边用自己以往的思中去整理,重构代码: 2.问题 在某几个环境下,需要用BootStrap的模态框,咱是学win的么.. 自然而然的想到将boosStrp的模态框整成一个通用的东西,四处调用 ... 于是用patial引用对话框文件,对话框本身用anglurJS进行了服务器相关的通讯 . 后来发现,当只用一个的时候是好用的,如果多次

  • AngularJS中的模块详解

    在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,Javascript),目的是让网页应用开发更快更容易. AngularJS简化应用开发的一个重要方法是,将一个些通用的低级开发操作包装起来提供给开发者.AngularJS会自动处理好这些低级操作.它们包括: 1.DOM操作 2.设置事件的监听 3.输入验证,因为AngularJS会处理大部分这些操作,所

  • angularjs学习笔记之三大模块（modal，controller，view）

    今天主要跟大家详细讲解一下angularjs的三大模块: modal,controller,view. 首先跟大家说一下这三个模块之间的关系. 1.数据模型(modal)主要提供数据.它不会和视图(view)直接操作. 2.controller保存modal提供的数据,与视图进行操作. 3.view是视图,也就是页面展示. 4.总而言之,controller负责数据和视图之间的通信,就是两者的接口人.他们分工明确,实现了模块化. 一.如何使用数据模型(modal)? 讲到数据模型,我们再来看一下

  • 深入浅析AngularJS中的module(模块)

    什么是AngularJS的模块 我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等-都是属于一个模块! 大多数的应用程序都是有一个自己的函数入口方法Main ,用它来进行初始化,以及加载装配各个模块,然后这些模块的组合,构成了你的应用程序,对吧? 但是,but, AngularJS应用程序却不是这样的哦,它没有main 方法,没有函数入口.

随机推荐