ホームページ > 記事 > ウェブフロントエンド > AngularJS_AngularJS でデータ ソースを取得する 3 つの方法
AngularJS_AngularJS でデータ ソースを取得する 3 つの方法
- WBOYオリジナル
- 2016-05-16 15:16:401118ブラウズ
AngularJS では、$rootScope からデータ ソースを取得したり、サービス内のデータを取得するロジックをカプセル化し、それを app.run 関数に注入したり、コントローラーに注入したりできます。この記事では、データを取得するいくつかの方法を整理します。
■ データ ソースは $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>
上記では、データ ソースは $rootScope のフィールドに配置されており、簡単に書き換えることができます。
■ データ ソースをサービスに配置し、サービスを run 関数に挿入します
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>
HTMLでは次のように書くと良いようです:
<input type="submit" ng-click=""TodoService.todos.addodo(newTodo) />
サービスにメソッドを追加します:
app.service("TodoService", function(){
this.todos = [
{item:"",done:true},
{item:"",done:false}
];
this.addTodo = fucntion(newTodo){
this.todos.push({item:newTodo, done:false})
}
})
■ データソースをサービスに配置し、サービスをコントローラーに注入します
app.controller("TodoCtrl", function($scope, TodoService){
this.TodoService = TodoServce;
})
対応する 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>
■ データ ソースをサービスに配置し、サービスをコントローラーに挿入し、サーバーと対話します
実際のプロジェクトでは、サービスはサーバーと対話する必要もあります。
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;
})
以上はAngularJSでのデータソースの取得方法でしたので、皆様の学習のお役に立てれば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。