angular学习笔记(二)-创建angular模块
如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块.
模块有助于把东西从全局命名空间中隔离.
今天学习如何自定义创建模块:
<!DOCTYPE html>
<html>
<head>
<title>2.1模块</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="TextController">
<h1>{{text.message}}</h1>
<h1>{{text.name}}</h1>
</div>
</div>
</body>
</html>
var messages = {};
messages.message = 'hi';
messages.name = 'code_bunny';
var myAppModule = angular.module('myApp',[]);
myAppModule.controller('TextController',function($scope){
$scope.text = messages;
});
<div ng-app="myApp">:
1. ng-app可以加在任何元素上,表示使用这个模块来管理这个元素中的所有内容,
2. 一个页面里只能有一个ng-app,不能有多个,不同的页面可以运用不同的ng-app模块,但是可以在同一个js里定义多个模块
var messages = {};
messages.message = 'hi';
messages.name = 'code_bunny';
var myAppModule = angular.module('myApp',[]);
myAppModule.controller('TextController',function($scope){
$scope.text = messages;
});
var otherAppModule = angular.module('otherApp',[]);
otherAppModule.controller('TextController',function($scope){
$scope.text = messages;
$scope.text.name = 'white-bunny';
});
3. ng-app="模块名"
然后在js中使用如下方法来扩展模块:
var myAppModule = angular.module('模块名',[]);
angular.module()中的第二个参数是必须是一个数组,用于定义该模块依赖的模块,数组的值是字符串,也就是依赖的模块的名字.一旦写入了依赖的模块,那么该模块也就拥有了依赖的模块的指令,方法,等...
比如常用的ngResource模块:
var HttpREST = angular.module('HttpREST',['ngResource']);
HttpREST.factory('cardResource',function($resource){
return $resource('/card/user/:userID/:id',{userID:123,id:'@id'},{charge:{method:'POST',params:{charge:true},isArray:false}})
});
在这里依赖了ngResource模块,就可以使用$resource服务了.(当然需要加载angular-resource.min.js这个文件)
又比如:
//myRecipe.service模块用来定义服务
var service = angular.module('myRecipe.service',['ngResource']);
service.factory('Recipe',['$resource',function($resource){
return $resource('/recipe/:id',{id:'@id'});
}]);
service.factory('loadRecipes',['Recipe','$q',function(Recipe,$q){
return function(){
...
}
}]);
service.factory('loadRecipe',['Recipe','$q','$route','$routeParams',function(Recipe,$q,$route,$routeParams){
return function(){
...
}
}]);
//myRecipe.directive模块用来定义指令
var directive = angular.module('myRecipe.directive',[]);
directive.directive('focus',function(){
return {
...
}
});
directive.directive('loading',['$rootScope',function($rootScope){
return {
...
}
}]);
//在myRecipe中就可以使用myRecipe.service和myRecipe.directive里面的服务和指令了.
var app = angular.module('myRecipe',['myRecipe.service','myRecipe.directive']);
4. 可以在自己扩展的模块下添加控制器:
myAppModule.controller('TextController',function($scope){
...
});
$scope.text = messages; text是$scope作用域下的一个对象,但是message却是一个外部的对象,使用这种方式来定义作用于下的对象,而不是直接在作用域中声明,这样,同一个变量,可以在多个模块或多个控制器中被使用
相关代码托管: https://github.com/OOP-Code-Bunny/angular
angular学习笔记(二)-创建angular模块的更多相关文章
- angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构
ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入 ...
- angular学习笔记(二十九)-$q服务
angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...
- angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构
在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要 ...
- angular学习笔记(二十八-附1)-$resource中的资源的方法
通过$resource获取到的资源,或者是通过$resource实例化的资源,资源本身就拥有了一些方法,$save,$delete,$remove,可以直接调用来保存该资源: 比如有一个$resour ...
- angular学习笔记(二十八-附2)-$http,$resource中的promise对象
下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...
- angular学习笔记(二十五)-$http(3)-转换请求和响应格式
本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({ transfo ...
- angular学习笔记(二十四)-$http(2)-设置http请求头
1. angular默认的请求头: 其中,Accept 和 X-Requested-With是$http自带的默认配置 Accept:application/json,text/plain ...
- angular学习笔记二
已经了解了angular的基础知识以后,我们继续开始了解angular的基础模块,首先在写angular应用时需要引入angularjs 在使用angular时必须为它定义边界(angular的作用 ...
- angular学习笔记(二十六)-$http(4)-设置请求超时
本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错 ...
随机推荐
- html5开放资料
http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html KineticJS教程(12) 摘要: KineticJS教程(12) 作者 ...
- 移动端网页宽度值（未加meta viewport标签）
移动端网页宽度值(未加meta viewport标签): iphone:980px Galaxy(盖乐世):980px Nexus:980px blackberry(黑莓):980px LG:980p ...
- Ubuntu12.04+OpenERP6.1更改HTTP端口号为80
在Ubuntu12.04中安装好OpenERP6.1以后,默认的端口号为8069,如果我们想改变为默认的80端口,可以通过如下方式处理. 1.首先通过iptables进行端口映射转换:sudo ipt ...
- Linux内核3.11的socket busy poll机制避免睡眠切换
Linux的网络协议栈很独立,上下通过两个接口分别和用户态以及设备相连.也能够看作是北向和南向接口...北向通过socket接口,南向通过qdisc接口(你能够觉得是上层的netdev queue,对 ...
- 安装mysql 和 apache
一. 安装apache服务器 1. 检查apache服务器是否安装 #service httpd status 2. 如提示未被识别的服务,则表明组件未安装,需手动安装 #yum install ht ...
- DevExpress GridControl 动态创建字段及主细关系表过程
原文地址:http://hi.baidu.com/qdseashore/item/38f1153e9d0143637d034b7a 在做项目中,往往需要在查询基类模板窗口内做主细关系Grid,引用一下 ...
- C# 的Timer 在javascript中的实现--基于Typescript
class Timer { //js 内置的timer对象 private _jsInnerTimerObj: any; private _enable: boolean; private _hand ...
- JavaScript中的闭包（closure）
闭包的特性 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露,主要用于私有的方法和变 ...
- get请求乱码情况
编写一个RegistServlet处理用户的Get请求数据 public void doGet(HttpServletRequest request, HttpServletResponse resp ...
- 解决错误This message can only be sent over HTTPS.
在做基于Owin oauth客户端申请授权,调用如下代码: this.InitializeWebServerClient(); var userAuthorization = _webServerCl ...