一、全局的写法

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

<!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. i.mx6 Android5.1.1 初始化流程之init进程（未完成）

    概述: 接在i.mx6 Android5.1.1 初始化流程之框架之后 参考资料:http://blog.csdn.net/mr_raptor/article/category/799879 相关源码 ...

  2. Golang之并发资源竞争(互斥锁)

    并发本身并不复杂,但是因为有了资源竞争的问题,就使得我们开发出好的并发程序变得复杂起来,因为会引起很多莫名其妙的问题. package main import ( "fmt" &q ...

  3. Solr环境配置

    1．准备 第一步下载JDK1.8.0_131Tomcat9.0.7  注意版本的兼容性 第二歩下载solr,目前使用的是solr-7.3.0 2．安装 1.  将 solr 压缩包解压,并将solr- ...

  4. 【SSH网上商城项目实战02】基本增删查改、Service和Action的抽取以及使用注解替换xml

    转自:https://blog.csdn.net/eson_15/article/details/51297698 上一节我们搭建好了Struts2.Hibernate和Spring的开发环境,并成功 ...

  5. [LeetCode]Longest Substring Without Repeating Characters题解

    Longest Substring Without Repeating Characters: Given a string, find the length of the longest subst ...

  6. JSP9大内置对象

    JSP9大内置对象 JSP9个内置对象:out对象 用于输出各种数据reuest对象 封装了来自客户端的各种信息response对象 封装了服务器的响应信息exception对象 封装了程序运行过程中 ...

  7. 循环遍历正则验证input框内容合法性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 判断是手机端还是电脑端 isMobile()

    1.在PublicController控制器中写好判断手机端方法. <?php namespace Home\Controller; use Think\Controller; class Pu ...

  9. BZOJ1492 [NOI2007]货币兑换

    Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下 简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个 ...

  10. let 和 var 区别

    javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是”javascript 严格模式”,比如下述的代码运行就会报错: <Javascript 严格模式详解&g ...