Angularjsについてのビデオを見ました。ビデオコンテンツでは、TODOリスト（シンプルなページアプリケーション）の形でスパを作成する方法について説明します。理解を深めるために、レビューと統合のために記事を以下に記述します。
準備する
AngularJSダウンロード
これはダウンロードと呼ばれますが、実際には、ページでAngularjsを参照できる限りです。次の方法があります。
CDN加速
国内のCDN加速サービスを使用することも可能です。
コードを次のようにコピーします。<スクリプトsrc = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
NPMメソッド
また、nodejsのパッケージ管理ツールを使用すると非常に便利です。基本的には2つのステップで実行できます。
まず、コードを書き込むフォルダーを入力します。
•AngularJS：NPMインストールAngularをインストールします
•ページで使用するために導入されました：
<！ - このSRCアドレスは、あなた自身の状況に依存します - >
<スクリプトsrc = "node_modules/angular/angular.js"> </script>
従来の方法
従来の方法は、関連するファイルを手動でダウンロードし、手動で紹介することです。ここにはこれ以上の物語はありません。
ブートストラップのダウンロード
非常に人気のあるモダンなフロントエンドフレームワークとして、ブートストラップはヒットします。アドレスをダウンロードしてください
知識保護区
MVCアーキテクチャ
AngularJSコアは、MVCアーキテクチャとイベント主導のアプリケーションを採用しています。私はそれに慣れていないので、よくわかりません。間違いがあれば、ブロガーがそれを指摘することを願っています。
ng-app
単一ページ全体の執事として、アプリはアプリケーションとアプリケーションの意味を意味します。当社のシングルページサービスはアプリとして機能します。
一般的に、NG-APPは、NGコントローラーの親コンテナとしてネストする必要があります。それ以外の場合、予想される結果が表示されない場合があります
ng-controller
コントローラー、ページに適用された右手マン、およびコントローラーの存在により、モジュール間の結合が簡素化され、コードの書き込みがより標準化されたシンプルになります。
ng-model
モデル処理中、一般に、ページ要素でバインドおよび出力され、更新されないページ効果が得られます。
イベントベース
ngクリック
シングルページアプリケーションでは、この属性を宣言する要素には、クリックイベントの関数があります。呼び出された関数のどの部分に関しては、実際には要素が配置されているコンテナに関連しています。
つまり、クリックイベントに対応する関数は、特定の関数を完了するために関連するコントローラーに記述されたコードです。
完全なコード
この例の詳細なコードを以下に示します
main.js
(function(window){ // Register an application main module var todoapp = window.angular.module('todoapp',[]); // Register the controller// window.angular.module('todoapp') todoapp.controller('maincontroller' ,['$scope',function($scope){ // The function of $scope is to add elements to the view// The value in the text box $ scope.text = '' //ページディスプレイの利便性のために、$ scope.todolist = [{angularjs '、done}、{text：' bootstrap '、done：false}]; $ scope.text.trim（）;削除} //完了したイベントの数を取得し、チェックボックスの選択に従って実装する//ページは動的に変更されるか、単にモデルバインディングを使用する必要があります。条件を満たし、イベントが完了しました}）;todolist.html
<！doctype html> <html> <head> <meta charset = "utf-8"> <titlejs統合Bootstrap実装タスクリスト</title> <！ - bootstrapの紹介 - > <link href = "http://apps.bdimg.com/libs/boottrap/3.3.3.0/3.3.0/.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min. rel = "styleSheet"> <style> .container {max-width：720px; } .done {color：#cca; } .checkbox {marve-right：12px;マージンボトム：0; } .done> } </style> <script src = "node_modules/angular/angular.js"> </script> <script src = "myjs/app.js"> </script> </head> <body> <div-app = "todoapp"> <header> <h1> div-h1> h1> <hr </</< ng-controller = "maincontroller"> <！ - 見栄えの良いインターフェイスを実現するには、フォームコントロールが使用されます - > <フォーム> <入力タイプ= "ng-model =" text "name =" "> <span> <button ng-click =" add（） "> add </button> </span> </form ng-class = "{'done'：item.done}" ng-repeat = "item in todolist"> <button = "button" aria-label = "close" ng-click = "delete（item）"> <span aria-hidden = "true">×</span> <span> close </span < <span> {{item.text}} </span> </label> </div> </li> </ul> <p>合計<strong> {{todolist.length}} </strong>タスクが完成しました</strong> </p> </section> </div> </html> </html> </html>ページ効果
詳細なコード説明
コード内のコードの最も外側の層は、一時的なスペースとして良い効果をもたらし、名前空間汚染を防ぐことができます。
（function（window）{//何かをする}）（ウィンドウ）最後の（ウィンドウ）は不可欠であることに注意してください。
アプリケーションを作成します
//アプリケーションメインモジュールを登録します
var todoapp = window.angular.module（ 'todoapp'、[]）;
コントローラーを作成します
todoapp.controller（ 'maincontroller' //ここの$スコープもコンテナの役割を再生し、変数の可視範囲を宣言します。一連のリスト$ scope.todolist = [{'angularjs'、done}、{text： 'bootstrap'、done：false}];関数関数を改善します
// interactionに応答する関数を追加$ scope.add = function（）{var text = $ scope.text.trim（）; if（text）{$ scope.todolist.push（{text：text、done：false}）; $ scope.text = ''; }} //応答イベントをクリックします$ scope.delete = function（todo）{var index = $ scope.todolist.indexof（todo）$ scope.todolist.splice（index、1）; //削除する}面倒な$ scope.donecount = function（）{//フィルターを使用してvar temp = $ scope.todolist.filter（function（item）{return item.done; //現在のデータが条件を満たし、イベントが完了したことを示すためにtrueを返す}）; return temp.length; }要約します
コードや深い考えは多くありません。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。