Anglarjsのクイックエントリ

5584 ワード

javascript 学習ノート

Anglarjsのクイック入門方法

          angularjs          ，         ，        ，        angular   ，       ，

anglarを学ぶにはまずmvvm思想を理解しなければなりません.この思想の核心は双方向結合です.双方向はviewとview modelを指します.viewについては分かりやすいです.つまり、インタフェースで見たview modelはanglarの後ろに隠れている神秘的な対象として考えられます.ページにng-ap属性を追加すると、この対象も存在します.また、この対象のスコープの名前は「rootscope」で、rootは根の意味で、名前を聞いてもわかるように、ラベルのようなものです.はい、私達はまた双方向結合という概念に戻って、アングラー全体を通して、最も分かりやすいのはインターフェイス上のデータが変化して、背景の神秘的なオブジェクトview modelのデータも同期しています.そしてviemodelが変化した後、同じ名前のものがあるかどうかを確認するために、またページ上で検索します.見つけたら、すぐに同期します.

<body ng-app>
    <input type="text" ng-model='txt'>
    <div>{{txt}}div>
body>

｛｝はangglarに特有の文法で、補間文法と呼ばれ、テンプレートの値に相当します.この文法ではanglar式を置いて、表現の値をこのエリアに表示します.このエリアで名前を使うと、まず私達はこのラベルがどのviemodelに属するかを知りたいです.名前によって表示されると、対応するview modelにその名前のデータを取ります.(存在しない場合は表示しなくてもエラーは発生しません)
モジュール

     angular               viewmodel ，        ，         demo     ，  angular           ，                （      ）。

anglarでは、モジュールを使用して構造を区分し、モジュールの中でコントローラを使用して機能を区分します.一つのng-apは一つのモジュールに相当します.モジュールを操作したいなら、手動でモジュールを作成する必要があります.上記のケースでは、scriptタグに任意のコードを作成しないと、双方向のデータバインディングが実現できます.前の名前の場合、angglarはデフォルトのモジュールを提供します.このモジュールはアクセスできません.複雑な機能を実現するためには手動でモジュールを作成する必要があります.
1>ng-apを指定する際には名前が必要です.名前システムを書いたらデフォルトのモジュールはもう出しません.2>モジュールを作成するシンタックス3>モジュールを利用してこのモジュールの下のコントローラシンタックスを作成します.
この時はグローバルモジュールでコントローラを作成するに相当します.意味は$rootscopeの下で作成された$sopeの実際の開発に相当します.できるだけ少なく操作してください.コントローラを使って他の$scopeを作成するべきです.必要なデータはこの$scopeを利用して処理します.このscopeもviemodelです.
従来のmvcと比較して、angglarのコントローラはデータのインタラクションを処理する機能ではなく、分割を実現する機能であり、view modelを初期化する機能であり、コントローラは機能を区分するために使用されていますが、分割後もhtmlタグの中ではコントローラとの結合に使用されています.コントローラはデータの初期化を実現できます.
以下はマルチモジュールのバインディングについてのデモです.

<body ng-app="mainApp">

    <div ng-controller="controller1">
        <input type="text" ng-model="txt"><br />


        <input type="text" ng-model="txt"><br />
    div>


    <hr>


    <div ng-controller="controller2">
        <input type="text" ng-model="txt"><br />


        <input type="text" ng-model="txt"><br />
    div>


body>
<script>
    angular.module( 'mainApp.subApp1', [] )
        .controller( 'controller1', function ( $scope ) {
        });
    angular.module( 'mainApp.subApp2', [] )
        .controller( 'controller2', function ( $scope ) {
        });

    angular.module( 'mainApp', [ 'mainApp.subApp1', 'mainApp.subApp2' ] );
script>

シンプルなRedux-saga