AngularJSモジュール2024 年の最新の入門チュートリアル。このコースでは モジュールを作成します。,コントローラの追加,AngularJS例,指示を追加,AngularJS例,JSファイルに含まれるモジュールとコントローラ,AngularJS例,myApp.js,myCtrl.js,関数はグローバル名前空間に影響を与えます,ライブラリをロードするとき?,AngularJS例, について学習できます。
AngularJSモジュール
モジュールは、アプリケーションを定義します。
モジュールは、アプリケーションの異なる部分でコンテナです。
コントローラモジュールは、コンテナアプリケーションです。
コントローラは通常、モジュールに属しています。
モジュールを作成します。
あなたはangular.module機能のAngularJSてモジュールを作成することができます。
<DIV ngのアプリ= "て、myApp "> ja. </ DIV>
<スクリプト>
VARアプリ= angular.module( "て、myApp」 、[]);
</スクリプト>
「MyAppの "パラメータは、アプリケーションのHTML要素の実行に対応しています。
今、あなたはAngularJSアプリケーションでコントローラ命令、フィルターなどを追加することができます。
コントローラの追加
あなたは、アプリケーションのコントローラを追加するには、NG-コントローラ命令を使用することができます。
AngularJS例
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl" >
{{姓+ "" + lastNameの }}
</ DIV>
<スクリプト>
VARアプリ= angular.module( "て、myApp」 、[]);
app.controller(「myCtrl」、関数( $スコープ){
$ scope.firstName = "ジョン"。
$ scope.lastName = "ドウ";
});
</スクリプト>
»をお試しください あなたがすることができますAngularJSコントローラは、コントローラ部の詳細な知識を学びます。
指示を追加
AngularJSは、あなたのアプリケーションに機能を追加するためにそれらを使用することができ、多くの組み込みコマンドが用意されています。
詳細な手順は、の内容で見つけることができAngularJSリファレンスマニュアル 。
また、独自の命令のアプリケーションを追加するモジュールを使用することができます。
AngularJS例
<DIV ngのアプリ= "て、myApp " w3big-ディレクティブ> </ div>の
<スクリプト>
VARアプリ= angular.module( "て、myApp」 、[]);
app.directive(「w3bigDirective」、関数( ){
リターン{
テンプレート:「私は命令のコンストラクタを作成しました!」
};
});
</スクリプト>
»をお試しください あなたがすることができますAngularJSディレクティブは指示部についてより多くの知識を学びます。
JSファイルに含まれるモジュールとコントローラ
典型的には、アプリケーション・モジュールをAngularJSとコントローラは、JavaScriptファイルに含まれています。
次の例では、「myApp.jsは「プログラムアプリケーション・モジュールの定義が含まれ、「myCtrl.js」ファイルには、コントローラが含まれています。
AngularJS例
<!DOCTYPE HTML>
<HTML>
<SCRIPT SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </スクリプト>
<ボディ>
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">
{{姓+ "" + lastNameの }}
</ DIV>
<スクリプトSRC = "myApp.js"> </スクリプト>
<スクリプトSRC = "myCtrl.js"> </スクリプト>
</ BODY>
</ HTML>
»をお試しください myApp.js
var app = angular.module( "myApp" , []);
| モジュール定義では[]パラメータは、モジュールの依存関係を定義するために使用されます。 依存性がある場合は括弧[]その後、括弧内に書かれたモジュール名に依存し、モジュールが依存しないことを示しています。 |
---|
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
関数はグローバル名前空間に影響を与えます
JavaScriptがグローバル関数を使用しないようにしてください。 彼らは簡単に別のスクリプトファイルで覆うことができるので。
モジュール内のすべての関数は、問題を回避するように、モジュールスコープをAngularJS。
ライブラリをロードするとき?
| この例では、すべてのAngularJSのHTMLドキュメントライブラリは、頭の中にロードされます。 |
---|
一般的に、すべてのスクリプトに推奨されるHTMLアプリケーションでは、<body>要素の底部に配置されます。
HTMLをロードするためのスクリプトをロードする対象ではないので、これは、ページの読み込み速度が向上します。
当社の複数のAngularJSの例では、AngularJSライブラリは、文書の<head>の領域にロードされて表示されます。
呼び出しが唯一のライブラリの読み込みが完了した後に行うことangular.moduleするため、この例では、<head>要素でAngularJSは、ロードされます。
別の解決策は、AngularJSライブラリ<body>要素をロードすることですが、あなたのAngularJSスクリプトの前に配置する必要があります。
AngularJS例
<!DOCTYPE HTML>
<HTML>
<ヘッド>
<メタ文字セット= "UTF-8 ">
<SCRIPT SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </スクリプト>
</ HEAD>
<ボディ>
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">
{{姓+ "" + lastNameの }}
</ DIV>
<スクリプト>
VARアプリ= angular.module( "て、myApp」、[]);
app.controller(「myCtrl」、関数($スコープ){
$ Scope.firstName = "ジョン"。
$ Scope.lastName = "ドウ";
});
</スクリプト>
</ BODY>
</ HTML>
»をお試しください