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 }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错 ...
随机推荐
- CentOS7 设置防火墙端口
[root@localhost wzh]# firewall-cmd --state running [root@localhost wzh]# firewall-cmd --zone=public ...
- POJ 3414 Pots（BFS+回溯）
Pots Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11705 Accepted: 4956 Special J ...
- VS2015 正式版中为什么没有了函数前面引用提示了？
HttpClient _httpClient = new HttpClient(); var clientId = Config.GetValue("AuthUser"); var ...
- 查看tomcat启动文件都干点啥---catalina.bat（转）
在上一次查看tomcat启动文件都干点啥一文中,我们总结出,startup.bat文件的作用就是找到catalina.bat文件,然后把参数传递给它,在startup.bat中,调用catalina. ...
- MSSQL-SQL SERVER还原与备份(导入与导出)
备份: 使用Microsoft SQL Server Management Studio查询出想要的列和结果, 在结果处左上角点击, 软件会自动选中查询出的所有结果, 然后右键"将结果另存为 ...
- Erlang中atom的实现
Erlang的原子(atom)在匹配中有着重要作用,它兼顾了可读性和运行效率. 通过atom,可以实现很多灵活高效的应用. atom可以看作是给字符串生成了一个ID,内部使用的是ID值,必要时可以取出 ...
- iOS GCD中级篇 - dispatch_group的理解及使用
上一篇GCD基础篇,以及同步.异步,并发.并行几个概率的理解 关于dispatch_group的概念以及几种场景下的使用 1.关于dispatch_group 把一组任务提交到队列中,这些队列可以不相 ...
- leetcode48:矩阵旋转
题目链接 输入一个N×N的方阵,要求不开辟新空间,实现矩阵旋转. 将点(x,y)绕原点顺时针旋转90度,变为(y,-x).原来的(-y,x)变为(x,y) class Solution(object) ...
- 【LeetCode】31. Next Permutation (2 solutions)
Next Permutation Implement next permutation, which rearranges numbers into the lexicographically nex ...
- OAF_OAF OAWebBean和OAPageContext的分析（概念）
2015-04-03 Created By BaoXinjian