この記事では主に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>
jsで複数選択ボタンを実装(すべて選択)する方法
Angular HMR(ホットモジュール置換)機能を実装する方法
Angularjsでの$applyと最適化された使用について
以上がAngularJS でデータ ソースを取得する 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。