2015-11-03 82 views
0

我想添加模板链接,这是工作,但我想知道是否有可能添加您的页眉和页脚,以及现在我抄我的页面的页眉和页脚。角度routeprovider包括页眉,页脚和模板

这里是我的JS:

app.config(['$routeProvider', '$locationProvider', 
     function($routeProvider, $locationProvider) { 
      $routeProvider 
       .when('/', { 
        templateUrl: 'views/startpage.html', 
        controller: 'PageCtrl', 
        controllerAs: 'page' 
       }) 
       .when('/page/test', { 
        templateUrl: 'test.html', 
        controller: 'PageCtrl', 
        controllerAs: 'page' 
       }) 

和这里的模板IM加载它们在

<html> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <script src="js/angular.min.js"></script> 
    <script src="js/angular-route.js"></script> 
    <script src="js/angular-animate.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 

    <script type="text/javascript"> 
     angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />')); 
    </script> 

    <title>SiteEngine Mobile</title> 
</head> 
<body ng-app="ngViewExample"> 
    <div class="fixedHeaderApp"> 
     <div class="headerIconLogo"> 
      <img src="img/world_icon.png" width="28px" height="28px" /> 
     </div> 
     <span class="blue">Site</span><span class="orange">Engine</span> 
    </div> 

    <div class="whitespace"></div><div class="whitespace"></div> 
    <div class="whitespace"></div><div class="whitespace"></div> 
    <div class="whitespace"></div><div class="whitespace"></div> 

    <div class="homebackimgWrapper"> 
     <div class="titleLarge">SiteEngine</div> 
     <div class="titleSmall">Mobile</div> 
    </div> 
    <div class="container"> 
     <div class="loginLogo"> 
      <img src="img/loginIcon.png" width="120px" height="120px" /> 
     </div> 

     <form action="views/startpage.html"> 
      <div class="form-group"> 
       <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
      </div> 
      <div class="form-group"> 
       <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
      </div> 
      <div class="checkbox"> 
       <label> 
        <input type="checkbox"> Ingelogd blijven 
       </label> 
      </div> 
      <button type="submit" class="btn btn-primary btnq-lg btn-block">Inloggen</button> 
     </form> 

     <div class="whitespace"></div> 

     <div ng-controller="HomeController as product"> 
      <div ng-repeat="product in product.products"> 
       <h4>{{product.name}}</h4> 
       <button ng-show="product.canPurchase">Add to stomach</button> 
      </div> 
     </div> 
    </div> 


    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body> 

而且我有不同的菜单选项不同的页面。

回答

-1

你可以尝试使用ng-view作为放置你的模板的地方。您的页脚和页眉将位于该ng视图之外。你也可以直接在html中渲染你的菜单。只需将你的菜单和链接映射到某个地方,并将其呈现在html中即可。

+0

我并不真正遵循解决方案 –