AngularJS路由视图正确但样式表已损坏

Question

我正在构建一个带有路由视图的AngularJS应用程序，并且要清楚路由是否正常工作，因为我/ views /文件夹中的模板页面异步加载到我的index.html页面上的视图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位于＆＃34;观看＆＃34;在文件系统中，为什么要声明templateUrl属性为＆＃34; 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

Answer 2

也许这会有所帮助：

How to include view/partial specific styling in AngularJS

并注意要点

<强> 2。使用$ routeProvider

指定哪些样式表属于哪些路径