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学习笔记 nt-child的使用
Jan 17 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
Node.js安装配置图文教程
May 10 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
多种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
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
vue中使用echarts的示例
2021/01/03 Vue.js
Python中文字符串截取问题
2015/06/15 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python如何求解两数的最大公约数
2018/09/27 Python
python tkinter基本属性详解
2019/09/16 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
购房协议书
2014/04/11 职场文书
励志演讲稿500字
2014/08/21 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
投资申请报告
2015/05/19 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL