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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
小程序云开发实战小结
Oct 25 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python面向对象类的继承实例详解
2018/06/27 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python做反被爬保护的方法
2019/07/01 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python烟花效果的代码实例
2020/02/25 Python
Python中return函数返回值实例用法
2020/11/19 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
实习单位推荐信范文
2013/11/27 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
Python必备技巧之函数的使用详解
2022/04/04 Python