Angular ngRoute - 未正确加载 html

Question

我正在尝试使用ngRoute。 当我转到 url /#/page1 时，我在正确的位置收到了 page1。 但是我的链接有问题，而且 css 也不能正常工作。 另一方面，如果我转到page1.html 并添加mdl 的css 和js 就可以了。

这是我的应用程序

 var app = angular.module('app',['ngRoute'])
.config(['$routeProvider',
function ($routeProvider){
    $routeProvider
  .when('/page1',{
     templateUrl : 'pages/page1.html',
     controller : 'Page1Ctrl'
   }); 

}])
.controller('Page1Ctrl',['$scope',function($scope){
}]);

我的page1.html是从mdl布局的标签（mdl的css和所有js都在index.html中）

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
      <a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
      <a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
      <a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
  </div>

  <div class="mdl-tabs__panel is-active" id="starks-panel">
    <ul>
      <li>Eddard</li>
      <li>Catelyn</li>

    </ul>
  </div>
  <div class="mdl-tabs__panel" id="lannisters-panel">
    <ul>
      <li>Tywin</li>
      <li>Cersei</li>
      <li>Jamie</li>
    </ul>
  </div>
  <div class="mdl-tabs__panel" id="targaryens-panel">
    <ul>
      <li>Viserys</li>
    </ul>
  </div>
</div>

并在index.html 中添加<ng-view ></ng-view>

我也尝试使用 jquery.load 来加载 page1.html 和同样的问题。

如果有人可以帮助我，我会感谢，

谢谢。

编辑： 它正在加载 css，但某些 css 字段已重载.. 所以看起来没有加载 css..

Answer 1

在index.html 中列出您的所有资源(js,css)。

在index.html的body标签内创建

ng-view

现在我们所有的部分 html 将被加载到ng-view

注意：不要忘记在 index.html 中添加ng-app

更新：只需将您的路由器更改为

  $routeProvider
  .when('/page1',{
     templateUrl : 'pages/page1.html',
     controller : 'Page1Ctrl'
   })
  .when('/',{
     templateUrl : 'pages/page1.html',
     controller : 'Page1Ctrl'
 });

Answer 2

看看这个：https://github.com/door3/angular-css。它允许您为每个路由指定 css 文件。