Question

我正在尝试使用ngRoute。当我转到网址/#/page1时，我会在正确的位置收听page1。但我的链接有问题，而且css也无法正常工作。另一方面，如果我转到page1.html并添加css的{{1}}和js，则可以正常使用。

这是我的应用

mdl

我的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的标签（css和mdl的所有j都位于mdl）

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

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

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

感谢。

编辑：它加载了css，但是一些css字段被重载了..所以看起来没有加载css ..

Answer 1

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

在index.html创建

的正文标记内

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文件。

Angular ngRoute - 未正确加载html

2 个答案: