私は最近しばらくの間Angularjsを見てきましたが、いつかそれを要約します。
公式ウェブサイトの住所：http：//angularjs.org/
最初にいくつかのチュートリアルをお勧めします
1。AngularJS入門チュートリアルは比較的基本的であり、公式チュートリアルの翻訳です。
2. Angularjs初心者から専門家までの7つのステップも比較的基本的であり、オンライン音楽再生Webサイトが作成されました。
3. AngularJS開発ガイドのチュートリアルは非常に包括的ですが、翻訳は少しあいまいで理解しにくいと思います。
これらのチュートリアルを読んだ後、Angularjsも少し知っていると感じたので、それを使って何かをしたかったので、Angularjsが書いたTodomvcを分析しました。
TODOMVC公式ウェブサイトアドレス：http：//todomvc.com/
プロジェクトディレクトリは次のとおりです。
bower_componentsには2つのフォルダーがあり、その中にはAngular.jsファイルと同じようにAngularフォルダーが使用されています。 TODOMVC-Commonフォルダーには、すべてのTODOプロジェクトの統一されたCSS/JS（左コンテンツを生成するために使用され、プロジェクトとは何の関係もありません）と写真が含まれています。
JSフォルダーは大きなヘッダーであり、対応するコントローラー（コントローラー）/ディレクティブ（命令）/サービス（サービス）とAPP.JSが内部に配置されます。
テストフォルダーには、テスト用のコードが含まれており、分析しません。
index.htmlはプロジェクトのビューページです。
app.jsを見てみましょう
コードコピーは次のとおりです。
/ *global angular */
/ *jshint unused：false */
「Strictを使用」;
/**
*メインTODOMVCアプリモジュール
*
* @type {angular.module}
*/
var todomvc = angular.module（ 'todomvc'、[]）;
モジュールtodomvcを定義します
サービスの下のdostostorage.jsをご覧ください
コードコピーは次のとおりです。
/ *GlobalTodomvc */
「Strictを使用」;
/**
* LocalStorageからTodosを継続して取得するサービス
*/
todomvc.factory（ 'dostostorage'、function（）{
// JSON文字列ストレージのTODOSユニークな識別子
var Storage_id = 'todos-angularjs';
戻る {
// localStorageからtodosを取り出してJSONオブジェクトに解析する
get：function（）{
return json.parse（localStorage.getItem（storage_id）|| '[]'）;
}、
// TODOSオブジェクトをJSON文字列に変換し、LocalStorageに保存します
put：function（todos）{
localStorage.setItem（Storage_id、json.Stringify（TODOS））;
}
};
}）;
Todostorage Serviceメソッドは、Factory Methodを使用して作成されます。このサービス方法の本質は、2つの方法を取得して配置することです。どちらもJSON2とHTML5の機能を使用します。 Get TodosのコンテンツをLocalStorageから取得し、JSONに分割し、TodosをJSON Stringに変換し、LocalStorageに保存します。
以下の2つのコマンドファイルを見てみましょう。
Todofocus.js
コードコピーは次のとおりです。
/ *GlobalTodomvc */
「Strictを使用」;
/**
*場所に焦点を当てた指令は、それが結合するときに適用される要素に焦点を当てて、trueに評価するために拘束されます
*/
todomvc.directive（ 'todofocus'、function todofocus（$ timeout）{
return function（scope、elem、attrs）{
// todofocusプロパティの価値を聞くことを追加する
scope。$ watch（attrs.todofocus、function（newval）{
if（newval）{
$ timeout（function（）{
elem [0] .focus（）;
}、0、false）;
}
}）;
};
}）;
パラメーターの戻り関数では、Elemは命令を含む要素の配列であり、属性は要素のすべての属性、属性名などで構成されるオブジェクトです。
2つのAngularJSメソッドが使用されます
$ Watch（WatchExpression、リスナー、Objectequality）リスナーコールバックを登録します。 WatchExpressionが変更されるたびに、リスナーコールバックが実行されます。
$タイムアウト（fn [、delay] [、invokeapply]）タイムアウトの値に達すると、FN関数が実行されます。
Todofocus.jsは、Todofocus指令を作成します。要素にTodofocusプロパティがある場合、指令はリスナーに要素のTodofocusプロパティの価値を追加します。 todofocusプロパティの値がtrueに変更された場合、$ timeout（function（）{elem [0] .focus（）;}、0、false）;遅延時間は0秒であるため、Elem [0] .focus（）はすぐに実行されます。
todoescape.js
コードコピーは次のとおりです。
/ *GlobalTodomvc */
「Strictを使用」;
/**
*適用される要素が取得されると式を実行する指令
*「エスケープ」キーダウンイベント。
*/
todomvc.directive（ 'todoescape'、function（）{
var Escape_key = 27;
return function（scope、elem、attrs）{
Elem.bind（ 'keydown'、function（event）{
if（event.keycode === escase_key）{
scope。$ apply（attrs.todoescape）;
}
}）;
};
}）;
Todoescape.jsは、TodoEscapeディレクティブを作成します。エスケープキーが押されると、attrs.todoescapeの式が実行されます。
コントローラーフォルダーの大きなヘッド、todoctrl.jsをご覧ください。このファイルはもう少し長いので、コメントを書きました。
コードコピーは次のとおりです。
/ *Global Todomvc、Angular */
「Strictを使用」;
/**
*アプリのメインコントローラー。コントローラー：
* - dostostorageサービスを介してモデルを取得して持続させる
* - モデルをテンプレートに公開し、イベントハンドラーを提供します
*/
todomvc.controller（ 'todoctrl'、function todoctrl（$ scope、$ location、dodostorage、filterfilter）{
// LocalStorageからTodosを取得します
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、{complete：false}）。
//完成したTODOの数を取得します
$ scope.completedcount = todos.length- $ scope.remainingcount;
// $ scope.allcheckedは、$ scope.remainincountが0の場合にのみ真です
$ scope.allchecked =！$ scope.remainingcount;
// Todosと古い値の新しい価値が等しくない場合は、TodosをLocalStorageに保存します
if（newValue！== OldValue）{//これにより、ローカルストレージへの不要な呼び出しが防止されます
todostorage.put（TODOS）;
}
}、 真実）;
if（$ location.path（）=== ''）{
// $ location.path（）が空の場合、 /に設定 /
$ location.path（ '/'）;
}
$ scope.location = $ location;
// location.path（）の値が変更されたときにメソッドを実行します
$ scope。$ watch（ 'location.path（）'、function（path）{
//状態フィルターを取得します
//パスが「/アクティブ」の場合、フィルターは{完了：false}です
//パスが「/完了」の場合、フィルターは{完了：true}です
//それ以外の場合、フィルターはnullです
$ scope.statusfilter =（path === '/active'）？
{完了：false} ：（ path === '/complete'）？
{完了：true}：null;
}）;
//新しいTODOを追加します
$ scope.addtodo = function（）{
var newtodo = $ scope.newtodo.trim（）;
if（！newtodo.length）{
戻る;
}
// todoをtodosに追加すると、完了したプロパティがデフォルトでfalseになります
todos.push（{
タイトル：Newtodo、
完了：false
}）;
// 空の
$ scope.newtodo = '';
};
// todoを編集します
$ scope.edittodo = function（todo）{
$ scope.editedtodo = todo;
//元のTODOをクローンしてオンデマンドで復元します。
//編集する前にtodoを保存して編集の復元の準備
$ scope.originaltodo = angular.extend（{}、todo）;
};
// todoを編集して完了します
$ scope.donediting = function（todo）{
// 空の
$ scope.editedtodo = null;
todo.title = todo.title.trim（）;
if（！todo.title）{
// todoのタイトルが空の場合は、todoを削除します
$ SCOPE.REMOVETODO（TODO）;
}
};
//編集する前にtodoを復元します
$ scope.reverteding = function（todo）{
todos [todos.indexof（todo）] = $ scope.originaltodo;
$ scope.donediting（$ scope.originaltodo）;
};
// todoを削除します
$ SCOPE.REMOVETODO = FUNCTION（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 = function（完了）{
todos.foreach（function（todo）{
todo.completed =完了;
}）;
};
}）;
最後に、このファイルを1つずつ分析するindex.htmlを見てみましょう。
コードコピーは次のとおりです。
<！doctype html>
<html lang = "en" ng-app = "todomvc" data-framework = "angularjs">
<head>
<メタcharset = "utf-8">
<メタhttp-equiv = "x-ua-compatible" content = "ie = edge">
<title> angularjs•todomvc </title>
<link rel = "styleSheet" href = "bower_components/todomvc-common/base.css">
<style> [ng-cloak] {display：none; } </style>
</head>
<body>
<セクションid = "todoapp" ng-controller = "todoctrl">
<header id = "header">
<h1> todos </h1>
<form id = "todo-form" ng-submit = "addtodo（）">
<入力ID = "New-Todo" Placeholder = "何をする必要がありますか？" ng-model = "newtodo" autofocus>
</form>
</header>
<セクションid = "main" ng-show = "todos.length" ng-cloak>
<input id = "toggle-all" type = "チェックボックス" ng-model = "allchecked" ng-click = "markall（allchecked）">
<label for = "toggle-all">すべてを完全なものとしてマーク</label>
<ul id = "todo-list">
<li ng-repeat = "todo in todos |フィルター：$ index" ng-class = "{completed：todo.completed、編集：todo == editedtodo}">
<div>
<入力型= "チェックボックス" ng-model = "todo.completed">
<label ng-dblclick = "edittodo（todo）"> {{todo.title}} </label>
<button ng-click = "removetodo（todo）"> </button>
</div>
<form ng-submit = "donediting（todo）">
<input ng-trim = "false" ng-model = "todo.title" todo-escape = "ribletedinting（todo）" ng-blur = "dedinit（dodo）" todo-focus = "todo == editedtodo">
</form>
</li>
</ul>
</section>
<フッターID = "フッター" ng-show = "todos.length" ng-cloak>
<span id = "todo-count"> <strong> {{resightCount}} </strong>
<ng-pluralize count = "resightcount" when = "{one： 'アイテム残り'、その他： 'アイテム残り'}"> </ng-pluralize>
</span>
<ul id = "フィルター">
<li>
<a ng-class = "{selected：location.path（）== '/'}" href = "＃/"> all </a>
</li>
<li>
<a ng-class = "{selected：location.path（）== '/active'}" href = "＃/active"> active </a>
</li>
<li>
<a ng-class = "{selected：location.path（）== '/complete'}" href = "＃/rectreme">完了</a>
</li>
</ul>
<button id = "clear-completed" ng-click = "clearcompletedtodos（）" ng-show = "completecount"> clear rectrement（{{completecount}}）</button>
</footer>
</section>
<footer id = "info">
<p>ダブルクリックしてtodo </p>を編集します
<p>クレジット：
<a href = "http://twitter.com/cburgdorf">クリストフburgdorf </a>
<a href = "http://ericbidelman.com"> eric bidelman </a>、
<a href = "http://jacobmumm.com"> jacob mumm </a> and
<a href = "http://igorminar.com"> igor minar </a>
</p>
<p> <a href = "http://todomvc.com"> todomvc </a> </p>の一部
</footer>
<スクリプトsrc = "bower_components/todomvc-common/base.js"> </script>
<スクリプトsrc = "bower_components/angular/angular.js"> </script>
<スクリプトsrc = "js/app.js"> </script>
<スクリプトsrc = "js/controllers/todoctrl.js"> </script>
<スクリプトsrc = "js/services/todostorage.js"> </script>
<スクリプトsrc = "js/directives/todofocus.js"> </script>
<スクリプトsrc = "js/directives/todoescape.js"> </script>
</body>
</html>
まず第一に、対応するJSを下部に紹介するので、これについてはあまり言いません。
コードコピーは次のとおりです。
<スクリプトsrc = "bower_components/todomvc-common/base.js"> </script>
<スクリプトsrc = "bower_components/angular/angular.js"> </script>
<スクリプトsrc = "js/app.js"> </script>
<スクリプトsrc = "js/controllers/todoctrl.js"> </script>
<スクリプトsrc = "js/services/todostorage.js"> </script>
<スクリプトsrc = "js/directives/todofocus.js"> </script>
<スクリプトsrc = "js/directives/todoescape.js"> </script>
Ng-Cloak属性を含み、見えないスタイル[ng-cloak]を定義します。
コードコピーは次のとおりです。
<style> [ng-cloak] {display：none; } </style>
HTMLを見て、TODOを追加しましょう。バインドモデルはNewtodoです。送信方法は、todoctrl.jsのaddtodo（）です。 TODOが追加されます。 [Enter]をクリックすると、デフォルトで送信イベントがトリガーされます。これにより、addtodo（）メソッドがトリガーされ、todoをtodosに追加します。
コードコピーは次のとおりです。
<form id = "todo-form" ng-submit = "addtodo（）">
<入力ID = "New-Todo" Placeholder = "何をする必要がありますか？" ng-model = "newtodo" autofocus>
</form>
Todosを示すHTMLを見てください
コードコピーは次のとおりです。
<セクションid = "main" ng-show = "todos.length" ng-cloak>
<input id = "toggle-all" type = "チェックボックス" ng-model = "allchecked" ng-click = "markall（allchecked）">
<label for = "toggle-all">すべてを完全なものとしてマーク</label>
<ul id = "todo-list">
<li ng-repeat = "todo in todos |フィルター：$ index" ng-class = "{completed：todo.completed、編集：todo == editedtodo}">
<div>
<入力型= "チェックボックス" ng-model = "todo.completed">
<label ng-dblclick = "edittodo（todo）"> {{todo.title}} </label>
<button ng-click = "removetodo（todo）"> </button>
</div>
<form ng-submit = "donediting（todo）">
<input ng-trim = "false" ng-model = "todo.title" todo-escape = "ribletedinting（todo）" ng-blur = "dedinit（dodo）" todo-focus = "todo == editedtodo">
</form>
</li>
</ul>
</section>
このセクションでは、NGSHOWメソッドを使用して、TODOの長さに基づいて表示されるかどうかを判断します。 ng-cloak属性が追加され、Angularjsが最初に処理されないページを防ぎます。更新を削除して試してみてください。
IDのチェックボックスはトグル-AllがAllChecked Modelにバインドされ、クリックしてマークオール（AllChecked）をトリガーし、AllCheckedの値を渡し、すべてのTODOをマークします。
ngrepeatループを使用して、liタグを生成します。フィルター：$インデックス、ループTODOS、StatusFilterを使用したフィルター、および$ indexを使用したトレースによるStatusFilterトラック。 ngClassは2つのクラスにバインドします。{完了：todo.completed、編集：todo == editedtodo}、todo.completedがtrueの場合、完了したクラスを追加し、todo == editedtodoの場合は編集クラスを追加します。クラスは、トグルのチェックボックスに合わせてtodo.completedにバインドされています。 TODOタイトルに表示されるラベルは、ダブルクリックイベントにバインドされています。ダブルクリックしてEdittodo（TODO）をトリガーします。 EdittodoはTodoを編集したtodoに割り当て、以下の形式でTodofocus命令をトリガーします。この時点で、フォームの入力が表示されます。 ESCを押して、トリガーリタート（TODO）をトリガーします。編集に戻る前に、ENTERを押したり、フォーカスを失い、DONEDITING（TODO）をトリガーして編集したTODOを保存します。クラスはクリックイベントをバインドしてボタンを破棄し、クリックしてリムヴェトド（TODO）をトリガーし、TODOを削除します。
最後に、Todos Statisticsによって表示されるHTMLをご覧ください
コードコピーは次のとおりです。
<フッターID = "フッター" ng-show = "todos.length" ng-cloak>
<span id = "todo-count"> <strong> {{resightCount}} </strong>
<ng-pluralize count = "resightcount" when = "{one： 'アイテム残り'、その他： 'アイテム残り'}"> </ng-pluralize>
</span>
<ul id = "フィルター">
<li>
<a ng-class = "{selected：location.path（）== '/'}" href = "＃/"> all </a>
</li>
<li>
<a ng-class = "{selected：location.path（）== '/active'}" href = "＃/active"> active </a>
</li>
<li>
<a ng-class = "{selected：location.path（）== '/complete'}" href = "＃/rectreme">完了</a>
</li>
</ul>
<button id = "clear-completed" ng-click = "clearcompletedtodos（）" ng-show = "completecount"> clear rectrement（{{completecount}}）</button>
</footer>
ng-pluralizeタグは、残りの数の数が1の場合に残されたディスプレイアイテムを実装します。
IDを持つULタグは、location.path（）の内容に従ってフィルターを選択します。
IDは、ClearCompletedTodos（）をトリガーし、完成したすべてのTODOをクリアし、Clear-Completedボタンにクリックイベントを追加します。
今日のメモを止めましょう。それらはすべて個人的な経験です。私はあなたがそれらを好きになることを願っています。