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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
多种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
Zerg基本策略
2020/03/14 星际争霸
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
js转html实体的方法
2016/09/27 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
Python常见数据结构详解
2014/07/24 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
深入理解Python中字典的键的使用
2015/08/19 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python实现聊天小程序
2018/03/13 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python帮你识破双11的套路
2019/11/11 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
如何卸载python插件
2020/07/08 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
什么是封装
2013/03/26 面试题
车间组长岗位职责
2013/12/20 职场文书
导师工作推荐信
2015/03/27 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
golang特有程序结构入门教程
2021/06/02 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL