Question

我创建了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>

Answer 1

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

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

如何使用angularJs

1 个答案: