一、全局的写法

　　有可能会跟其他程序有冲突

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    function Aaa($scope){

        $scope.name = 'hello';

    }

    function Bbb($scope){

        $scope.name = 'hi';

    }

</script>

</head>

<body>

    <div ng-controller="Aaa">

        <p>{{name}}</p>

    </div>

    <div ng-controller="Bbb">

        <p>{{name}}</p>

    </div>

</body>

</html>

二、模块化的写法

<!DOCTYPE HTML>

<html ng-app="myApp"><!--使用了模块方式开发，那么就要指定页面是从哪个模块进行初始化的，因为页面中可能有非常多的模块-->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    //通过这样的方法，实现模块化，接收两个参数，第一个表示这个模块的名字，第二个是一个数组，里面写的是当前模块要依赖的其他模块，现在不需要依赖，那么就空数组

    var m1 = angular.module('myApp',[]);    

    m1.controller('Aaa',function($scope){

        $scope.name = 'hello';

    });

    m1.controller('Bbb',function($scope){

        $scope.name = 'hi';

    });

</script>

</head>

<body>

    <div ng-controller="Aaa">

        <p>{{name}}</p>

    </div>

    <div ng-controller="Bbb">

        <p>{{name}}</p>

    </div>

</body>

</html>

　　上面就是模块化开发的写法，但是当需要压缩处理的话，就不能这么写了

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['$scope',function($scope){

        $scope.name = 'hello';

    }]);

    m1.controller('Bbb',['$scope',function($scope){

        $scope.name = 'hi';

    }]);

</script>

</head>

<body>

    <div ng-controller="Aaa">

        <p>{{name}}</p>

    </div>

    <div ng-controller="Bbb">

        <p>{{name}}</p>

    </div>

</body>

</html>

angularJs中的模块化操作的更多相关文章

  1. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  2. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  3. AngularJS中的指令

    欢迎大家讨论与指导 : )  前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...

  4. AngularJS中的身份验证

    欢迎大家指导与讨论 : )  一.  身份验证的意义  首先呢,网络应用的身份验证的意图在于:保护网站中的重要资源.基于某些原因这些资源并不能公开,比如付费资源(交过钱的用户才能上的网络课程),或者一 ...

  5. Javacript和AngularJS中的Promises

    promise是Javascript异步编程很好的解决方案.对于一个异步方法,执行一个回调函数. 比如页面调用google地图的api时就使用到了promise. function success(p ...

  6. AngularJS 中的 Promise 和 设计模式(转)

    原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...

  7. 关于angularjs 中自定义过滤器

    包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...

  8. AngularJs中的directives（指令part1）

    一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...

  9. Angularjs 中使用指令绑定点击事件

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...

随机推荐

  1. 常用 JavaScript 小技巧及原理详解

    善于利用JS中的小知识的利用,可以很简洁的编写代码 1. 使用!!模拟Boolean()函数 原理:逻辑非操作一个数据对象时,会先将数据对象转换为布尔值,然后取反,两个!!重复取反,就实现了转换为布尔 ...

  2. 搭建jdk环境

    jdk(java develop toolkit)主要包括:编译程序的javac,运行程序的java,javaAPI类库. 主要步骤: 下载jdk安装包 设置环境变量(JAVA_HOME,Path,C ...

  3. 通过Visual Studio 的“代码度量值”来改进代码质量

    1 软件度量值指标 1.1 可维护性指数 表示源代码的可维护性,数值越高可维护性越好.该值介于0到100之间.绿色评级在20到100之间,表明该代码具有高度的可维护性:黄色评级在10到19之间,表示该 ...

  4. Docker学习（四）: 操作容器

    特别声明: 博文主要是学习过程中的知识整理,以便之后的查阅回顾.部分内容来源于网络(如有摘录未标注请指出).内容如有差错,也欢迎指正! =============系列文章============= 1 ...

  5. [C语言] 数据结构概述

    1.数据结构概述 定义 我们如何把现实中大量而复杂的问题以特定的数据类型和特定的存储结构保存到主存储器(内存)中, 以及在此基础上为实现某个功能(比如查找.删除.查找.某个元素,对所有元素进行排序)而 ...

  6. mysql数据库重点（基础优化）

    ### Mysql性能优化 尽量不要写select * ,如果需要全表数据,使用select 加所有字段列名称查询代替* 尽量减少字段列的数学计算,如:where num * 2 >= 30,可 ...

  7. ThreadPoolExecutor线程池中线程不能超过核心线程数量的问题

    int arg1=2;//核心线程 int arg2=40;//最大线程数量 int arg3=100;//空余保留时间 ThreadPoolExecutor pool=new ThreadPoolE ...

  8. Java CountDownLatch解析（上）

    写在前面的话 最近一直在边工作边学习分布式的东西,看到了构建Java中间件的基础知识,里面有提到Java多线程并发的工具类,例如ReentrantLock.CyclicBarrier.CountDow ...

  9. csharp:Conversion Between DataTable and List

    /// <summary> /// http://www.codeproject.com/Tips/784090/Conversion-Between-DataTable-and-List ...

  10. DOM3 textInput事件

    DOM3中引入了文本事件,其中之一 textInput . 当用户再可编辑区域输入字符时触发该事件. 与keypress不同的是,该事件只会在用户输入可视字符时触发,而keypres事件则只要按下键即 ...