Summary of various ways to obtain AngularJS data sources

Summary of various ways to obtain AngularJS data sources_AngularJS

WBOY

Release： 2016-05-16 15:16:36

Original

1131 people have browsed it

Introduction to AngularJS

AngularJS is an open source front-end MVC script framework initiated by Google. It is suitable for both ordinary WEB applications and SPA (single page application, all user operations are completed on one page). Different from the positioning of Dojo, which is also an MVC framework, AngularJS is more lightweight in function. Compared with jQuery, AngularJS saves you a lot of mechanical binding work. AngularJS is a very good choice for some non-enterprise-level WEB applications that require high development speed and do not need too rich functional modules. The most complex and powerful part of AngularJS is its data binding mechanism. This mechanism helps us focus better on the model establishment and delivery of data, rather than performing low-level operations on the underlying DOM.

In AngularJS, you can obtain the data source from $rootScope, or you can encapsulate the logic of obtaining data in service, and then inject it into the app.run function, or inject it into the controller. This article will sort out several ways to obtain data.

■ The data source is placed in $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>

Copy after login

Above, the data source is placed in a field in $rootScope, which can be easily rewritten.

■ Place the data source in the service and inject the servie into the run function

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>

Copy after login

It seems better to write it like this in html:

<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />

Copy after login

Add a method in service:

app.service("TodoService", function(){
this.todos = [
{item:"",done:true},
{item:"",done:false}
];
this.addTodo = fucntion(newTodo){
this.todos.push({item:newTodo, done:false})
}
})

Copy after login

■ Place the data source in the service and inject the servie into the controller

app.controller("TodoCtrl", function($scope, TodoService){
this.TodoService = TodoServce;
})

Copy after login

In the corresponding 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>

Copy after login

■ Place the data source in the service, inject the servie into the controller, and interact with the server

In actual projects, service also needs to interact with the server.

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

Copy after login

The above is a summary of the various ways to obtain AngularJS data sources shared by the editor. I hope it will be helpful to everyone.