AngularJS가 포함되어 있습니다
AngularJS에는 HTML에 HTML 파일을 포함시킬 수 있습니다.
HTML에 HTML 파일을 포함하십시오
HTML에서 HTML 파일을 포함하는 기능은 현재 지원되지 않습니다.
서버에는 포함됩니다
대부분의 서버 측 스크립트는 포함 파일 함수 (SSI : 서버 측 포함)를 지원합니다.
SSI를 사용하면 HTML에 HTML 파일을 포함하여 클라이언트 브라우저로 보낼 수 있습니다.
PHP 인스턴스
<? php 요구 ( "navigation.php"); ?>
고객이 포함됩니다
HTML에 JavaScript와 함께 HTML 파일을 포함시키는 방법에는 여러 가지가 있습니다.
일반적으로 http request (ajax)를 사용하여 서버에서 데이터를 가져 오며 innerhtml을 사용하여 반환 된 데이터를 HTML 요소에 쓸 수 있습니다.
AngularJS가 포함되어 있습니다
AngularJS를 사용하면 NG-Include 지침을 사용하여 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> 편집 </th> <th> name </th> <th> name </th> </tr> </thead> <tbody> <tbody> <tbody> <tbody> <tbody> <tr ng-repeat = "사용자"> <td> <button ng-click = "edituser (user.id)"> </td> </td> </td> <td> {{user.fname}} </td> <td> {{user.lname}} </td> </td> </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"> 편집기 사용자 : </h3> <form> <div> label> </label> <div> <input = "text" ng-model = "fname"ng-disabled = "! edit"placeholder = "name"> </div> </div> <div> <lable> 제목 : </label> <div> <intput type = "text"ng-model = "lname"ng-disabled = "! edit"placeholder = "</div> <label> password : </div> type = "passwerw1"placeholder = "passw1"placeholder = "password"> </div> </div> <div> <label> 비밀번호 반복 : </label> <div> <입력 유형 = "password"ng-model = "passw2"placeholder = "반복"> </div> </div> </form> <hr> <버튼 ng-disabled | | 불완전한 "> <span> </span> 저장 </button>
실행 결과 :
3 단계 : 컨트롤러를 만듭니다
myusers.js
Angular.Module ( 'myApp', []). 컨트롤러 ( 'userctrl', function ($ scope) {$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = ''; $ scope.passw2 = ''; $ scope.users = [{id : 1, fname : 'hege', "} fname : 'kim', lname : "pim"}, {id : 3, fname : 'sal', lname : "smith"}, {id : 4, fname : 'jack', lname : "jones"}, {id : 5, fname : 'John', lname : 'doe "}, {pete': 6, fname : 6, fname : 6 }; $ scope.error = false; $ scope.incement; $ scope.edituser = function (id == 'new'). $ scope.fname = $ scope.users [id-1] .fname.lname = $ scope.users [id-1]; $ scope. $ watch ( 'passw1', {$ scope.test (); $ scope. $ scope. {$ scope.test ();}); $ scope. $ watch ( 'fname', function () {$ scope.test ();}); $ scope. $ scope. $ watch ( 'lname', function () {$ scope.test ();}); $ scope. $ scope. ( 'lname', function (); if ($ scope.passw1! == $ scope.passw2) {$ scope.error = true} $ scope.incople = false; ! $ scope.passw2.length)) {$ scope.incomplete = true;});4 단계 : 홈페이지를 만듭니다
myusers.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "스타일 시트"href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootsprap.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> <div> <div ng-include = " 'myusers_list.htm'"> divls ng-include = " 'myusers_form.htm'"> </div> </div> <script src = "myusers.js"> </script> </body> </html>
실행 결과 :
위는 AngularJS 정보의 편집입니다. AngularJS가 친구를 프로그래밍하는 데 도움이되기를 바랍니다.