• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS入门教程之模块化操作用法示例

AngularJS入门教程之模块化操作用法示例

作者:Rongbo_J 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs示例,angularjs入门与进阶,angularjs入门,angularjs入门教程,angularjs快速入门等相关知识,Rongbo_J 希望在学习及工作中可以帮助到您

本文实例讲述了AngularJS模块化操作用法。分享给大家供大家参考,具体如下:

在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差。通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在HTML页面中引入该文件。

然而这样会带来新的问题,我们的控制器全都定义在全局的命名空间中,假设我们有一个公共的JS文件,在登录页面和密码修改页面都引入这个JS,A开发人员和B开发人员英雄所见略同,对控制器的命名都是UserController,这样就会导致命名冲突。而且我们在新增一个控制器的时候总是要担心是不是已经有了一个同名的控制器,代码的扩展性是不是很差呢?

AngularJS中的模块能够很好的解决这个问题,接下来我们看看AngularJs怎么处理命名冲突问题。

代码清单1. tutorial04_1.html

<!DOCTYPE html>
<html ng-app="loginMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_1</title>
</head>
<body>
<div ng-controller="UserController">
 用户名:<input type="text" ng-model="name" placeholder="用户名"/>
 密码:<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="login()">提交</button>
 <p>您输入的用户名:{{name}}</p>
 <p>您输入的密码:{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>
</div>

代码清单2. tutorial04_2.html

<!DOCTYPE html>
<html ng-app="pwordMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial04_2</title>
</head>
<body>
<div ng-controller="UserController">
 密码:<input type="password" ng-model="pword" placeholder="密码"/>
 <button ng-click="changePwrd()">提交</button>
 <p>您输入的密码:{{pword}}</p>
</div>
<script type="text/javascript" src="js/tutorial04.js">
</script>
</body>
</html>
</div>

代码清单3. tutorial04.js

var loginMod = angular.module("loginMod", []);
loginMod.controller("UserController",function($scope,$log)
 {
  $scope.name="admin";
  $scope.pword="123456";
  $log.info( $scope.name);
  $log.info( $scope.pword);
  $scope.login = function()
  {
   alert("登录");
  }
 }
);
var pwordMod = angular.module("pwordMod", []);
pwordMod.controller("UserController",function($scope,$log)
 {
  $scope.pword="123456";
  $scope.changePwrd = function()
  {
   alert("修改密码");
  }
 }
);
</div>

我们有登录页面tutorial04_1.html和修改密码页面tutorial04_2.html,控制器代码都写在tutorial04.js中,在这两个页面中都定义了相同的控制器UserController。

var loginMod = angular.module("loginMod", []);
</div>

通过这行代码定义模块,第一个参数为模块名。第二个参数是一个数组,为可选,如果指定该参数则创建一个新的模块,不指定则从配置中检索。

loginMod.controller("UserController",function($scope,$log)...

</div>

通过controller函数向模块中添加一个控制器,第一个参数为控制器名称,第二个参数为控制器实现部分。

然后在tutorial04_1.html和tutorial04_2.html就可以使用ng-app="loginMod"和ng-app="pwordMod"来指定页面中的控制器属于哪个模块。

在浏览器中运行页面可以看到,不同页面调用不用模块中的UserController控制器:

AngularJS源码可点击此处本站下载。

希望本文所述对大家AngularJS程序设计有所帮助。

</div>

您可能想查找下面的文章:

  • AngularJS折叠菜单实现方法示例
  • AngularJS使用ng-class动态增减class样式的方法示例
  • AngularJS全局警告框实现方法示例
  • AngularJS+bootstrap实现动态选择商品功能示例
  • AngularJS前端页面操作之用户修改密码功能示例
  • angularJS之$http:与服务器交互示例
  • angularjs+bootstrap菜单的使用示例代码
  • AngularJS的Filter的示例详解
  • AngularJS表格样式简单设置方法示例
  • angularjs实现下拉列表的选中事件示例

相关文章

  • 2017-05-30angular.fromJson与toJson方法用法示例
  • 2017-05-30AngularJS HTML编译器介绍
  • 2017-05-30AngularJS之依赖注入模拟实现
  • 2017-05-30AngularJS国际化详解及示例代码
  • 2017-05-30AnjularJS中$scope和$rootScope的区别小结
  • 2017-05-30Angular.js指令学习中一些重要属性的用法教程
  • 2017-05-30AngularJS深入探讨scope,继承结构,事件系统和生命周期
  • 2017-05-30Angularjs过滤器使用详解
  • 2017-05-30AngularJS中update两次出现$promise属性无法识别的解决方法
  • 2017-05-30AngularJS中的包含详细介绍及实现示例

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Angular2 路由问题修复详解
    • 详解JavaScript的AngularJS框架中的表达式与指令
    • 浅析AngularJS中的指令
    • 详解Angular中$cacheFactory缓存的使用
    • 实践中学习AngularJS表单
    • Angularjs之filter过滤器(推荐)
    • 基于AngularJS实现iOS8自带的计算器
    • 使用AngularJS来实现HTML页面嵌套的方法
    • 由浅入深剖析Angular表单验证
    • 使用angularjs创建简单表格

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有