【18】AngularJS 包含

AngularJS 包含



AngularJS 中,你可以在 HTML 中含有 HTML 文件。


在 HTML 中包含 HTML 文件

在 HTML
中,目前还无支持包含 HTML 文件的成效。


劳务端包含

大多服务端脚本还支持包含文件功能
(SSI: Server Side Includes)。

利用 SSI,
你不过于 HTML 中蕴含 HTML 文件,并发送至客户端浏览器。

 

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

 


客户端包含

经过
JavaScript 有异常多种计可于 HTML 中含有 HTML 文件。

常见咱们用 http 请求 (AJAX)
从服务端获取数据,返回的数据我们可由此 使用 innerHTML 写入到 HTML
元素中。


AngularJS 包含

运用
AngularJS, 你可动用 ng-include 指令来含有 HTML
内容:

 

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

 

 

步骤如下:


步骤 1: 创建 HTML 列表

myUsers_List.html

  1. <h3>Users</h3>
  2. <table class="table table-striped">
  3. <thead><tr>
  4. <th>Edit</th>
  5. <th>FirstName</th>
  6. <th>LastName</th>
  7. </tr></thead>
  8. <tbody><tr ng-repeat="user in users">
  9. <td>
  10. <button class="btn" ng-click="editUser(user.id)">
  11. &nbsp;&nbsp;Edit
  12. </button>
  13. </td>
  14. <td>{{ user.fName }}</td>
  15. <td>{{ user.lName }}</td>
  16. </tr></tbody>
  17. </table>

步骤 2: 创建 HTML 表单

myUsers_Form.html

  1. <button class="btn btn-success" ng-click="editUser('new')">
  2. CreateNewUser
  3. </button>
  4. <hr>
  5. <h3 ng-show="edit">CreateNewUser:</h3>
  6. <h3 ng-hide="edit">EditUser:</h3>
  7. <form class="form-horizontal">
  8. <div class="form-group">
  9. <label class="col-sm-2 control-label">FirstName:</label>
  10. <div class="col-sm-10">
  11. <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  12. </div>
  13. </div>
  14. <div class="form-group">
  15. <label class="col-sm-2 control-label">LastName:</label>
  16. <div class="col-sm-10">
  17. <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  18. </div>
  19. </div>
  20. <div class="form-group">
  21. <label class="col-sm-2 control-label">Password:</label>
  22. <div class="col-sm-10">
  23. <input type="password" ng-model="passw1" placeholder="Password">
  24. </div>
  25. </div>
  26. <div class="form-group">
  27. <label class="col-sm-2 control-label">Repeat:</label>
  28. <div class="col-sm-10">
  29. <input type="password" ng-model="passw2" placeholder="Repeat Password">
  30. </div>
  31. </div>
  32. </form>
  33. <hr>
  34. <button class="btn btn-success" ng-disabled="error || incomplete">
  35. SaveChanges
  36. </button>

步骤 3: 创建控制器

myUsers.js

  1. angular.module('myApp',[]).controller('userCtrl',function($scope){
  2. $scope.fName ='';
  3. $scope.lName ='';
  4. $scope.passw1 ='';
  5. $scope.passw2 ='';
  6. $scope.users =[
  7. {id:1, fName:'Hege',lName:"Pege"},
  8. {id:2, fName:'Kim',lName:"Pim"},
  9. {id:3, fName:'Sal',lName:"Smith"},
  10. {id:4, fName:'Jack',lName:"Jones"},
  11. {id:5, fName:'John',lName:"Doe"},
  12. {id:6, fName:'Peter',lName:"Pan"}
  13. ];
  14. $scope.edit =true;
  15. $scope.error =false;
  16. $scope.incomplete =false;
  17. $scope.editUser =function(id){
  18. if(id =='new'){
  19. $scope.edit =true;
  20. $scope.incomplete =true;
  21. $scope.fName ='';
  22. $scope.lName ='';
  23. }else{
  24. $scope.edit =false;
  25. $scope.fName = $scope.users[id-1].fName;
  26. $scope.lName = $scope.users[id-1].lName;
  27. }
  28. };
  29. $scope.$watch('passw1',function(){$scope.test();});
  30. $scope.$watch('passw2',function(){$scope.test();});
  31. $scope.$watch('fName',function(){$scope.test();});
  32. $scope.$watch('lName',function(){$scope.test();});
  33. $scope.test =function(){
  34. if($scope.passw1 !== $scope.passw2){
  35. $scope.error =true;
  36. }else{
  37. $scope.error =false;
  38. }
  39. $scope.incomplete =false;
  40. if($scope.edit &&(!$scope.fName.length ||
  41. !$scope.lName.length ||
  42. !$scope.passw1.length ||!$scope.passw2.length)){
  43. $scope.incomplete =true;
  44. }
  45. };
  46. })

 

手续 4: 创建主页

myUsers.html

 

  1. <!DOCTYPE html>
  2. <html>
  3. <link rel="stylesheet" href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  4. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  5. <body ng-app="myApp" ng-controller="userCtrl">
  6. <div class="container">
  7. <div ng-include="'myUsers_List.html'"></div>
  8. <div ng-include="'myUsers_Form.html'"></div>
  9. </div>
  10. <script src="myUsers.js"></script>
  11. </body>
  12. </html>

结果:

 

图片 1

=

 

=

相关文章