Angularjs学習ノート(一)基礎

11832 ワード

【anglarjs】

1.概要:Angular JS(Angular.JS)は、Webページを開発するためのフレームワーク、テンプレート、およびデータバインドおよびUIコンポーネントの豊富なセットです.開発プロセス全体をサポートし、手動DOM操作を必要とせずにWebアプリケーションのアーキテクチャを提供します.AngularJSは小さく、60 Kしかなく、主流ブラウザと互換性があり、jQueryとの相性が良い.
どうしてMVCを必要とします:(モジュール化と多重化)フロントコードの規模はますます大きくなって、コードを切り分けるのは大勢の赴くところで多重化のためで、多くの論理は同じで、公共の論理を抽出して後期のメンテナンスの便利さのために、1枚の機能を修正して他の機能に影響しません
2 . AngularJSアプリケーションの3つのコンポーネントで、モデル-ビュー-コントローラ設計モードにどのようにマッピングされますか:テンプレート:HTMLとCSSで作成したファイルで、アプリケーションのビューを表示します.AngularJSコンパイラのコマンドとして、HTMLに新しい要素、属性タグを追加できます.AngularJSコンパイラは完全に拡張可能で、AngularJSを通じてHTMLの中で自分のHTMLタグを構築することができます!アプリケーションロジック(Logic)と動作(Behavior):JavaScriptで定義されたコントローラです.AngularJSは、標準のAJAXアプリケーションとは異なり、AngularJSに組み込まれているため、リスナーまたはDOMコントローラを別途作成する必要はありません.これらの機能により、アプリケーションロジックの作成、テスト、メンテナンス、理解が容易になります.モデルデータ(Data):モデルはAngularJSの役割ドメインオブジェクトの属性から誘導される.モデル内のデータは、Javascriptオブジェクト、配列、または基本タイプである可能性があります.これは重要ではありません.重要なのは、AngularJS役割ドメインオブジェクトに属していることです.
AngularJSは、データモデルとビューインタフェースUIとの双方向同期を、役割ドメインを介して維持する.モデルの状態が変化すると、AngularJSはすぐにビューインタフェースに反映され、逆も同様です.
3 . 5つの特性(1)双方向データバインディングは、バインディングされたモデルをHTML要素に宣言することができる.モデルが変化すると、ビューが自動的に更新され、DOMとModelを同期できます.これにより、従来のテンプレートコードを大幅に削減し、モデルとビューの同期を維持できます.(2)テンプレートAngularJSはHTMLテンプレートを用い,1つのテンプレートがHTMLファイルである.しかし、HTMLのコンテンツは拡張され、modelをviewにマッピングするのに役立つコンテンツがたくさん含まれています.設計者と開発者が同時に作業できるようにします.デザイナーは通常の方法でユーザーインタフェースを作成できますが、開発者は宣言バインド構文を使用して、異なるUIコンポーネントのデータモデルに簡単に組み合わせることができます.HTMLテンプレートはブラウザによってDOMに解析されます.DOMはAngularJSコンパイラの入力となります.AngularJSはDOMテンプレートを巡回して、いくつかのアドバイザ、すなわちdirective(命令)を生成します.すべてのコマンドはviewに対してデータバインドを設定する責任を負います.(3)MVCはクライアントアプリケーションに対してAngularJSを開発し,従来のMVC基本原則を吸収した.しかし、従来のMVCは実行されず、MVVM(Model-View-ViewModel)に近い.Model modelはアプリケーションの簡単なデータです.一般的には簡単なjavascriptオブジェクトです.ここではフレームワークのclassesを継承する必要はありません.proxyオブジェクトをカプセル化したり、特別なsetter/getterメソッドを使用してアクセスしたりします.実際にvanilla javascriptを処理する方法は非常に良い特性であり、この方法はアプリケーションのプロトタイプをより少なく使用することができます.
ViewModel:

                    view   。
viewmodel $scope   ，    AnguarJS    。$scope       js  ，         API          。

Controller:動作を制御するための初期状態とパラメトリック$scopeメソッドの設定を担当します.指摘すべきcontrollerは、ステータスを保存したり、リモートサービスとインタラクティブにしたりしません.
View:AngularJS解析後のレンダリングとバインド後に生成されるHTMLです.このセクションでは、Webアプリケーションのアーキテクチャを作成するのに役立ちます.$scopeはデータに対する参照を持ち、controllerは動作を定義し、viewはレイアウトとインタラクティブを処理する.
(4)依存注入AngularJSは内蔵の依存注入サブシステムを持ち,開発者のより容易な開発,応用理解,テストを支援することができる.DIは、自分で探すのではなく、依存を要求することを許可します.例えば、DIが作成を担当し、提供するものが必要です.
(5)Directives(指令)
コマンドは、カスタムラベルを作成するために使用できます.これらは、要素を装飾したりDOMプロパティを操作したりするために使用できます.再利用可能なカスタムコンポーネントとコマンドのAPIを作成できます.たとえば、日付セレクタウィジェットをカスタマイズしたい場合は、コンポーネントを作成できます.奇抜なファイルアップロードと進捗インジケータが必要な場合は、コンポーネントを作成し続けます.
4.フロントエンド開発ツールsublime:インストールと使用は別のwebstorm/HPstormを参照
5 .最初のangularjsアプリケーションは、テキストボックスとボタンでタスクリストを追加し、同じ追加と削除が可能です.この例から学ぶことができる:(1)angularを導入する.jsファイル,ng-app命令を用いてangular管理境界(2)双方向データバインドを宣言する簡単な使用:二重括弧{}(3)常用命令
htmlドキュメント構造:

<body style="padding: 10px">
    <div id="first" class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default" >  button>
        span>
    div>
    <h4 >    h4> 
    <ul class="list-group">
      <li ng-repeat="item in tasks " class="list-group-item" >{{item}}  //item tasks        ，       
            <a >  a>
      li>
    ul>
body>

まずangularjsファイルを導入:htmlタグにng-app をれるng-app="todoList"angularjsのをする

ng-app     AngularJS      ， ``   ng-app       ``  AngularJS     。           ng-app  ， ``， AngularJS     ``   。
 
  js   angularjs： 
  angular.module('todoList',[])
    .controller('TaskCtrl',function($scope){   //      ，         
        $scope.task="";     //        task  
        $scope.tasks=[];     //           
        $scope.add=function(){    //       ，             
            $scope.tasks.push($scope.task);
        };
    });
  
コントローラバインドbody :taskはテキストボックスの  であるため、inputタグはng-modelをバインドする  があるtask  をリストとしてliに  するため、liバインドng-repeat="item in tasksボタンバインドclickイベントng-clickをコミットする  ボタンng-clickバインドsplice  ボタンng-clickバインドsplice(ここでは  )イベント:  <body style="padding: 10px" ng-controller="TaskCtrl">       //     
    <div id="first" class="input-group">
        <input ng-model="task" type="text" class="form-control">       //    
        <span class="input-group-btn">
            <button class="btn btn-default" ng-click="add()">  button>     //    click  
        span>
    div>
    <h4 ng-hide="tasks.length==0">    h4> 
    
    <ul class="list-group">
      <li ng-repeat="item in tasks track by $index" class="list-group-item" >{{item}}

            <a ng-click ="tasks.splice($index,1)" >  a>
      li>
        
    ul>
body>
<script src="angularjs/angular.min.js">script>
<script>
    angular.module('todoList',[])
    .controller('TaskCtrl',function($scope){
        $scope.task="";
        $scope.tasks=[];
        $scope.add=function(){
            $scope.tasks.push($scope.task);
        };
    });
script>
html>
  
















                                    
                                    
                                    
                                    
                                

                                


                            

                            
                                    
                                        

                                        jQuery遍歴-closest()メソッドの紹介とparents()メソッドとの違い
                                

                                    動的に追加されたHTMLの自動レンダリング