学习笔记-AngularJs(四)
之前学习的事视图与模版,我们在控制器文件中直接定义一个数组,让其在模版文件中用ng-repeat指令构造一个迭代器,定义的数组http://t.cn/RUbL4rP如同以下:
$scope.phones = [
{'name':'xioabin','number':'18824863682','age':'12'},
{'name':'xioalong','number':'18824863683','age':'19'},
{'name':'xiaohua','number':'18824863684','age':'5'},
{'name':'xiaoMING','number':'18824863685','age':'1'},
{'name':'xiaoTU','number':'18824863686','age':'2'},
{'name':'xiaoKE','number':'18824863687','age':'40'},
];
这种形式往往不是我们所要的,我们通常会使用常用ajax技术去获取数据,在angular也有类似的服务来实现XHR,那就是 $http,使用怎么一个服务,需要将代码放置在本地服务器或是web站点上,首先先准备phone.json文件,如下:
[
{"name":"xioabin","number":"18824863682","age":"12"},
{"name":"xioalong","number":"18824863683","age":"19"},
{"name":"xiaohua","number":"18824863684","age":"5"},
{"name":"xiaoMING","number":"18824863685","age":"1"},
{"name":"xiaoTU","number":"18824863686","age":"2"},
{"name":"xiaodfs","number":"18824863687","age":"46"},
{"name":"xiaodfE","number":"18824863682","age":"46"},
{"name":"xiaobh","number":"18824863680","age":"48"},
{"name":"xiaogg","number":"18824863687","age":"10"},
{"name":"xiaouu","number":"18824863686","age":"20"},
{"name":"xiaoKds","number":"18824863682","age":"30"},
{"name":"xiaoKEdad","number":"18824863689","age":"60"},
{"name":"xiaoKb","number":"18824863683","age":"90"},
{"name":"xiaofa","number":"18824863685","age":"17"}
]
内容可以自己设置,模版文件代码与之前大同小异:
<!doctype html>
<html ng-app ng-controller="PhoneListCtrl">
<head>
<meta charset='utf8' />
<title ng-bind="'Google Phone Gallery:' query"></title>
<!-- <title ng-bind-template="Google Phone Gallery:{{query}}"></title> -->
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="example2">
Select:
<select name="select" id="select" ng-model='order'>
<option value="name">名字</option>
<option value="age">年龄</option>
</select>
Search: <input name="search" type="text" ng-model='query' />
<ul>
<!--迭代器-->
<li>
<span>序号</span>
<span>姓名</span>
<span>号码</span>
<span>年龄</span>
</li>
<li ng-repeat='phone in phones | filter:query | orderBy:order'>
<span>{{$index 1}}</span> <span>{{phone.name}}</span> <span>{{phone.number}}</span> <span>{{phone.age}}</span>
</li>
</ul>
</div>
</body>
</html>
不同的就是控制器文件的不同,如下:
//注入服务$http
function PhoneListCtrl($scope,$http){
$http.get("phone.json").success(function(data, status, headers, config) {
if(status==200){ $scope.phones = data; }
console.log(status "," headers "," config);
// alert(JSON.stringify(data));
});
$scope.order = 'name';
}
这里传入了一个$http,那么我们就可以通过$http.get(路径).success(function(data,status){/*成功获取数据,之后该干嘛?*/}),data是返回的数据,status是状态码,header和config可以打印出来看一下,应该是一些配置和头部吧!这样$scope.phones就与之前一样是一个数组了!
官网的$http是这样的形式,可以参考着写:
$http({
url:'...',
method:'...',
data:'...',
params:'...',
cache:'...'
})
.success(function(){....})
.error(function() {.....});
如果我们的控制器按上面那样写的话,在压缩代码时候会出错,那么有这两种方法可以解决这个问题:
为了克服压缩引起的问题,只要在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组,就像被注释掉那段最后一行那样:
PhoneListCtrl.$inject = ['$scope', '$http'];
另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制器:把要注入的服务放到一个字符串数组(代表依赖的名字)里,数组最后一个元素是控制器的方法函数:
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
这就是angularjs的依赖注入了!当控制器构造的时候,AngularJS的依赖注入器会将这些服务注入到你的控制器中。当然,依赖注入器也会处理所需服务可能存在的任何传递性依赖(一个服务通常会依赖于其他的服务)。
注意不要使用‘$’前缀来命名你自己的服务和模型(就是自己可以定义自己的服务,像$http),否则可能会产生名字冲突。
更多专业前端知识,请上 【猿2048】www.mk2048.com
学习笔记-AngularJs(四)相关推荐
- ASP.NET Core 2 学习笔记(四)依赖注入
原文:ASP.NET Core 2 学习笔记(四)依赖注入 ASP.NET Core使用了大量的依赖注入(Dependency Injection, DI),把控制反转(Inversion Of Co ...
- Spring Cloud 学习笔记(四)-Spring Cloud Hystrix
Spring Cloud 学习笔记(四)-Spring Cloud Hystrix 由于前一阵子项目的原因,今天才继续弄上,今天想学习一下Hystrix组件 这个组件还挺抽象的,最开始我一直没太明白, ...
- OpenCV学习笔记(四十六)——FAST特征点检测features2D OpenCV学习笔记(四十七)——VideoWriter生成视频流highgui OpenCV学习笔记(四十八)——PCA算
OpenCV学习笔记(四十六)--FAST特征点检测features2D 特征点检测和匹配是计算机视觉中一个很有用的技术.在物体检测,视觉跟踪,三维常年关键等领域都有很广泛的应用.这一次先介绍特征点检 ...
- OpenCV学习笔记(四十一)——再看基础数据结构core OpenCV学习笔记(四十二)——Mat数据操作之普通青年、文艺青年、暴力青年 OpenCV学习笔记(四十三)——存取像素值操作汇总co
OpenCV学习笔记(四十一)--再看基础数据结构core 记得我在OpenCV学习笔记(四)--新版本的数据结构core里面讲过新版本的数据结构了,可是我再看这部分的时候,我发现我当时实在是看得太马 ...
- Windows x64内核学习笔记(四)—— 9-9-9-9-12分页
Windows x64内核学习笔记(四)-- 9-9-9-9-12分页 前言 9-9-9-9-12分页 实验一:线性地址转物理地址 页表基址 定位基址 PTE to PXE 实验二:通过页表基址定位各 ...
- Intel VT学习笔记(四)—— VMCS(下)
Intel VT学习笔记(四)-- VMCS(下) 要点回顾 VM-Exit Information Guest state fields 代码实现 参考资料 要点回顾 在上一篇中,我们了解了如何设置 ...
- 软件调试学习笔记(四)—— 异常的处理流程
软件调试学习笔记(四)-- 异常的处理流程 要点回顾 异常的处理流程 实验1:理解调试器与异常的关系 未处理异常:最后一道防线 实验2:理解UnhandledExceptionFilter执行流程 实 ...
- 消息机制学习笔记(四)—— 内核回调机制
消息机制学习笔记(四)-- 内核回调机制 要点回顾 内核调用 实验1:理解内核调用 第一步:编译并运行以下代码 第二步:修改窗口过程函数,重新运行 KeUserModeCallback 实验2:在OD ...
- Windows异常学习笔记(四)—— 编译器扩展SEH
Windows异常学习笔记(四)-- 编译器扩展SEH 要点回顾 编译器支持的SEH 过滤表达式 实验一:理解_try_except 实验二:_try_except 嵌套 拓展SEH结构体 scope ...
- Windows事件等待学习笔记(四)—— 事件信号量互斥体
Windows事件等待学习笔记(四)-- 事件&信号量&互斥体 要点回顾 事件 实验:验证SignalState 第一步:编译并运行以下代码 第二步:观察结果 第三步:修改代码并执行 ...
最新文章
- 用户月活跃度在哪里可以查_2020年12月计算机等级考试报名时间,另外11月6号可以查9月考试成绩...
- 罗斯蒙特电磁流量计8723说明书_罗斯蒙特8700系列电磁流量计和传感器的几种类型!...
- MySQL中left join、right join与inner join的区别
- 简明Python3教程 16.标准库
- tensorflow知识点
- PHP arrray_filter(), array_map()区别与应用
- 软件工程概论第十三周学习进度
- java继承求三角形圆形面积_Java - 三角形与圆形面积
- 基于日志处理的ElasticSearch的学(gen)习(feng)
- Atitit. 衡量项目规模 ----包含的类的数量 .net java类库包含多少类 多少个api方法??
- jQuery WEUI
- 通过ToStringBuilder实现toString方法
- matlab教程pdf,Matlab2010经典超强教程(清晰、版).pdf
- InfoPath 2007表单应用
- android动态开场,看得见的数据结构Android版之开篇前言+完篇总结
- 【树莓派】基于树莓派,实现无线路由功能
- 2022-2028全球及中国2-降冰片烯行业研究及十四五规划分析报告
- Yahoo大规模时列数据异常检测技术及其高性能可伸缩架构
- 从 Github 下载东西用不了的问题【NETSDK1141】
- 女巫煎蛋(omelette for a witch)