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のプログラミングの友達に役立つことを願っています。