Angularjsには、次のようないくつかの主要な機能があります。
1 MVC
2モジュラー
3コマンドシステム
4双方向データバインディング
それでは、Angularjsのモジュール化を見てみましょう。
まず、モジュール性を実装する必要がある理由について話しましょう。
1モジュールの再利用性が追加されました
2。ロード順序のカスタマイズを実現するモジュールを定義します
3ユニットテストでは、すべてをロードする必要はありません
前の例では、コントローラーのコードはスクリプトタグに直接記述されるため、宣言された関数はグローバルであり、これは明らかに最良の選択ではありません。
モジュール化方法を見てみましょう:
<script type = "text/javascript"> var myappmodule = angular.module( 'myApp'、[]); myAppModule.filter( 'test'、function(){return function(name){return 'hello、'+name+'!';};}); myAppmodule.controller( 'myAppctrl'、['$ scope'、function($ scope){$ scope.name = 'xingoo';}]); </script>まず、グローバル可変角度を介してモジュールmyAppmoduleを作成します
angular.module( 'myApp'、[]);
最初のパラメーターは、メイン関数の関数と同様に、ページの角度のエントリポイントを識別するバウンドアプリケーションアプリ名です。
2番目のパラメーター[]は、従属モジュールを識別します。
モジュールの使用方法を見てみましょう!
<!doctype html> <html ng-app = "myapp"> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <div ng-controller = "myappctrl"> {{name | test}} </div> <script type = "text/javascript"> var myappmodule = angular.module( 'myApp'、[]); myAppModule.filter( 'test'、function(){return function(name){return 'hello、'+name+'!';};}); myAppmodule.controller( 'myAppctrl'、['$ scope'、function($ scope){$ scope.name = 'xingoo';}]); </script> </body> </html>MyAppをNG-APPにバインドするだけで問題ありません。
スクリプトでは、モジュールを介してフィルターとコントローラーを作成します。
フィルターの目的は、文字列の変更を追加することです。
コントローラーの機能は、変数を初期化することです。
プログラムの実行結果は次のとおりです。
上記は、Angularjsのモジュラー情報のソートです。今後も関連情報を追加し続けます。このウェブサイトへのご支援ありがとうございます!