ホームページ > 記事 > ウェブフロントエンド > AngularJS でデータソースを取得する 3 つの方法

AngularJS でデータソースを取得する 3 つの方法

不言オリジナル: 2018-07-02 15:03:231616ブラウズ

この記事では主にAngularJSでデータソースを取得する3つの方法を紹介しますので、必要な方は参考にしてください

AngularJSでは$rootScopeからデータソースを取得することも、データ取得のロジックをサービスにカプセル化することもできます。次に、それを app.run 関数またはコントローラーに挿入します。この記事では、データを取得するいくつかの方法を整理します。

■ $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>

上記、$rootScope の特定のフィールドにデータソースを配置することは簡単に書き換えることができます。

■サービスにデータソースを配置し、run関数にservieを注入する

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>

HTMLではこう書くと良さそうです:

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

Add a Method inサービス:

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

■ データソースをサービスに配置し、servie をコントローラーに挿入します

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

対応する 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>

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

AngularJS でデータ ソースを取得する 3 つの方法

関連記事

AngularJS でデータソースを取得する 3 つの方法