ホームページ > ウェブフロントエンド > jsチュートリアル > Angularjs の「モジュール」を理解する

Angularjs の「モジュール」を理解する

青灯夜游
リリース: 2021-02-01 11:45:44
転載
2288 人が閲覧しました

この記事では、angularjs の「モジュール」について説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angularjs の「モジュール」を理解する

関連チュートリアルの推奨事項: 「angularjs チュートリアル

モジュールはアプリケーションを定義します。
モジュールは、アプリケーションのさまざまな部分のコンテナです。
モジュールはアプリケーション コントローラーのコンテナーです。
コントローラーは通常、モジュールに属します。

1 モジュールの作成

AngularJS の angular.module 関数を使用してモジュールを作成できます:

<div ng-app="myApp">...</div>

<script>

    var app = angular.module("myApp", [&#39;其他模块&#39;]);

</script>
ログイン後にコピー

「myApp」パラメータは、アプリケーションを実行する HTML 要素に対応します。
これで、AngularJS アプリケーションにコントローラー、ディレクティブ、フィルターなどを追加できるようになりました。

2 コントローラーの追加

ng-controller ディレクティブを使用して、アプリケーション コントローラーを追加できます。

<div ng-app="myApp" ng-controller="myCtrl">
    {{ firstName + " " + lastName }}
</div>

<script>

    var app = angular.module("myApp", []);

    app.controller("myCtrl", function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });

</script>
ログイン後にコピー

3 コマンドの追加

<div ng-app="myApp" runoob-directive></div>

<script>

    var app = angular.module("myApp", []);

    app.directive("runoobDirective", function() {
        return {
            template : "我在指令构造器中创建!"
        };
    });
</script>
ログイン後にコピー

プログラミング関連の知識の詳細については、プログラミング ビデオをご覧ください。 !

以上がAngularjs の「モジュール」を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート