AngularJS数据源的多种获取方式汇总
诸位看完转发一下,促进感兴趣的同学,共同交流。
在AngularJS中获取数据源的方式有很多种,本文给大家整理几种获取数据源的方式,对angularjs获取数据源的方式相关知识感兴趣的朋友一起学习吧
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;
})
- 纳税服务系统总结
- 纳税服务系统一(用户模块)【简单增删改查、日期组件、上传和修改头像】
- 纳税服务系统三(优化处理)【异常处理、抽取BaseAction】
- 机器学习|快速排序思想求topk
- 纳税服务系统二(用户模块)【POI、用户唯一性校验】
- 纳税服务系统四(角色模块)【角色与权限、角色与用户】
- 纳税服务系统五(登陆与系统拦截)【配置系统、子系统首页、登陆与拦截】
- 纳税服务系统六(信息发布管理模块)【Ueditor、异步信息交互、抽取BaseService、条件查询、分页】
- 纳税服务系统七(投诉管理模块)【显示投诉信息、处理回复、我要投诉、Quartz自动受理、统计图FusionCharts】
- Unikernel初体验
- Scala学习教程笔记三之函数式编程、集合操作、模式匹配、类型参数、隐式转换、Actor、
- Scala学习教程笔记二之函数式编程、Object对象、伴生对象、继承、Trait、
- Scala学习教程笔记一之基础语法,条件控制,循环控制,函数,数组,集合
- Kafka的生产者和消费者代码解析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 数据库技术:JDBC,预处理对象,事务控制
- elasticsearch-DSL高级查询语法
- 数据库技术:XML
- 利用logstash将mysql多表数据增量同步到es
- 纯CSS实现自定义单选框和复选框
- 基于Linux安装Mysql5.7
- 纯CSS实现iOS风格打开关闭选择框
- 算法基础:递归
- ELK日志收集原理+es集群+elk搭建+本地目录文件读取,搭建分布式日志收集系统
- 什么是JavaScript 的闭包???
- es集群+elk搭建+kafka搭建分布式日志收集系统
- 设计模式(2)[JS版]---JavaScript如何实现单例模式?
- 算法基础:分治
- 黑客帝国中代码雨如何实现?用 canvas 轻松实现代码雨炫酷效果!
- 设计模式(3)[JS版]-JavaScript中的构造函数模式是什么?