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 }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错 ...
随机推荐
- bzoj3675【APIO2014】序列切割
3675: [Apio2014]序列切割 Time Limit: 40 Sec Memory Limit: 128 MB Submit: 1468 Solved: 607 [Submit][Sta ...
- 算法笔记_186:历届试题 高僧斗法(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 古时丧葬活动中经常请高僧做法事.仪式结束后,有时会有“高僧斗法”的趣味节目,以舒缓压抑的气氛. 节目大略步骤为:先用粮食(一般是稻米)在地 ...
- Systemd 基础（转）
Systemd 是 Linux 系统工具,用来启动守护进程,已成为大多数发行版的标准配置. 原文链接:http://www.ruanyifeng.com/blog/2016/03/systemd-tu ...
- free -m 内存
查看内存及交换swap分区大小及使用率 man free NAME free - Display amount of free and used memory in the system SYNOP ...
- 【laravel5.4】中jquery的post Ajax提交
1.post的ajax需要提交csrf_token字段,进行安全过滤 <meta name="csrf-token" content="{{ csrf_token( ...
- map reduce相关程序
Test_1.java /** * Hadoop网络课程模板程序 * 编写者:James */ import java.io.IOException; import java.text.DateFor ...
- Wunderlist 云端任务管理（Todo list）工具
Wunderlist 是一个云端任务管理(Todo list)工具,支持 iPhone, iPad, Android, Windows, Mac OSX 以及 Web 端轻松同步,实现了真正意义上的跨 ...
- iOS - AsyncSocket 的使用
1.AsyncSocket 基于 CFSocket.GCD 进行的封装(OC). 支持 TCP 和 UDP. 完整的回调函数(用于处理各种回调事件,连接成功,断开连接,收到数据等). 需要注意的问题: ...
- 【jQuery】页面顶部显示的进度条效果
<!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...
- python学习笔记——mongodb数据库
1 概述 1.1 文件管理阶段 优点:可以长期保存 能存储大量数据 缺点:没有结构化的组织 查找不方便 数据容易冗余 1.2 数据库管理阶段 有文件存储的优点,同时解决了文件存储的问题 缺点 : 操作 ...