Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 15. Includes - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 15. Includes - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:35
728x90
반응형

AngularJS Includes 

 AngularJS에서, HTML 내에 HTML 파일을 포함 할 수 있습니다.

1. HTML Includes in Future HTML
 HTML안에 HTML의 부분을 포함하는 것은 HTML에서는 아직 제공하지 않습니다.

 HTML 불러오기는 미래의 버전의HTML을 위한 W3C 제안 http://www.w3.org 입니다:


 

1
<link rel="import" href="/path/navigation.html">
cs




2. Server Side Includes
 대부분의 웹 브라우저는 Server Side Includes(SSI)를 제공합니다.

 SSI에서, 페이지가 브라우저에 보내지기 전에 HTML안에 HTML을 포함 할 수있습니다.

 

1
<?php require("navigation.php");?>
cs






3. Client Side Includes
 자바스크립트를 이용하여 HTML안에 HTML을 포함하는 방식은 많은 방법이 있습니다.

 가장 일반적인 방법은 http request(AJAX)를 사용하여 서버로부터 데이터를 불러오는 방법이고, HTML 요소의 innerHTML을 통하여 데이터를 작성하는 법 입니다.





4. AngularJS Side Includes
 AngularJS에서, HTML 내용을 ng-include​ 지시어를 사용하여 포함시킬 수 있습니다:



 

1
2
3
4
5
6
7
8
<body>
 
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>
 
</body>
cs





Step 1: Create the HTML List
 myUsers_List.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h3> Users</h3>
 
<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr></thead>
  <tbody><tr ng-repeat="user in users">
    <td>
      <button class="btn" ng-click="editUser(user.id)">
        <span class="glyphicon glyphicon-pencil"></span>  Edit
      </button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr></tbody>
</table>
 
cs








Step 2: Create the HTML Form

myUsers_Form.html




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>  Create New User
</button>
<hr>
 
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
 
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">First Name:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">Last Name:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Password:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Repeat:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="Repeat Password">
    </div>
  </div>
</form>
 
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>  Save Changes
</button>
 
 
cs











Step 3: Create the Main Page

 myUsers.html




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html ng-app="">
 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
 
    <body ng-controller="userController">
 
    <div class="container">
      <div ng-include="'myUsers_List.htm'"></div>
      <div ng-include="'myUsers_Form.htm'"></div>
    </div>
 
    <script src= "myUsers.js"></script>
 
    </body>
</html>
 
cs
 



  









* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.


728x90
반응형
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 13.5 API - AngularJS 강좌  (0) 2016.06.14
[AngularJS] 16. Application - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 14. Bootstrap- Angular JS 강좌  (0) 2016.06.14
[AngularJS] 13. 검사(Validations) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 12. 서식(Forms) - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more