ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [AngularJS] 15. Includes - Angular JS 강좌
      Web/AngularJS 2015. 6. 12. 14:25
      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 를 참고하여 작성하였습니다.

       


       



       



      저작자표시

      'Web > AngularJS' 카테고리의 다른 글

      [AngularJS] 1. 프로젝트 및 개발환경 구성 - AngularJS 강좌  (0) 2016.01.15
      [AngularJS] 13.5 API - AngularJS 강좌  (0) 2015.11.20
      [AngularJS] 16. Application - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 14. Bootstrap- Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 13. 검사(Validations) - Angular JS 강좌  (0) 2015.06.12
      [AngularJS] 12. 서식(Forms) - Angular JS 강좌  (0) 2015.06.12

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바