一、全局的写法

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

<!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傻金币动画

    项目要做一个撒金币签到的动画,分享出来 金币.zip,其中有几个做的时候注意的点. 1.金币掉入口袋的过程,有入口袋的效果. 开始做的时候直接把金币添加到底部的View上这样入口袋的时候,口袋里边显示 ...

  2. 有关OLAP的一些概念

    MR引擎: MapReduce:是一种离线计算框架,将一个算法抽象成Map和Reduce两个阶段进行处理,每个阶段都是用键值对(key/value)作为输入和输出,非常适合数据密集型计算.Map/Re ...

  3. C# Aspose填充excel模板数据，下载

    public Result<object> GetAExcelFieItem(string[] aid, int kind, string contype) { string fileUr ...

  4. Timer控件

    Timer控件是定期引发事件的控件,时间间隔的长度由interval属性定义,其值以毫秒为单位吗,若启用了该组件,则每个事件间隔引发一个Tick事件,Timer组件的主要方法包括start和stop, ...

  5. 对自写的Asp.Net分页控件的应用方式(异步无刷新分页)

    前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  6. 0 test classes found in package in XXXX

    除了参考其他的方法,要注意XXXX位置下是否有空文件夹,删掉.

  7. Excel Metadata

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. jQuery自适应-3D旋转轮播图

    3D旋转轮播图 本例源于(站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm) 其他相似示例(https://www.cnblogs.com/inc ...

  9. git杂记-记录每次更新到仓库

    git status 和 git diff的运用 git status 记录的是关于仓库文件是否有变更,例如是否被修改,是否被添加到暂村区.至于文件更改了什么内容该命令并不关心: git status ...

  10. Bzoj3197: [Sdoi2013]assassin

    题面 传送门 Sol 套路:找出重心,如果有两个就新建一个点 然后把这棵树hash一下 设\(f[i][j]\)表示第一颗树到\(i\)第二棵树到\(j\),子树\(i,j\)同构的付出的最小代价 转 ...