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 }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错 ...
随机推荐
- jsp中的js嵌入Extjs与后台action交互
近期做前台须要和后台交互数据,直接使用js一直没实现.最后使用extjs实现了,extjs代码直接嵌入到jsp的js代码中就可以(0跟jsp里使用extjs一样,须要载入extjs的几个文件) < ...
- jsoup抓取豆瓣美女
package com.huowolf; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOu ...
- 算法笔记_191:历届试题 大臣的旅费(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 很久以前,T王国空前繁荣.为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市. 为节省经费,T国的大臣们经过思考, ...
- 如何理解VB窗体中的scale类属性及width height属性之间的关系
如何理解VB窗体中的scale类属性及width height属性之间的关系 VB中的SCALEHIEGT,SCALEWIDTH,与窗体中的WIDTH,HEIGHT的区别及关系是许多VB初学者难以理解 ...
- js立即执行函数应用--事件绑定
js中立即执行函数的应用:应用到事件绑定上. 少说多做,直接运行代码(代码中有注释): <!DOCTYPE html> <html lang="zh"> & ...
- CentOS 6.8 ftp服务安装配置 基于本地用户和虚拟用户
CentOS 6.8 ftp服务安装配置 基于本地用户和虚拟用户 一.安装ftp服务 1.检查是否已经安装 # rpm -qa | grep ftp ftp-0.17-54.el6.x86_64 vs ...
- 实践：由0到1-无线大数据UX团队的成长
背景 大数据产品的在项目成立之初,采用的是模仿原有网优工具的方式做UI设计,由BA主导画草图.手绘线框图.excel制作,更有直接打开参考产品做原型的方式,没有统一的设计和规范可言.随着团队逐渐增多. ...
- 【vue.js】绑定click事件
- 关于iOS 类扩展Extension的进一步理解
很多人可能会问 iOS的分类和扩展的区别,网上很多的讲解,但是一般都是分类讲的多,而这也是我们平常比较常用的知识:但是,对于扩展,总觉得理解的朦朦胧胧,不够透彻. 这里就讲一下我自己的理解,但是这个 ...
- HDUOJ-----（1329）Calling Extraterrestrial Intelligence Again
Calling Extraterrestrial Intelligence Again Time Limit: 2000/1000 MS (Java/Others) Memory Limit: ...