ホームページ  >  記事  >  ウェブフロントエンド  >  AngularJS データソースを取得するさまざまな方法のまとめ_AngularJS

AngularJS データソースを取得するさまざまな方法のまとめ_AngularJS

WBOY
WBOYオリジナル
2016-05-16 15:16:361094ブラウズ

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 データ ソースを取得するためのさまざまな方法をまとめたものです。皆様のお役に立てれば幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。