我使用的第一次AngularJS。我已经成功地在我的 index.html的实施一个 NG-视图包含一个了header.html 模板。因此，它看起来像下面

但现在我创建一个仪表盘（ dashboard.html ）。所以，我在除了了header.html A左侧菜单中的，所以它看起来是这样的：

我的index.html是类似这样的：

 ＆LT; D​​IV NG-包括='模板/ header.html中'＆GT;＆LT; / DIV＆GT;＆LT; D​​IV CLASS =主ID =主无空间＆GT;  ＆LT; D​​IV ID =主页＆GT;    ＆LT; D​​IV ID =包装类=容器＆GT;      ＆LT; D​​IV CLASS ='集装箱'＆GT;        ＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;      ＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;  ＆LT; / DIV＆GT;＆LT; D​​IV NG-包括='模板/ footer.html'＆GT; 

我dashboard.html是类似这样的：

 ＆LT; D​​IV CLASS =崩盘导航栏，导航栏崩溃-EX1崩溃＆GT;    ＆LT; UL类=NAV导航栏，导航侧导航＆GT;      ＆LT;李班=主动＆GT;        ＆下;一个纳克-的href =＃/ LINK1＆GT;链接1所述; / A＆GT;      ＆LT; /李＆GT;      ＆LT;立GT;        ＆下;一个纳克-的href =＃/ LINK2＆GT;链路2'; / A＆GT;      ＆LT; /李＆GT;      ＆LT;立GT;        ＆下;一个纳克-的href =＃/ LINK3＆GT;链接3'; / A＆GT;      ＆LT; /李＆GT;    ＆LT; / UL＆GT;  ＆LT; / DIV＆GT; 

解决方案

试试这个：

\r\r

\r

\r

\r\r\r

http://jsfiddle.net/mcVfK/928/

I'm using AngularJS for the first time. I've successfully implemented a single ng-view in my index.html page which contains a header.html template. So it looks like below

But now I'm creating a dashboard (dashboard.html). So, I have a left side menu in-addition to header.html so it looks like this:

My index.html is similar to this:

<div  ng-include="'templates/header.html'"></div>
<div class="main" id="main-no-space" >
  <div id="main-page">
    <div id="wrapper" class="container">
      <div class='container'>
        <div ng-view></div>
      </div>
    </div>
  </div>
<div  ng-include="'templates/footer.html'">

My dashboard.html is similar to this:

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav side-nav">
      <li class="active">
        <a ng-href="#/link1">Link 1</a>
      </li>
      <li>
        <a ng-href="#/link2">Link 2</a>
      </li>
      <li>
        <a ng-href="#/link3">Link 3</a>
      </li>
    </ul>
  </div>

Try this:

angular.module('app', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/dashboard', {
        templateUrl: 'dashboard.html',
        controller: DashboardCtrl
    })
        .otherwise({
        redirectTo: '/dashboard'
    });
}]);

function DashboardCtrl() {

}

* {
    box-sizing: border-box;
}
#main:after {
    content: "";
    display: block;
    clear: both;
}
#header {
    padding: 20px;
    border: 1px solid #000;
}
#main {
    padding: 20px;
    border: 1px solid #000;
}
#sidebar {
    padding: 20px;
    border: 1px solid #000;
    float: left;
    width: 20%;
}
#content {
    padding: 20px;
    border: 1px solid #000;
    float: right;
    width: 78%;
}
#footer {
    padding: 20px;
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>
<div ng-app="app">
    <div ng-include="'header.html'" id="header"></div>
    <div class="main" id="main-no-space">
        <div id="main-page">
            <div id="wrapper" class="container">
                <div class="container">
                    <div ng-view id="main">loading...</div>
                </div>
            </div>
        </div>
        <div ng-include="'footer.html'" id="footer"></div>
    </div>
    <script type="text/ng-template" id="dashboard.html">
        <div ng-include="'sidebar.html'" id="sidebar"></div>
        <div id="content">dashboard</div>
    </script>
    <script type="text/ng-template" id="header.html">
        header
    </script>
     <script type="text/ng-template" id="sidebar.html">
        sidebar
    </script>
    <script type="text/ng-template" id="footer.html">
        footer
    </script>
</div>

JSFiddle http://jsfiddle.net/mcVfK/928/