一、全局的写法

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

<!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. iOS开源项目周报0209

    由OpenDigg 出品的iOS开源项目周报第七期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等.Hedwig 向 ...

  2. java线程总结2--wait/notify(all)/sleep以及中断概念

    上一篇关于线程的博客简单梳理了一下多线程的一些基本概念,今天这篇博客再进行多线程编程中一些核心的方法进行简单的梳理和总结,主要是wait,sleep和notify方法以及中断的概念 一.中断概念. 在 ...

  3. MIME格式说明，电子邮件格式(转载)

    邮件格式说明 Mutiple Internet Mail Extensions Refer to Internet Official Protocol Standards RFC 822 1 概述 网 ...

  4. 在弹框中获取foreach中遍历的id值，并传递给地址栏（方法2）

    1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...

  5. PhpStorm 自定义快捷键

    PhpStorm 两个重要快捷键 1.CTRL+SHIFT+A 用于恢复隐藏项 2.文件之间的快速跳转 CTRL+SHIFT+N 3.自定义快捷键 第一步:打开左上角file-setting 第二步: ...

  6. Ubuntu 17.04 upgrade to 17.10

    Just try  sudo do-release-upgrade if you get this An upgrade from 'zesty' to 'bionic' is not support ...

  7. jquery 仿windows10菜单效果下载

    http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载

  8. Android获取蓝牙地址

    最近做一个项目,发现Android6.0以上的版本获取的蓝牙地址始终为02:00:00:00, Google一下发现Android早就封掉了相关接口,于是想到反射的方式去获取Mac地址,在此记录一下 ...

  9. vue之computed（计算属性）

    所谓计算属性就是计算data里的数据属性. computed:实时监听的该功能. 即监听是否有修改(浏览器未打开时即开始监听了),监听的值有修改则添加 所监听的data数据属性变化了,自动实时修改. ...

  10. Netty高性能web框架

    框架背景: 前期为公司项目做全链路压测,发现公司跑到tomcat上的服务,即使是最简单的方法QPS也就到3000左右,后期查询发现可能和tomcat的业务逻辑有关. 因为以前在项目开发中用netty做 ...