AngularJS数据源的多种获取方式汇总_AngularJS-js教程-PHP中文网

AngularJS数据源的多种获取方式汇总_AngularJS

php中文网

发布： 2016-05-16 15:16:36

原创

1307人浏览过

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中增加一个方法：

LimeSurvey在线问卷管理系统

LimeSurvey是一款在线问卷管理系统,具有问卷的设计、修改、发布、回收和统计等多项功能。同时它也是一个开源软件,其最新版本的软件包可以完全免费获取和使用。它集成了调查程序开发、调查问卷的发布以及数据收集等功能,使用它,用户不必了解这些功能的编程细节。网上收集的调查数据可以导出多种文件格式以便分析，例如 spss数据格式 *.dat文件。

198

查看详情

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数据源的多种获取方式汇总，希望对大家有所帮助。