AngularJSは、単一ページの複数のビューを通じて単一ページアプリケーションをサポートしています。これを行うために、AngularJSはNG-ViewおよびNg-Templateディレクティブ、および$ RouteProviderサービスを提供します。
ng-view
NG-Viewタグは、構成に従って配置できる対応するビュー（HTMLまたはNG-Templateビュー）であるプレースホルダーを作成するだけです。
使用
メインモジュールでdivとng-viewを定義します。
<div ng-app = "mainapp"> ... <div ng-view> </div> </div>
ng-template
NG-Templateディレクティブは、スクリプトタグを使用してHTMLビューを作成するために使用されます。 $ RouteProviderによってマッピングされたコントローラービューの「ID」プロパティが含まれています。
使用
メインモジュールのng-templateのスクリプトブロックとしてタイプを定義します。
<div ng-app = "mainapp"> ... <script type = "text/ng-template" id = "addStudent.html"> <h2> add student </h2> {{message}} </scrip> </div>$ routeprovider
$ RouteProviderは、グループURLの構成であり、対応するHTMLページまたはNGテンプレートにマッピングし、コントローラーに同じキーを使用するサービスを添付します。
使用
メインモジュールのng-templateのスクリプトブロックとしてタイプを定義します。
<div ng-app = "mainapp"> ... <script type = "text/ng-template" id = "addStudent.html"> <h2> add student </h2> {{message}} </scrip> </div>使用
メインモジュールのスクリプトブロックを定義し、ルーティング構成を設定します。
var mainApp = angular.module（ "mainapp"、['ngroute']）; mainapp.config（['$ routeprovider'、function（$ routeprovider）{$ routeprovider。 'viewstudentscontroller'}）。以下は、上記の例で考慮すべき重要な問題です
$ RouteProviderは、キーワードを「$ RouteProvider」として使用して、MainAppモジュールの構成関数として定義されます。
$ RouteProvider URL「/addStudent」が定義されている場合、「addStudent.html」にマップします。 AddStudent.htmlは、メインHTMLページと同じパスに存在する必要があります。 HTMページが定義されていない場合、ng-templateはid = "addStudent.html"で使用されます。 Ng-Templateを使用しました。
「それ以外の場合」は、設定に使用されるデフォルトビューです。
「Conlloer」は、対応するビューのコントローラーを設定するために使用されます。
例
次の例では、上記のすべての指示を示します。
testangularjs.html
<html> <head> <title> Angular JS Views </title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"> </script> <スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"> </script> <body> <h2> angularjsサンプルアプリケーション</h2> <div-ng-app = "mainapt" <p> <a href = "＃viewstudents">生徒の表示</a> </p> <div ng-view> </div> <script type = "text/ng-template" id = "addStudent.html"> <h2> id = "ViewStudents.html"> <h2> view sustent </h2> {{message}} </script> <script> var mainapp = angular.module（ "mainapp"、['ngroute']）; mainapp.config（['$ routeprovider'、function（$ routeprovider）{$ routeprovider。 'viewstudentscontroller'}）。 mainApp.Controller（ 'AddStudentController'、function（$ scope）{$ scope.message = "このページは、add student form";}）; mainApp.Controller（ 'ViewStudentsController'、function（$ scope）{$ scope.message = "このページは、すべての学生を表示するために使用されます";}）; </script> </body> </html>結果
WebブラウザでTextangularjs.htmlを開きます。結果は次のとおりです。
上記は、Angularjsビュー情報の編集です。今後も関連情報を追加し続けます。このウェブサイトへのご支援ありがとうございます！