一、全局的写法

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

<!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. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. 二、socket编写简单BIO的HTTP服务器

    一.目标 诸如tomcat等web服务器中间件简化了我们web的开发成本,但有时候我们或许并不需要这么一个完备的服务器,只是希望做一个简单地处理或者做特殊用途的服务器. 本文将提供一个HTTP的服务器 ...

  3. Java线程入门第二篇

    Java线程通信方法 0.(why)每个线程都有自己的栈空间,我们要线程之间进行交流,合作共赢. 1.synchronized和volatile关键字 a)  看下面的synchronized关键字 ...

  4. groovy类、构造函数、方法

    数据类型:groovy支持Java语言规范定义的数据类型 类:与Java类的主要区别 1.没有可见修饰符的类或者方法是自动公开的 2.类不需要与源文件定义相同名称,但是默认规定定义一样 3.一个源文件 ...

  5. PHP-redis英文文档

    作为程序员,看英文文档是必备技能,所以尽量还是多看英文版的^^ PhpRedis The phpredis extension provides an API for communicating wi ...

  6. Spring Boot 概述

    spring boot 的功能: 1.自动配置 2.起步依赖 3.Actuator hello word: http://start.spring.io 中按需生产spring boot项目,然后倒入 ...

  7. Q：关于栈的常见问题

     对于栈,一个常见的问题是:给定一个序列a0,a1,a2,a3...an依次顺序入栈,在元素顺序入栈的过程中,栈中任意一个元素可以选择是否出栈,则其共有几种出栈的可能,给定的出栈序列中,哪种是不可能的 ...

  8. 1..net mvc的原理概述

    请求过来,根据ip和端口,由iis服务器进行接收,如果是静态文件则直接返回文件内容,如果无法解析,则根据映射规则找到对应请求后缀 的ASPNET_ISAPI.dll处理程序集,交由其进行处理. 1.此 ...

  9. 并发模型之Master-Worker设计模式

    一.Master-Worker设计模式 Master-Worker模式是常用的并行设计模式.它的核心思想是,系统有两个进程协议工作:Master进程和Worker进程.Master进程负责接收和分配任 ...

  10. lincode 题目记录6

    the Duplicate Number  132 PatternFind 找重复的数字··直接暴力枚举是不行的···又超时提示·· 暴力枚举的写法· res=0 def findDuplicate( ...