AngularJS数据源的多种获取方式汇总
AngularJS数据源的多种获取方式汇总
发布时间:2016-02-04 来源:查字典编辑
摘要:AngularJS简介AngularJS是由Google发起的一款开源的前端MVC脚本框架,既适合做普通WEB应用也可以做SPA(单页面应用...

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} ]; })

{{todo.item}}

以上,把数据源放在$rootScope中的某个字段中,很容易被重写。

■ 数据源放在service中,把servie注入到run函数中

app.service("TodoService", function(){ this.todos = [ {item:"",done:true}, {item:"",done:false} ]; }) app.run(function($rootScope, TodoService){ $rootScope.TodoService = TodoService; })

{{todo.item}}

在html中似乎这样写比较好:

在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中:

{{todo.item}}

■ 数据源放在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教程学习
热门Javascript教程学习
编程开发子分类