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

Posted 2023-03-06

【中文标题】AngularJS正确路由视图但样式表损坏

【英文标题】：AngularJS routing views properly but stylesheets broken

【发布时间】：2014-11-14 19:45:07

【问题描述】：

我正在构建一个带有路由视图的 AngularJS 应用程序，并且要明确路由正在工作，因为 /views/ 文件夹中的模板页面正在异步加载到我的 index.html 页面上的视图 div 中。

问题：这些曾经是以老式方式链接在一起的单独页面。 Index.html、deal.html 和 Mercer.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 路由版本的屏幕截图：

对正在发生的事情有任何想法吗？

【问题讨论】：

如果您想获得更快的回复，为您的代码提供一个 plunker url 总是很有帮助的。 plnkr.co

【参考方案1】：

如果您的 html 在文件系统中的“视图”下，为什么要将 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

【讨论】：

感谢有关 ui-router 的提示。视图/部分错误只是 *** 上的一个错误，它在我的代码中匹配。对此感到抱歉；x

就像我在帖子中所说，视图工作正常只是 css 没有正确显示。

【参考方案2】：

也许这会有所帮助：

How to include view/partial specific styling in AngularJS

注意点

2。使用 $routeProvider

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

【讨论】：

我看到了这个，它看起来很有希望，但对我的情况来说很复杂。我将不得不遍历数千行代码并将代码分成块来为每个视图创建这些 partial.css 文件。由于缺乏更好的选择，我最终可能会这样做。谢谢