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;
})
以上所述是小编给大家分享的AngularJS数据源的多种获取方式汇总，希望对大家有所帮助。
相关文章
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。这篇文章主要介绍了Angular动态绑定样式及改变UI框架样式的方法小结,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了AngularJS 2.0入门权威指南的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-10-10
今天小编就为大家分享一篇Angular 利用路由跳转到指定页面的指定位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
随着javaEE的spring框架的兴起，依赖注入（IoC）的概念彻底深入人心，它彻底改变了我们的编码模式和思维。在AngularJS中也有依赖注入的概念，像spring中的依赖注入，但是又有所不同。Angular中只需要在需要的地方声明一下即可，类似模块的引用，因此十分方便。2016-10-10
本篇文章主要介绍了从零搭建一个angular4.0项目，主要用到的工具angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0)，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了AngularJS学习笔记（三）数据双向绑定的简单实例，详解数据双向绑定实例的相关资料,需要的朋友可以参考下。2016-11-11
使用AngularJS编写较为优美的JavaScript代码指南
这篇文章主要介绍了使用AngularJS编写较为优美的JavaScript代码指南,包括控制器和封装等进阶技巧上的编程建议,倾力推荐!需要的朋友可以参考下2015-06-06
本篇文章主要介绍了angularjs ui-router中路由的二级嵌套，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
Angular中ng update命令force参数含义详解
这篇文章主要为大家介绍了Angular中ng update命令force参数含义详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架，下面这篇文章主要给大家介绍了angular.js自动化测试之protractor的相关资料，需要的朋友可以参考下。2017-07-07
最新评论