Angular的模块化（代码分享）

在前面的几个文章中，我们的数据都是以函数的方式定义在全局的作用域下，这样很显然是不对的，没有模块化的思想，下面的例子介绍Angular的模块化！

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AngularJs模块化</title>
<script type="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js">
</head>
<body>
<div ng-controller='Aaa'>
  <p>{{name}}</p>
</div>
<div ng-controller='Bbb'>
  <p>{{name}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
//参数1：模块的名字，参数2：当前模块中依赖的模块，後面的文章会介绍
m1.controller('Aaa',function($scope){
  $scope.name = 'hello AngularJs';
});
m1.controller('Bbb',function($scope){
  $scope.name = 'Hi';
});
</script>
</body>
</html>

首先在html上绑定初始化的名称，并附上myApp，使用angular.model在JS中定义多个模块，并附上参数。

再使用控制器定义数据，注意控制器传递的参数，模块名和匿名函数。

都知道我们的项目在上线後合并压缩的，这样我们匿名函数传递的形参在压缩後出现问题，所以这个时候我们需要将参数包裹成数组，来避免压缩的问题！

m1.controller('Aaa',['$scope',function($scope){
  $scope.name = 'hello AngularJs';
}]);
m1.controller('Bbb',['$scope',function($scope){
  $scope.name = 'Hi';
}]);

这个时候注意控制器传递的参数，模块名和数组(包含服务和匿名函数)。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

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

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

    本文实例讲述了AngularJS模块化操作用法.分享给大家供大家参考,具体如下: 在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差.通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在HTML页面中引入该文件. 然而这样会带来新的问题,我们的控制器全都定义在全局的命名空间中,假设我们有一个公共的JS文件,在登录页面和密码修改页面都引入这个JS,A开发人员和B开发人员英雄所见略同,对控制器的命名都是U

  • AngularJS 模块化详解及实例代码

    AngularJS 模块化详解及实例代码

    AngularJS有几大特性,比如: 1 MVC 2 模块化 3 指令系统 4 双向数据绑定 那么本篇就来看看AngularJS的模块化. 首先先说一下为什么要实现模块化: 1 增加了模块的可重用性 2 通过定义模块,实现加载顺序的自定义 3 在单元测试中,不必加载所有的内容 之前做的几个例子,控制器的代码直接写在script标签里面,这样声明的函数都是全局的,显然不是一个最好的选择. 下面看看如何进行模块化: <script type="text/javascript">

  • Angular的模块化（代码分享）

    在前面的几个文章中,我们的数据都是以函数的方式定义在全局的作用域下,这样很显然是不对的,没有模块化的思想,下面的例子介绍Angular的模块化! <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>

  • Angular实现下载安装包的功能代码分享

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html ng-app="myPro"> <head> <meta charset="UTF-8"> <title>angular-实现下载安装包的功能</title> <script src="js/angular.min.js"></script> <sc

  • angular将html代码输出为内容的实例

    在前端与后台的撕逼中,很大一部分是因为数据的问题.使用angular会遇到这样的问题,后台返回的数据不是自己想要的纯字符串,而是带有html标签及属性的,那么我们将它输出来后,在页面上就出现了带有标签的内容,很不优雅.那么找后台更改的话,又会引起议论撕逼大战,而且人家不一定有时间搭理你.这样的情况下,我们就要自己动手,丰衣足食了. 通常angular绑定数据有这样的方法,{{}}或者ng-bind =",此时数据为带有html标签的数据的话,那么就输出为带有标签的数据,不友好. 如何更改呢? 方

  • angular.js分页代码的实例

    angular.js分页代码的实例

    对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用. 先来看下效果图 实例代码 app.directive('pagePagination', function(){ return { rest

  • Java面试题-实现复杂链表的复制代码分享

    阿里终面在线编程题,写出来与大家分享一下 有一个单向链表,每个节点都包含一个random指针,指向本链表中的某个节点或者为空,写一个深度拷贝函数,拷贝整个链表,包括random指针.尽可能考虑可能的异常情况. 算法如下: /* public class RandomListNode { int label; RandomListNode next = null; RandomListNode random = null; RandomListNode(int label) { this.labe

  • Python生成数字图片代码分享

    本文向大家分享了几段Python生成数字图片的代码,喜欢的朋友可以参考.具体如下: 最终版本 # -*- coding:utf-8 -*- from PIL import Image,ImageFont,ImageDraw,ImageFilter import random import os import time class Code(object): def __init__(self, imgSize=(35,35),\ fontSize=25, bgColor=(255,)*4, fo

  • PHP Web木马扫描器代码分享

    不废话了,直接贴代码了. 代码如下: <?php header('content-type:text/html;charset=gbk'); set_time_limit(0);//防止超时 /** * * php目录扫描监控增强版 * * @version 1.0 * 下面几个变量使用前需要手动设置 * **/ /*===================== 程序配置 =====================*/ $pass="test";//设置密码 $jkdir=&quo

  • Java实现JS中的escape和UNescape代码分享

    众所周知,JavaScript中escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串.下面,我们就来看看 Java语言中类似JavaScript中的escape() 和unescape() 转码方法,具体代码如下: public class EscapeUnescape { public static String escape(String src) { int i; char j; StringBuffer tmp = new StringBuffer(); tm

  • JavaScript图片放大技术(放大镜)实现代码分享

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 手机端转盘抽奖代码分享

    手机端转盘抽奖代码分享

    演示效果如下: 不废话了,直接给大家贴代码了. html部分 <div class="turntableWap top10"> <table border="0" cellspacing="0"> <tr> <td tag="0"><img src="../images/4.png" alt="4元"></td> &

随机推荐