AngularJSは含まれてい
AngularJSでは、HTML内のHTMLファイルを含めることができます。
これは、HTMLでHTMLファイルが含まれています
HTMLでは、この機能を含むHTMLファイルでサポートされていません。
サービス側インクルード
ほとんどのサーバーサイドスクリプトのサポート機能は、ファイル（：サーバーサイドインクルードSSI）が挙げられます。
SSIを使用して、クライアントのブラウザに送信されるHTML内のHTMLファイルに含まれてもよいです。
PHPの例
<PHPは（「navigation.php」必要？ ）;？>
クライアントが含まれてい
HTMLでHTMLファイルを含めることができるのJavaScriptによって多くの方法があります。
通常、私たちはサーバからデータを取得するためにhttpリクエスト（AJAX）を使用し 、我々は、HTML要素にinnerHTMLプロパティを使用して返されたデータを書き込むことができます。
AngularJSは含まれてい
使用AngularJSは、あなたがHTMLコンテンツを含むようにNG-includeディレクティブを使用することができます。
例
<ボディ>
<DIVクラス = "コンテナ">
<DIV NG-含ま= " ' myUsers_List.htm'"> </ div>の
<DIV NG-含ま= " ' myUsers_Form.htm'"> </ div>の
</ DIV>
</ BODY>
<DIVクラス = "コンテナ">
<DIV NG-含ま= " ' myUsers_List.htm'"> </ div>の
<DIV NG-含ま= " ' myUsers_Form.htm'"> </ div>の
</ DIV>
</ BODY>
以下のように実行します。
ステップ1：HTMLリストを作成します。
myUsers_List.html
<H3>ユーザー</ H3>
<Tableクラス= "テーブルには、卓上ストライプ">
<THEAD> <TR>
<Thの>編集</目>
<Thの>姓</目 >
<Thの>姓</目 >
</ TR> </ thead要素>
<TBODY> <TR-リピートngの 「ユーザーがユーザーを"=>
<TD>
<Buttonクラス= "btnの" NG +クリック= "editUser（user.id）">
<スパンクラス= "glyphicon glyphicon-鉛筆"> </ span>の＆NBSP;＆NBSP;編集
</ボタン>
</ TD>
<TD> {{user.fName}} </ TD>
<TD> {{user.lName}} </ TD>
</ TR> </ TBODY>
</表>
<Tableクラス= "テーブルには、卓上ストライプ">
<THEAD> <TR>
<Thの>編集</目>
<Thの>姓</目 >
<Thの>姓</目 >
</ TR> </ thead要素>
<TBODY> <TR-リピートngの 「ユーザーがユーザーを"=>
<TD>
<Buttonクラス= "btnの" NG +クリック= "editUser（user.id）">
<スパンクラス= "glyphicon glyphicon-鉛筆"> </ span>の＆NBSP;＆NBSP;編集
</ボタン>
</ TD>
<TD> {{user.fName}} </ TD>
<TD> {{user.lName}} </ TD>
</ TR> </ TBODY>
</表>
»をお試しください
ステップ2：HTMLフォームを作成します。
myUsers_Form.html
<Buttonクラス= "btn- BTN成功」NGクリック=" editUser（ '新'） ">
<スパンクラス= "glyphicon glyphicon-ユーザー"> </ span>の新規作成ユーザー
</ボタン>
<HR>
<H3のNG-ショー= "編集 ">新しいユーザーを作成します。</ H3>
<H3 ngの非表示= "編集 ">ユーザーの編集：</ H3>
<Formクラス= "フォームの水平 ">
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">ファーストネーム：</ label>は
<DIVクラス= "COL-SM -10">
<input type = "text" NG -model = "fNameを「NG-無効="！編集"プレースホルダ="ファーストネーム">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">姓：</ label>は
<DIVクラス= "COL-SM -10">
<input type = "text" NG -model = "LNAME" NG-無効= "！編集"プレースホルダ= "姓">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">パスワード：</ label>は
<DIVクラス= "COL-SM -10">
<入力タイプ= "パスワード" NG -model = "passw1"プレースホルダ= "パスワード">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">繰り返し：</ label>は
<DIVクラス= "COL-SM -10">
<入力タイプ= "パスワード" NG -model = "passw2"プレースホルダ= "繰り返しパスワード">
</ DIV>
</ DIV>
</フォーム>
<HR>
<Buttonクラスは、= "btn- BTN成功」NG-無効="エラー||不完全">
<スパンクラス= "glyphicon glyphicon- </ span>の変更を保存保存します">
</ボタン>
<スパンクラス= "glyphicon glyphicon-ユーザー"> </ span>の新規作成ユーザー
</ボタン>
<HR>
<H3のNG-ショー= "編集 ">新しいユーザーを作成します。</ H3>
<H3 ngの非表示= "編集 ">ユーザーの編集：</ H3>
<Formクラス= "フォームの水平 ">
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">ファーストネーム：</ label>は
<DIVクラス= "COL-SM -10">
<input type = "text" NG -model = "fNameを「NG-無効="！編集"プレースホルダ="ファーストネーム">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">姓：</ label>は
<DIVクラス= "COL-SM -10">
<input type = "text" NG -model = "LNAME" NG-無効= "！編集"プレースホルダ= "姓">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">パスワード：</ label>は
<DIVクラス= "COL-SM -10">
<入力タイプ= "パスワード" NG -model = "passw1"プレースホルダ= "パスワード">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ 」>
<Labelクラス= "COL-SM -2コントロールラベル">繰り返し：</ label>は
<DIVクラス= "COL-SM -10">
<入力タイプ= "パスワード" NG -model = "passw2"プレースホルダ= "繰り返しパスワード">
</ DIV>
</ DIV>
</フォーム>
<HR>
<Buttonクラスは、= "btn- BTN成功」NG-無効="エラー||不完全">
<スパンクラス= "glyphicon glyphicon- </ span>の変更を保存保存します">
</ボタン>
»をお試しください
ステップ3：コントローラを作成します。
myUsers.js
angular.module( 'myApp' , []).controller( 'userCtrl' , function ($scope) {
$scope.fName = '' ;
$scope.lName = '' ;
$scope.passw1 = '' ;
$scope.passw2 = '' ;
$scope.users = [
{id: 1 , fName: 'Hege' ,lName: "Pege" },
{id: 2 , fName: 'Kim' ,lName: "Pim" },
{id: 3 , fName: 'Sal' ,lName: "Smith" },
{id: 4 , fName: 'Jack' ,lName: "Jones" },
{id: 5 , fName: 'John' ,lName: "Doe" },
{id: 6 , fName: 'Peter' ,lName: "Pan" }
];
$scope.edit = true ;
$scope.error = false ;
$scope.incomplete = false ;
$scope.editUser = function (id) {
if (id == 'new' ) {
$scope.edit = true ;
$scope.incomplete = true ;
$scope.fName = '' ;
$scope.lName = '' ;
} else {
$scope.edit = false ;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};
$scope.$watch( 'passw1' , function () {$scope.test();});
$scope.$watch( 'passw2' , function () {$scope.test();});
$scope.$watch( 'fName' , function () {$scope.test();});
$scope.$watch( 'lName' , function () {$scope.test();});
$scope.test = function () {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true ;
} else {
$scope.error = false ;
}
$scope.incomplete = false ;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true ;
}
};
})
$scope.fName = '' ;
$scope.lName = '' ;
$scope.passw1 = '' ;
$scope.passw2 = '' ;
$scope.users = [
{id: 1 , fName: 'Hege' ,lName: "Pege" },
{id: 2 , fName: 'Kim' ,lName: "Pim" },
{id: 3 , fName: 'Sal' ,lName: "Smith" },
{id: 4 , fName: 'Jack' ,lName: "Jones" },
{id: 5 , fName: 'John' ,lName: "Doe" },
{id: 6 , fName: 'Peter' ,lName: "Pan" }
];
$scope.edit = true ;
$scope.error = false ;
$scope.incomplete = false ;
$scope.editUser = function (id) {
if (id == 'new' ) {
$scope.edit = true ;
$scope.incomplete = true ;
$scope.fName = '' ;
$scope.lName = '' ;
} else {
$scope.edit = false ;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};
$scope.$watch( 'passw1' , function () {$scope.test();});
$scope.$watch( 'passw2' , function () {$scope.test();});
$scope.$watch( 'fName' , function () {$scope.test();});
$scope.$watch( 'lName' , function () {$scope.test();});
$scope.test = function () {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true ;
} else {
$scope.error = false ;
}
$scope.incomplete = false ;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true ;
}
};
})
ステップ4：ホームページを作成
myUsers.html
<！DOCTYPE HTML>
<HTML>
<リンクのrel = "スタイルシート"のhref = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<SCRIPT SRC = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </スクリプト>
<ボディngのアプリ= "て、myApp " NG-コントローラ= "userCtrl">
<DIVクラス = "コンテナ">
<DIV NG-含ま= " ' myUsers_List.htm'"> </ div>の
<DIV NG-含ま= " ' myUsers_Form.htm'"> </ div>の
</ DIV>
<スクリプトSRC = "myUsers.js"> </スクリプト>
</ BODY>
</ HTML>
<HTML>
<リンクのrel = "スタイルシート"のhref = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<SCRIPT SRC = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </スクリプト>
<ボディngのアプリ= "て、myApp " NG-コントローラ= "userCtrl">
<DIVクラス = "コンテナ">
<DIV NG-含ま= " ' myUsers_List.htm'"> </ div>の
<DIV NG-含ま= " ' myUsers_Form.htm'"> </ div>の
</ DIV>
<スクリプトSRC = "myUsers.js"> </スクリプト>
</ BODY>
</ HTML>
»をお試しください