angularJs中的模块化操作
一、全局的写法
有可能会跟其他程序有冲突
<!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中的模块化操作的更多相关文章
- AngularJS中使用Directive、Controller、Service
AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...
- AngularJS中的指令全面解析（转载）
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- AngularJS中的指令
欢迎大家讨论与指导 : ) 前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...
- AngularJS中的身份验证
欢迎大家指导与讨论 : ) 一. 身份验证的意义 首先呢,网络应用的身份验证的意图在于:保护网站中的重要资源.基于某些原因这些资源并不能公开,比如付费资源(交过钱的用户才能上的网络课程),或者一 ...
- Javacript和AngularJS中的Promises
promise是Javascript异步编程很好的解决方案.对于一个异步方法,执行一个回调函数. 比如页面调用google地图的api时就使用到了promise. function success(p ...
- AngularJS 中的 Promise 和 设计模式(转)
原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...
- 关于angularjs 中自定义过滤器
包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...
- AngularJs中的directives（指令part1）
一.指令的职责 指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
- Angularjs 中使用指令绑定点击事件
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...
随机推荐
- 基于 Annotation 的 Spring AOP 权限验证方法的实现
1. 配置 applicationContext 在 Spring 中支持 AOP 的配置非常的简单,只需要在 Spring 配置文件 applicationContext.xml 中添加: < ...
- 网页布局之Div
div(division分区) 它是一个块标签,主要用来把网页中相关的内容组织到一起 你可以把网页的头部放到一个标签中,主体部分放到另一个标签中 使用class类名描述div内容 要想区分每个div, ...
- linux的环境变量与文件查找
1. 环境变量 1.1 变量 shell 中的变量有不同类型,可参与运算,有作用域限定 变量的作用域即变量的有效范围(比如一个函数中.一个源文件中或者全局范围),在该范围内只能有一个同名变量.一旦离开 ...
- Gradle修改缓存路径 和 Gradle修改Maven仓库地址
Gradle修改缓存路径 修改gradle启动脚本进入gradle安装的bin目录,使用文本编辑器打开gradle.bat文件,在如图的位置添加以下语句 set GRADLE_OPTS="- ...
- IAAS，SAAS，PAAS, CaaS的区别
来源:云计算头条微信公众号 作者: 你一定听说过云计算中的三个“高大上”的你一定听说过云计算中的三个“高大上”的概念:IaaS.PaaS和SaaS,这几个术语并不好理解.不过,如果你是个吃货,还 ...
- Oracle数据库基本操作 （五） —— 使用java调用存储过程
一.环境准备 登录Oracle数据库scott账号,利用emp进行操作. 1.创建 proc_getyearsal 存储过程 -- 获取指定员工年薪 create or replace procedu ...
- Python Django 路由分发
mysite1 为一个django工程 cmdb为一个项目 dashboard为一个项目 在mysite1工程下的urls.py中定义如下: from django.conf.urls import ...
- NodeJS中resolve添加地址无效
今天一个朋友在群里问了这样一个问题,他使用url.resolve()添加地址无效,我看了一下,发现是他没有注意细节, resolve可以在二级目录下增加,他使用的时候只是一级目录,所以添加会有问题.他 ...
- [COCI2006-2007#1] Bond
状压DP \(dp[i]\)表示当前选人状态为\(i\)且选择了前\(i.count()\)个物品时最大的概率 #include"cstdio" #include"cst ...
- JSTL总结摘要
一 概述 1.什么是JSTL? JSP Standard Taglib,一个定义了一系列标签的标签库,以取代在JSP页面中嵌套的java代码,经常与EL结合使用,使页面风格统一,维护方便. JSTL标 ...