AngularJs学習コントローラー、データバインディング、スコープ詳細説明-jsチュートリアル-php.cn

AngularJs学習コントローラー、データバインディング、スコープ詳細説明

零下一度

リリース： 2017-07-23 18:05:21

オリジナル

1383 人が閲覧しました

1. コントローラー:

概念: angularJS では、コントローラーはビューのスコープに追加機能を追加し、スコープの初期状態を設定し、カスタム動作を追加するために使用される関数です。

コントローラーの宣言: app.controller('controllerName',function($scope){...})

//    控制器定义//    第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能app.controller('myCtrl', function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font color=&#39;red&#39;>hello,htmlbind</font>";
        $scope.subCtrl = "hello subCtrl";

    });

ログイン後にコピー

コントローラーの使用法: 必要な場所 (html のどこかのタグ) に ng- を追加しますコントローラ。

<body ng-app="myapp" ng-controller="myCtrl">

ログイン後にコピー

上記から、コントロールの定義と使用法は比較的簡単ですが、多くの人はコントローラーの役割とコントローラーにどのようなコードを記述する必要があるのか理解できないでしょう。全体コードはすべてコントローラーにプッシュされます。個人的には、コントローラーは、一部のデータバインディング、イベントバインディング、その他の単純なロジック、特定のサーバーアクセス、またはデータ読み取りを処理するだけであると感じます。サービスに実装されるはずです。サービスについては次回詳しく説明します。

コントロールを使用する際の注意点を簡単に整理しましたので、ご参考までに:

1) コントローラーと$scope関連の操作を可能な限り簡略化します。
2) コントローラーを再利用しないでください。コントローラーは通常、ビューのごく一部のみを担当します。
3) コントローラーで DOM を操作しないでください。これはコントローラーの責任ではありません。
4) コントローラーでデータのフィルタリングやデータ操作を行わないように注意してください。
5) 一般的に、コントローラー間の対話はイベントを通じて行われます

2. スコープ ($scope)

スコープは上記のコントローラーにも記載されており、コントローラーは主に操作を実行します。 $scope に関連して、AngularJs におけるスコープの役割とそのライフサイクルについて簡単に説明します:

3。 :

AngularJs データバインディングにもいくつかのバインディングがあります。おそらく、誰もがそれらを使用したことのないものがあるかもしれません。 ️ {{abc}} 関数: {{func()}} 式: {{a+b }}
Angular が式バインディングに遭遇する限り、このメソッドが最も一般的です。範囲Angular の場合、Html で認識される式または変数に自動的に解析されます。

2) 命令メソッド (ng-bind):

このバインド方法は、要素に ng-bind 命令を追加し、Angular がその命令を解析してバインドを実行します。 O 3) NG-MODEL:

このメソッドは主にフォームのフォーム送信に使用され、双方向データバインディング、およびページコンテンツとモデル間の双方向データを実現します。 ng-bind-htmlメソッドのみですが、バインディングはシリアル化されたJSファイルを参照する必要があります。

 <script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js?1.1.11"></script>

ログイン後にコピー

5) ng-bind-template:

このメソッドは一度に複数の変数と式をバインドできます。

使用シナリオ:

ホームページは ng-bind を使用し、テンプレート内のページは括弧 {{}} を使用できます。フォームは ng-model を使用します。

{{}} 構文の欠陥: ユーザーの定期的な更新で{} が表示されることもあり、ネットワークが良好でない場合には

が表示されることもあります。以下のコードは、上記 5 つのメソッドの全体的なコードです。

以上がAngularJs学習コントローラー、データバインディング、スコープ詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

AngularJs学習コントローラー、データバインディング、スコープ詳細説明