javascript - AngularJS 路由 View 正确但样式表损坏

Question

我正在构建一个带有路由 View 的 AngularJS 应用程序，为了清楚路由是否正常工作，因为我/views/文件夹中的模板页面正在异步加载到我的 index.html 页面上的 View div 中。

问题:这些曾经是单独的页面，以老式的方式链接在一起。 Index.html、deal.html 和 merchant.html。那时它们在所有浏览器中都完美呈现，但是当我添加此 AngularJS 路由功能时，相同的代码被放入 index.html 文件中，但页面无法正确呈现。那里有很多样式……只是错位了。我无法理解它。我到处都看过，似乎没有人记录过这个问题。

这是我到目前为止所得到的:

头:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app.js"></script>

文件系统:

index.html 
app.js 
/views/main.html 
/views/merchant.html
/views/deal.html 
assets/css/ 
img/ 

index.html:

<div id="main">

     <div class="ng-view" autoscroll="true"></div>

</div>

我的 app.js:

var appName = angular.module('adamApp', ['ngRoute']);

// configure routes
appName.config(function($routeProvider) {
   $routeProvider.when('/', {
      templateUrl : 'partials/home.html',
      controller  : 'mainController'
   });
   $routeProvider.when('/merchant', {
      templateUrl : 'partials/merchant.html', 
      controller  : 'merchantController'
   });
   $routeProvider.when('/deal', {
      templateUrl : 'partials/deal.html', 
      controller  : 'dealController'
   });

   $routeProvider.otherwise({ redirectTo: "/" });

});

没有 Angular 路由的旧版网站截图:

样式表损坏的 Angular 路由版本的屏幕截图:

对发生的事情有什么想法吗？

Answer 1

如果您的 html 在文件系统中位于“views”下，为什么要将 templateUrl 属性声明为“partials/...”？

改变

  $routeProvider.when('/deal', {
      templateUrl : 'partials/deal.html', 
      controller  : 'dealController'
   });

到

  $routeProvider.when('/deal', {
      templateUrl : 'views/deal.html', 
      controller  : 'dealController'
   });

还有一条建议:放弃 ngRoute 并使用 ui-router，它已成为路由的实际标准。 https://github.com/angular-ui/ui-router