ホームページ > 記事 > ウェブフロントエンド > AngularJS データソースを取得するさまざまな方法のまとめ_AngularJS
AngularJS データソースを取得するさまざまな方法のまとめ_AngularJS
- WBOYオリジナル
- 2016-05-16 15:16:361116ブラウズ
AngularJS の概要
AngularJS は、Google が開発したオープンソースのフロントエンド MVC スクリプト フレームワークで、通常の WEB アプリケーションと SPA (単一ページ アプリケーション、ユーザーのすべての操作が 1 つのページで完了する) の両方に適しています。同じく MVC フレームワークである Dojo の位置付けとは異なり、AngularJS は jQuery と比較して機能が軽量であり、機械的なバインディング作業を大幅に節約できます。 AngularJS は、高い開発速度を必要とし、豊富な機能モジュールを必要としない一部の非エンタープライズ レベルの WEB アプリケーションにとって非常に良い選択肢です。 AngularJS の最も複雑かつ強力な部分は、そのデータ バインディング メカニズムです。このメカニズムにより、基礎となる DOM で低レベルの操作を実行するのではなく、モデルの確立とデータの配信に重点を置くことができます。
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 データ ソースを取得するためのさまざまな方法をまとめたものです。皆様のお役に立てれば幸いです。