Home > Article > Web Front-end > Three ways to obtain data sources in AngularJS

Three ways to obtain data sources in AngularJS

不言Original: 2018-07-02 15:03:231654browse

This article mainly introduces three ways to obtain data sources in AngularJS. Friends who need it can refer to it

In AngularJS, you can obtain the data source from $rootScope, or you can obtain the data. The logic is encapsulated in the service and then injected into the app.run function or 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}
  ];
})


<p ng-repeat="todo in todos">
  {{todo.item}}
</p>

<form>
  <input type="text" ng-model="newTodo" />
  <input type="submit" ng-click=""todos.push({item:newTodo, done:false}) />
</form>

Above, place the data source in $ A field in rootScope can easily be overridden.

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

<p ng-repeat="todo in TodoService.todos">
  {{todo.item}}
</p>

<form>
  <input type="text" ng-model="newTodo" />
  <input type="submit" ng-click=""TodoService.todos.push({item:newTodo, done:false}) />
</form>

In It seems better to write it like this in html:

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

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

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

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

In the corresponding In the html:

<body ng-app="app" ng-controller="TodoCtrl as todoCtrl">
  <p ng-repeat="todo in todoCtrl.TodoService.todos">
    {{todo.item}}
  </p>
</body>

<form>
  <input type="text" ng-model="newTodo" />
  <input type="submit" ng-click="todoCtrl.TodoService.addTodo(newTodo)"/>
</form>

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement (select all) multi-select button in js

Angular HMR (hot module replacement ) function implementation method

About $apply and optimized use in Angularjs

The above is the detailed content of Three ways to obtain data sources in AngularJS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement (select all) multi-select button in jsNext article：How to implement (select all) multi-select button in js

See more

Three ways to obtain data sources in AngularJS

Related articles