Of Stack

Summary of multiple acquisition methods for AngularJS data sources

  • 2020-12-13 18:50:10
  • OfStack

AngularJS profile

AngularJS is an open source front-end MVC scripting framework initiated by Google. It is suitable for both ordinary WEB applications and SPA (single-page applications where all user operations are completed in one page). In contrast to the positioning of Dojo, which is also the MVC framework, AngularJS is more lightweight in functionality and saves you a lot of mechanical binding compared to jQuery. AngularJS is a very good choice for those non-enterprise 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, which allows us to better focus on the modeling and delivery of data rather than low-level operations on the underlying DOM.

In AngularJS, you can get the data source from $rootScope, or you can wrap the logic to get the data in service and inject it into the app.run function, or inject it into controller. Here are some ways to get 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>

Above, putting the data source in a field in $rootScope is easy to override.

■ The data source is placed in service and servie is injected 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>

In html it seems better to write: 


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

Add 1 method to service: 


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

■ The data source is placed in service and servie is injected into controller 


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

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>

■ The data source is placed in service, and servie is injected into controller to interact with the server

In a real project, service would also need to interact with the server. 


var app = angular.module("app",[]);
app.service("TodoService", function($q, $timeout){
this.getTodos = function(){
var d = $q.defer();
// simulation 1 A request 
$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;
})

The above is a summary of various acquisition methods of AngularJS data source shared by this site, hoping to be helpful to you.

Related articles: