AngularJS での TodoMVC の分析 研究ノート_AngularJS

最近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 をセクションごとに分析してみましょう。

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

   
       
       
       
       
       
   
   
       

           

               

todos

               

                   
               

           

           

               
                Mark all as complete
               

                   
• 
                         
  
                             
                              {{todo.title}}
                             
                         
  
                         
  
                             
                         
  
                     

               

           
           

                {{remainingCount}}
                   
               
               

                   
• 
                          すべて
                     

                   
• 
                          アクティブ
                     

                   
• 
                          完了
                     

               

                完了 ({{completedCount}}) をクリア
           
       
        <フッター id="情報">
           

ダブルクリックして ToDo を編集します

           

クレジット:
                Christoph">http://twitter.com/cburgdorf">クリストフブルクドルフ、
                Eric">http://ericbidelman.com">エリック ビデルマン、
                Jacob">http://jacobmumm.com">ジェイコブ マムそして
                Igor">http://igorminar.com">イゴールミナール
           

           

TodoMVChttp://todomvc.com">TodoMVC>
の一部        
       
        <スクリプト 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">
   

まず、最下で、対応する 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

复制代码代码如下:

    {{remainingCount}}
       
   
   

       
• 
              すべて
         

       
• 
              アクティブ
         

       
• 
              完了
         

   

    完了 ({{completedCount}}) をクリア

ng-pluralize は、remainingCount の数が 1 の場合は残りのアイテムを表示し、そうでない場合は残りのアイテムを表示します。

id はフィルターの UL ポリシー内にあり、location.path() の内容に応じて、異なるポリシーが選択されます。

id はクリア完了のボタンで、ポイント イベントが追加され、clearCompletedTodos() が開始され、完了したすべての todo が削除されます。

今日のレポートはここにあります。全員がこれらの人々の認識であり、小さな協力者が喜んでくれることを望んでいます。