私は最近しばらくの間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ボタンにクリックイベントを追加します。
今日のメモを止めましょう。それらはすべて個人的な経験です。私はあなたがそれらを好きになることを願っています。