AngularJS数据源的多种获取方式汇总


Posted in Javascript onFebruary 02, 2016

AngularJS 简介

AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成)。与同为 MVC 框架的 Dojo 的定位不同,AngularJS 在功能上更加轻量,而相比于 jQuery,AngularJS 又帮您省去了许多机械的绑定工作。在一些对开发速度要求高,功能模块不需要太丰富的非企业级 WEB 应用上,AngularJS 是一个非常好的选择。AngularJS 最为复杂同时也是最强大的部分就是它的数据绑定机制,这个机制帮助我们能更好的将注意力集中在数据的模型建立和传递上,而不是对底层的 DOM 进行低级的操作。

在AngularJS中,可以从$rootScope中获取数据源,也可以把获取数据的逻辑封装在service中,然后注入到app.run函数中,或者注入到controller中。本篇就来整理获取数据的几种方式。

■ 数据源放在$rootScope中

var app = angular.module("app",[]);
app.run(function($rootScope){
$rootScope.todos = [
{item:"",done:true},
{item:"",done:false}
];
})
<div ng-repeat="todo in todos">
{{todo.item}}
</div>
<form>
<input type="text" ng-model="newTodo" />
<input type="submit" ng-click=""todos.push({item:newTodo, done:false}) />
</form>

以上,把数据源放在$rootScope中的某个字段中,很容易被重写。

■ 数据源放在service中,把servie注入到run函数中

app.service("TodoService", function(){
this.todos = [
{item:"",done:true},
{item:"",done:false}
];
})
app.run(function($rootScope, TodoService){
$rootScope.TodoService = TodoService;
}) 
<div ng-repeat="todo in TodoService.todos">
{{todo.item}}
</div>
<form>
<input type="text" ng-model="newTodo" />
<input type="submit" ng-click=""TodoService.todos.push({item:newTodo, done:false}) />
</form>

在html中似乎这样写比较好:

<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />

在service中增加一个方法:

app.service("TodoService", function(){
this.todos = [
{item:"",done:true},
{item:"",done:false}
];
this.addTodo = fucntion(newTodo){
this.todos.push({item:newTodo, done:false})
}
})

■ 数据源放在service中,把servie注入到controller中

app.controller("TodoCtrl", function($scope, TodoService){
this.TodoService = TodoServce;
})

在对应的html中:

<body ng-app="app" ng-controller="TodoCtrl as todoCtrl">
<div ng-repeat="todo in todoCtrl.TodoService.todos">
{{todo.item}}
</div>
</body>
<form>
<input type="text" ng-model="newTodo" />
<input type="submit" ng-click="todoCtrl.TodoService.addTodo(newTodo)"/>
</form>

■ 数据源放在service中,把servie注入到controller中,与服务端交互

在实际项目中,service还需要和服务端交互。

var app = angular.module("app",[]);
app.service("TodoService", function($q, $timeout){
this.getTodos = function(){
var d = $q.defer();
//模拟一个请求
$timeout(function(){
d.resolve([
{item:"", done:false},
...
])
},3000);
return d.promise;
}
this.addTodo = function(item){
this.todos.push({item:item, done:false});
}
})
app.controller("TodoCtrl", function(TodoService){
var todoCtrl = this;
TodoService.getTodos().then(function(result){
todoCtrl.todos = result;
})
todoCtrl.addTodo = TodoService.addTodo;
})

以上所述是小编给大家分享的AngularJS数据源的多种获取方式汇总,希望对大家有所帮助。

Javascript 相关文章推荐
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 #Javascript
三种AngularJS中获取数据源的方式
Feb 02 #Javascript
原生JS实现拖拽图片效果
Aug 27 #Javascript
基于jquery实现下拉框美化特效
Feb 02 #Javascript
AngularJS自动表单验证
Feb 01 #Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 #Javascript
AngularJS手动表单验证
Feb 01 #Javascript
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python实现网站的模拟登录
2016/01/04 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python numpy数组中的复制知识解析
2020/02/03 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python中的测试框架
2020/11/13 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
咖啡书吧创业计划书
2014/01/13 职场文书
《狼》教学反思
2014/03/02 职场文书
党建目标管理责任书
2014/07/25 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
公司处罚决定书
2015/06/24 职场文书