AngularJS에는 다음이 포함됩니다.


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

HTML에 HTML 파일 포함

HTML에서는 HTML 파일을 포함하는 기능이 현재 지원되지 않습니다.

서버 측 포함

대부분의 서버 측 스크립트는 파일 포함 기능(SSI: 서버 측 포함)을 지원합니다.

SSI를 사용하면 HTML 파일을 HTML에 포함시켜 클라이언트 브라우저로 보낼 수 있습니다.

PHP 예제

<?php require("navigation.php") ?>

클라이언트측 포함

JavaScript를 통해 이를 수행하는 방법은 다양합니다. HTML에 HTML 파일이 포함되어 있습니다.

보통 우리는 http 요청(AJAX)을 사용하여 서버에서 데이터를 가져오고 반환된 데이터를 전달할 수 있습니다. HTML 요소에 쓰려면 innerHTML을 사용하세요.

AngularJS include

AngularJS를 사용하면 ng-include 지시어를 사용하여 HTML 콘텐츠를 포함할 수 있습니다.

<

div

class="컨테이너">
<
div ng-include="'myUsers_List.htm'"><
/div > ; <div ng-include="'myUsers_Form.htm'"><
/div>< ;/div ></body
>단계는 다음과 같습니다.

1단계: HTML 목록 만들기Instance
<h3>用户</h3>

<table class="table table-striped">
  <thead><tr>
    <th>编辑</th>
    <th>名</th>
    <th>姓</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>
인스턴스 실행 »


온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

2단계: HTML 양식 만들기

Instance
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">名:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">姓:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">重复密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="重复密码">
    </div>
  </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>保存
</button>


인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

步骤 3: 创建控system器

myUsers.js

angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName    = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
   $scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id:2, fName:'Kim',lName: "핌"    },
{id:3, fName:'Sal',lName:"Smith" },
{id:4, fName:'Jack',lName:"Jones"    },
{id:5, fName:'John',lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan"    }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete    = 거짓;
$scope.editUser = function(id) {
  if (id == 'new') {
    $scope.edit    = true;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName =    '';
    } else {
    $scope.edit = false;
    $scope.fName = $scope.users[id-1].fName;
          $scope.lName = $scope.users[id-1].lName;
  }
};

$scope.$watch('passw1',function()    {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
   $scope.$watch('fName',function() {$scope.test();});
$scope.$watch('lName',function()    {$scope.test();});

$scope.test = function() {
  if ($scope.passw1    !== $scope.passw2) {
    $scope.error = true;
    } else {
    $scope.error =    false;
  }
  $scope.incomplete = false;
  if ($scope.edit && (!$scope.fName.length    ||
    !$scope.lName.length ||
    !$scope.passw1.length ||    !$scope.passw2.length)) {
    $scope.incomplete = true;
  }
};
   })

步骤 4: 创建主页

实例

<!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="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<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>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요