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"> ...
随机推荐
- python模块学习第 0000 题
将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果: 好可爱>%<! 题目来源:https://github.com/Yixiao ...
- javascript图形动画设计--以简单正弦波轨迹移动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 经典实用的iptables shell脚本
先解释一下iptables里的参数意思:A: 添加 (跟链)-I: 插入-p: 跟协议-s: 源IP-d: 目标IP-j: 操作行为-t: 加表--to-source:SNAT用,表示改成的SNAT源 ...
- SQL Serever学习17——数据库的分析和设计
数据库的分析和设计 设计数据库确定一个合适的数据模型,满足3个要求: 符合用户需求,包含用户所需的所有数据 能被数据库管理系统实现,如sqlserver,oracle,db2 具有比较高质量,容易理解 ...
- C# 相对路径指定详解
1. 根目录 .\\ 或者直接给出文件名称,是找根目录的路径. 如:path = "gs.mdb" 与 path = ".\\gs.mdb"是一个意思. 2. ...
- C# 随机数类
using System; namespace DotNet.Utilities { /// <summary> /// BaseRandom /// 产生随机数 /// /// 随机数管 ...
- 利用三层判断sql数据库中编码是否已经存在(个人拙作,不喜勿喷)
本人.Net新手,初学三层便想记录写笔记,以供像自己一样的新人去学习,大神就不用看啦 Dal层: /// 判断编码是否存在 /// </summary> /// <param nam ...
- 给Solr配置中文分词器
第一步下载分词器https://pan.baidu.com/s/1X8v65YZ4gIkNQXsXfSULBw 第二歩打开已经解压的ik分词器文件夹 将ik-analyzer-solr5-5.x.ja ...
- C#图片验证码绘制
制作验证码.也可以画弧线之类..... //新建一个网站,在后台代码中引用一个using Stystem.Drawing的命名空间 Bitmap img = , ); //制作一个宽100,高50的画 ...
- C# 学习笔记（一） Winform利用Assembly反射动态创建窗体
1. 添加Reflection //添加对Reflection程序集引用 using System.Reflection; // 引用窗体创建方法CreateForm,传入参数 private voi ...