AngularJSが含まれます
AngularJSでは、HTMLにHTMLファイルを含めることができます。
HTMLにHTMLファイルを含めます
HTMLでは、HTMLファイルを含む機能は現在サポートされていません。
サーバーには含まれます
ほとんどのサーバー側のスクリプトは、インクルードファイル関数（SSI：サーバー側を含む）をサポートしています。
SSIを使用して、HTMLファイルをHTMLに含めて、クライアントブラウザーに送信できます。
PHPインスタンス
<？phpが必要です（ "navigation.php"）; ？>
クライアントは含まれます
JavaScriptを使用してHTMLにHTMLファイルを含める方法はたくさんあります。
通常、HTTPリクエスト（AJAX）を使用してサーバーからデータを取得し、Internhtmlを使用して返されたデータをHTML要素に書き込むことができます。
AngularJSが含まれます
AngularJSを使用して、NGインクルード指令を使用して、HTMLコンテンツを含めることができます。
例
<body> <div> <div ng-include = "'myusers_list.htm'"> </div> <div ng-include = "'myusers_form.htm'"> </div> </div>
手順は次のとおりです。
ステップ1：HTMLリストを作成します
myusers_list.html
<h1> user </h1> <table> <thead> <tr> <th> edit </th> <th> name </th> <th> name </th> <th> </tr> </thead> <tbody> <tr ng-repeat = "user inユーザー"> <td> <ボタンng-click = "edituser（user.id） <td> {{user.fname}} </td> <td> {{user.lname}} </td> </tr> </tbody> </table>実行結果：
ユーザー
| 編集 | 名前 | 姓 |
|---|---|---|
| {{user.fname}} | {{user.lname}} |
ステップ2：HTMLフォームを作成します
myusers_form.html
<button ng-click = "edituser（ 'new'）"> <span> </span>新しいユーザーを作成</button> <hr> <h3 ng-show = "edit">新しいユーザーを作成する：</h3> <h3 ng-hide = "edit"> editorユーザー：</h3> <> <div> <div> <div> <> <> <> <div> <> <> <div> ng-model = "fname" ng-disabled = "！edit" placeholder = "name"> </div> </div> <div> <label>件名：</label> <div> <入力タイプ= "ng-model =" lname "ng-disabled ="！edit "placeholder =" type = "password" ng-model = "passw1" placeholder = "password"> </div> </div> <div> <abol>繰り返しパスワード：</label> <div> <入力タイプ= "パスワード" ng-model = "passw2" placesholder = "繰り返しパスワード"> </div> </div> </form <hr> <hr> <button = "erra不完全 "> <span> </span> save </button>
実行結果：
ステップ3：コントローラーを作成します
myusers.js
angular.module（ 'myApp'、[]）。コントローラー（ 'userctrl'、function（$ scope）{$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = ''; $ scope.passw2 = '' '; $ scope.users = [{id：1、fname：fname： }、{id：2、fname： 'kim'、lname： "pim"}、{id：3、fname： 'sal'、lname： "smith"}、{id：4、fname： 'jack'、lname： "jones"}、{id：5、fname： 'john'、lname： 'lname： "doe"}、 " fname： "pan"}]; $ scope.error = false; $ scope.edituser = function（id）{if（id == 'new'） {$ scope.edit = false.fname = $ scope.users [id-1] .lname; {$ scope.test（）;}）; $ scope。$ watch（ 'fname'、function（）{$ scope.test（）;}）; $ scope。$ watch（ 'lname'、function（）{$ scope.test（）;}）; $ scope。 {$ scope.passw1！== scope.passw2）{$ scope.error; ！$ scope.passw2.length））{$ scope.incomplete = true;}）ステップ4：ホームページを作成します
myusers.html
<！doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "styleSheet" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp" ng-controller = "userctrl"> <div-div ng-include = "'myusers_form.htm'" "> </div> </div> <scrip src =" myusers.js "> </scrip> </body> </html>
実行結果：
上記は、Angularjs情報の編集です。 Angularjsのプログラミングの友達に役立つことを願っています。