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

不言
リリース: 2018-07-02 15:03:23
オリジナル
1682 人が閲覧しました

この記事では主に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 サイトをご覧ください。

関連する推奨事項:

jsで複数選択ボタンを実装(すべて選択)する方法

Angular HMR(ホットモジュール置換)機能を実装する方法

Angularjsでの$applyと最適化された使用について


以上がAngularJS でデータ ソースを取得する 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート