ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

AngularJSモジュールとサンプルコードの詳細な説明

著者：Eve Cole 更新時間：2025-08-06 22:00:03

AngularJSはモジュラー方法をサポートします。モジュールは、個別の論理サービス、コントローラー、アプリケーションなどを表し、コードをきれいに保つために使用されます。モジュールを別のJSファイルで定義し、module.jsファイルの形式で名前を付けます。この例では、2つのモジュールを作成します。

アプリケーションモジュール - コントローラーアプリケーションの初期化に使用されます

コントローラーモジュール - コントローラーを定義するために使用されます

アプリケーションモジュール

mainapp.js

var mainapp = angular.module（ "mainapp"、[]）;

ここでは、Angular.module関数を使用してアプリケーションのMainAppモジュールを宣言しました。空の配列を渡しました。この配列には通常、スレーブモジュールが含まれています。

コントローラーモジュール

MainApp.Controller（ "StudentController"、function（$ scope）{$ scope.student = {firstName： "mahesh"、lastName： "parashar"、fees：500、subjects：[{name： 'physics'、 'physics、70}、{name：' chemistry '、{name：' marks： 'marks：' marks： {name '、marks：75}、{name：' hindi '、marks：67}]

ここでは、StudentControllerモジュールのMainApp.Controller関数を使用するコントローラーを宣言しました。

モジュールを使用します

<div ng-app = "mainapp" ng-controller = "sustentcontroller"> .. <script src = "mainapp.js"> </script> <scrip = "studentcontroller.js"> </script>

ここでは、NG-APPディレクティブとコントローラーを使用して、NG-Controllerディレクティブを使用してモジュールを適用します。 MainApp.jsおよびStudentController.jsをメインHTMLページにインポートしました。

例

次の例では、上記のすべてのモジュールを示します。

testangularjs.htm

 <html> <head> <title> Angular JSモジュール</title> <style>テーブル、th、td {border：1px solid gray;国境崩壊：崩壊;パディング：5px;}テーブルTr：nth-child（odd）{background-color：＃f2f2f2;}テーブルTr：nth-child（veven）{background-color：#fffff.} </head> <body> <h2> angularjsサンプルアプリケーション</h2> ng-controller = "StudentController"> <table> <tr> <td>名の入力：</td> <td> <入力タイプ= "ng-model =" dustent.firstname "> </td> </tr> <tr <td>姓を入力：td> ng-model = "sustent.lastname"> </td> </tr> <tr> <td> name：</td> <td> {{desudent.fullname（）} </td> </tr <tr <tr <td> ng-repeat = "sudustent.subjects"> <td> {{subject.name}} </td> <td> {{subject.marks}}} </td> </tr> </table> </tr> </table> </div> <スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> <script> <src = "mainapp.js"> </script> <script src = "sustentcontroller.js

mainapp.js

var mainapp = angular.module（ "mainapp"、[]）;

StudentController.js

 MainApp.Controller（ "StudentController"、function（$ scope）{$ scope.student = {firstName： "mahesh"、lastName： "parashar"、fees：500、subjects：[{name： 'physics'、 'physics、70}、{name：' chemistry '、{name：' marks： 'marks：' marks： {name '、marks：75}、{name：' hindi '、marks：67}]

出力

WebブラウザでTextangularjs.htmを開きます。結果は次のとおりです。

上記は、AngularJSモジュール関連の知識に関する情報です。将来、関連する知識を追加し続けます。このサイトへのご支援ありがとうございます！

関連記事