AngularJS での TodoMVC の分析研究ノート_AngularJS-jsチュートリアル-php.cn

最近AngularJSについて調べているので少しまとめてみます。

公式ウェブサイトのアドレス: http://angularjs.org/

最初にいくつかのチュートリアルをお勧めします

1. AngularJS Getting Started Tutorial これは比較的基本的なものであり、公式チュートリアルの翻訳です。

2. 7 つのステップで AngularJS 初心者からエキスパートまでこれも比較的基本的なもので、オンライン音楽再生 Web サイトを作成しました。

3. AngularJS 開発ガイドこのチュートリアルは比較的包括的ですが、翻訳が少しわかりにくいように感じます。

これらのチュートリアルを読んで、AngularJS について少し理解できた気がするので、それを使って AngularJS で書かれた todomvc を分析してみましょう。

Todomvc 公式ウェブサイトアドレス: http://todomvc.com/

プロジェクトのディレクトリは次のとおりです:

bower_components には 2 つのフォルダーが配置されています。angular フォルダーは、angular.js ファイルを保存するために使用されます。todomvc-common フォルダーには、すべての Todo プロジェクトの統合された cssjs が含まれています (左側のコンテンツの生成にのみ使用され、ToDo プロジェクトとは関係ありません)。プロジェクト）と写真。

js フォルダーは大きなヘッダーであり、対応するコントローラー (コントローラー) ディレクティブ (命令) サービス (サービス) と app.js が含まれています。

テストフォルダーにはテスト用のコードが含まれており、分析されません。

index.html はプロジェクトのビューページです。

まず app.js を見てみましょう

コードをコピーしますコードは次のとおりです:

/*グローバル角度 */

/*jshint 未使用:false */

'厳密な使用';

/**

 * メインの TodoMVC アプリ モジュール

 *

 * @type {angular.Module}

 */

var todomvc = angular.module('todomvc', []);

モジュール todomvc を定義します

サービスの下の todoStorage.js をもう一度見てください

コードをコピーしますコードは次のとおりです:

/*グローバル todomvc */

'厳密な使用';

/**

 * localStorage
 から TODO を永続化し取得するサービス
 */

todomvc.factory('todoStorage', function () {

// todos JSON 文字列ストレージの一意の識別子

var STORAGE_ID = 'todos-angularjs';

戻り値 {

// localStorage から todo を取得し、解析して JSON オブジェクトに変換します

get: function () {

return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');

}、

// todos オブジェクトを JSON 文字列に変換し、localStorage
 に保存します
Put: function (todos) {

localStorage.setItem(STORAGE_ID, JSON.stringify(todos));

}

};

});

todoStorage のサービスメソッドは、ファクトリメソッドを使用して作成されます。このサービスメソッドの本質は、JSON2 と HTML5 の機能を使用する 2 つのメソッド (get と put) を返すことです。 get は、localStorage から todo のコンテンツを取得して JSON に解析し、put は todo を JSON 文字列に変換して localStorage に保存します。

ディレクティブの下にある 2 つの命令ファイルをもう一度見てください。

todoFocus.js

コードをコピーコードは次のとおりです:

/*グローバル todomvc */

'厳密な使用';

/**

 * バインド先の式が true と評価されたときに適用される要素にフォーカスを置くディレクティブ

 */

todomvc.directive('todoFocus', function todoFocus($timeout) {

戻り関数 (スコープ、要素、属性) {

// todoFocus 属性の値のリスナーを追加します

scope.$watch(attrs.todoFocus, function (newVal) {

if (newVal) {

$timeout(function () {

elem[0].focus();

}, 0, false);

}

});

};

});

関数に返されるパラメータのうち、elem は命令の要素を含む配列、attrs は要素のすべての属性と属性名で構成されるオブジェクトです。

2 つの AngularJS メソッドが使用されます

$watch(watchExpression,listener,objectEquality) は、watchExpression が変更されるたびに、リスナーコールバックが実行されます。

$timeout(fn[,lay][,invokeApply]) タイムアウト値に達したら、fn 関数を実行します。

todoFocus.js は todoFocus ディレクティブを作成します。要素に todoFocus 属性がある場合、この命令は、todoFocus 属性の値が true に変更されると、リスナーを要素の todoFocus 属性の値に追加します。 }, 0, false); 遅延時間は 0 秒なので、elem[0].focus() はすぐに実行されます。

todoEscape.js

コードをコピーしますコードは次のとおりです:

/*グローバル todomvc */

'厳密な使用';

/**

 * 適用される要素が取得されたときに式を実行するディレクティブ

 * 「エスケープ」キーダウン イベント。

 */

todomvc.directive('todoEscape', function () {

var ESCAPE_KEY = 27;

戻り関数 (スコープ、要素、属性) {

elem.bind('keydown', function (event) {

If (event.keyCode === ESCAPE_KEY) {

スコープ.$apply(attrs.todoEscape);

}

});

};

});

todoEscape.js は todoEscape ディレクティブを作成します。 Escape キーを押すと、attrs.todoEscape 式が実行されます。

controllers フォルダー内のヘッダー、todoCtrl.js を見てください。このファイルは少し長いので、コメントだけを書きました。

コードをコピーコードは次のとおりです:

/*グローバル todomvc、角度 */
'厳密な使用';
/**
* アプリのメインコントローラー。コントローラー:
* - todoStorage サービスを介してモデルを取得し、保存します
* - モデルをテンプレートに公開し、イベントハンドラーを提供します
*/
todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage, filterFilter) {
// ローカルストレージ中获取all
var todos = $scope.todos = todoStorage.get();

// 新しい Todo を記録します
$scope.newTodo = '';
// 編集した Todo を記録します
$scope.editedTodo = null;
// todos の値が変更されたときにメソッドを実行します
$scope.$watch('todos', function (newValue, oldValue) {
// 未完了の Todo の数を取得します
$scope.remainingCount = filterFilter(todos, { completed: false }).length;
// 完了した Todo の数を取得します
$scope.completedCount = todos.length - $scope.remainingCount;
// $scope.remainingCount が 0 の場合に限り、$scope.allChecked は true
$scope.allChecked = !$scope.remainingCount;
// todos の新しい値が古い値と等しくない場合、todos
を localStorage に保存します If (newValue !== oldValue) { // これにより、ローカルストレージへの不必要な呼び出しが防止されます
todoStorage.put(todos);
}
}, true);
If ($location.path() === '') {
// $location.path() が空の場合は、/
に設定します $location.path('/');
}
$scope.location = $location;
// location.path() の値が変更されたときにメソッドを実行します
$scope.$watch('location.path()', 関数 (パス) {
// ステータスフィルターを取得
// パスが '/active' の場合、フィルターは { completed: false }
// パスが '/completed' の場合、フィルターは { completed: true }
// それ以外の場合、フィルターは null
$scope.statusFilter = (path === '/active') ?
{ 完了: false } : (パス === '/completed') ?
{ 完了: true } : null;
});
// 新しい Todo を追加
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
If (!newTodo.length) {
return;
}
// todos に todo を追加します。completed 属性のデフォルトは false
todos.push({
title: newTodo、
完了: false
});
// 空のままにしておきます
$scope.newTodo = '';
};
//todo を編集
$scope.editTodo = 関数 (todo) {
$scope.editedTodo = todo;
// 元の Todo のクローンを作成して、オンデマンドで復元します。
// 編集を再開する準備として、編集前に ToDo を保存します
$scope.originalTodo = angular.extend({}, todo);
};
// todo の編集が完了しました
$scope.doneEditing = 関数 (todo) {
// 空のままにしておきます
$scope.editedTodo = null;
todo.title = todo.title.trim();
If (!todo.title) {
// todo のタイトルが空の場合は、todo を削除します
$scope.removeTodo(todo);
}
};
//編集前の todo を復元
$scope.revertEditing = 関数 (todo) {
todos[todos.indexOf(todo)] = $scope.originalTodo;
$scope.doneEditing($scope.originalTodo);
};
// todo
を削除します $scope.removeTodo = 関数 (todo) {
todos.splice(todos.indexOf(todo), 1);
};
// 完了した ToDo をクリア
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (val) {
return !val.completed;
});
};
// すべての Todo のステータスをマークします (true または false)
$scope.markAll = 関数 (完了) {
todos.forEach(function (todo) {
todo.completed = 完了; });
};
});

最後に、index.html をセクションごとに分析してみましょう。

コードをコピーコードは次のとおりです:

        AngularJS • TodoMVC

                Mark all as complete

                            {{todo.title}}

まず、最下で、対応する JS を組み込みます。これは多くの点で行われます。

复制代代码如下:

<スクリプト src="bower_components/angular/angular.js">

<スクリプト src="js/controllers/todoCtrl.js">

<スクリプト src="js/services/todoStorage.js">

<スクリプト src="js/directives/todoFocus.js">

<スクリプト src="js/directives/todoEscape.js">

スタイル[ng-cloak]を定義します。ng-cloak プロパティが含まれています。

复制代代码如下:

追加する todo の html、決定されたモデルは newTodo、送信するイベントは todoCtrl.js 内の addTodo()、一条の todo を追加する、点击Enter、默认触提示交信、触発了addTodo() メソッドを参照してください。、todos に todo を 1 つ追加しました。

复制代代码如下:

展示todosのhtmlをもう一度見る

复制代码代码如下:

    すべてを完了としてマーク

                {{todo.title}}

セクションでは、ngShow メソッドを使用しています。todos の長さに応じて表示されるかどうかを判断し、AngularJS が未処理であることを表示するために、開始時に追加されたセクションです。

この ID は、allChecked モデルに toggle-all のチェックボックスが設定されており、markAll(allChecked) をポイントして allChecked の値を渡し、すべての todo をマークします。

ngRepeat循環环产生li标签を使用、todosのtodo | filter:status$index による追跡、循環 todos、statusFilter によるフィルタリング、$index 追跡。クラスはトグルのチェックボックスで todo.completed に設定されています。 Todo を編集すると、次のフォーム内の todoFocus 命令が実行され、この時点でフォーム内の入力が表示されます。クラスは破棄のボタンで、クリックイベント、ポイントボタンでremoveTodo(todo)、この条文を削除することが決定されています。

最後に見る todos の统计情報展示の html

复制代码代码如下: