如何使用angularJs将多个html页面添加到一个html页面中答案

【问题标题】：how to add multiple html pages into one single html page using angularJs如何使用angularJs将多个html页面添加到一个html页面中
【发布时间】：2015-04-22 12:08:10
【问题描述】：

我创建了 header.html、footer.html、leftpanel.html 和 content.html，我想创建一个 html 页面，使用 angularjs 将所有页眉、页脚、左面板和内容页面显示到一个页面中。有可能吗？

这是我的代码：

main.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fullcalendar.css">
<link rel="stylesheet" href="prettyPhoto.css.css">
<link rel="stylesheet" href="rateit.css">
<link rel="stylesheet" href="bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="jquery.cleditor.css">
<link rel="stylesheet" href="daterangepicker-bs3.css">
<link rel="stylesheet" href="bootstrap-switch.css">
<link rel="stylesheet" href="widgets.css">
<link rel="stylesheet" href="dropzone.css">
<link rel="stylesheet" href="validationEngine.jquery.css">
<link rel="stylesheet" href="jquery.gritter.css">
<link rel="stylesheet" href="jquery.easy-pie-chart.css">
<link rel="stylesheet" href="rating_style.css">
<link rel="stylesheet" href="jquery.tablesorter.style.css">
<link rel="stylesheet" href="jquery-ui-1.9.2.custom.min.css">
<link href="form.css" type="text/css" rel="stylesheet"/>
<link href="style.css" type="text/css" rel="stylesheet"/>
<link href="all.css" type="text/css" rel="stylesheet"/>
<link href="font-awesome.css" type="text/css" rel="stylesheet"/>
<link href="font-awesome.min.css" type="text/css" rel="stylesheet"/>

<script src="default.js"></script>
<script src="bottom.js"></script>
<script src="topRight.js"></script>
<script src="top.js"></script>
<script src="filter.js"></script>
<script src="custom.js"></script>
<script src="charts.js"></script>
<script src="jquery.validationEngine.js"></script>
<script src="jquery.maskedinput.min.js"></script>
<script src="common.js"></script>
<script src="jquery.dataTables.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="jquery-1.8.2.js"></script>
</head>

<body ng-app="myApp" ng-view="">

  <div class="container" ng-controller="RouteCtrl">

    <div id="header" ng-view="">
    <div ng-include="C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/header.html">
    </div>
    </div>
    <div id="sidebar" >
    <div ng-include="C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/leftpanel.html">
    </div>
    </div>
    <div id="content">
    <div ng-include="C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/content.html">
    </div>
    </div>
    <div id="footer">
    <div ng-include="C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/footer.html">
    </div>
    </div>      

</body>

<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
  $routeProvider

  .when('/main.html', {
    controller: 'RouteCtrl',
    templateUrl: 'C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/main.html'
  })
  // if not match with any route config then send to home page
  .otherwise({
    redirectTo: 'C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/login.html';
  });
});

myApp.controller('RouteCtrl', function($scope) {

  $scope.template = {
    "header": "C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/header.html",
    "leftpanel": "C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/leftpanel.html",
    "content": "C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/content.html";
    "footer": "C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/footer.html"; 
  };
});
</script>

</html>

【问题讨论】：

您是否收到错误消息？它是什么样子的？顺便说一句：这对我来说就像包括世界末日;-)
本地文件 URL 不能正常工作。在 localhost 上使用一些简单的 Web 服务器来为您的页面提供服务。
@Stephan Weinhold- 它没有显示任何错误，但我想知道不使用服务器是否可能？
Is it possible to use ng-include without web server? 的可能重复项

标签： html angularjs

【解决方案1】：

它不起作用，因为大多数浏览器会阻止以file:// 开头的 XHR 请求。您可以按照 Mark Rajcok 的建议 here 尝试内联模板：

<script type="text/ng-template" id="sample.html">
    <div>This is my sample template</div>
</script>

【讨论】：