在angularjs中路由时未在其他视图中加载CSS答案

【问题标题】：CSS not loaded in other views when routing in angularjs在angularjs中路由时未在其他视图中加载CSS
【发布时间】：2016-10-31 02:27:49
【问题描述】：

嘿，我正在使用 routeProvider 和 ng-view 在 Angularjs 中的视图之间进行路由。我的问题是当路由更改时我的 css 没有被加载。我尝试包含 Angular-css，以便 css 可以包含在每个视图中，但它似乎不起作用。它在从 ng-view (home.html) 加载的第一页中加载，但是当我从那里链接到另一个页面时，css 停止加载。

index.html：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>

    <script src="app/lib/jquery-3.0.0.js"></script>
    <link href="styles.css" rel="stylesheet" type="text/css" />

    <script src="app/lib/angular.min.js"></script>
    <script src="app/lib/angular-route.min.js"></script>
    <script src="app/lib/angular-css.min.js"></script>
    <script src="app/lib/app.js"></script>
  </head>
  <body>

    <main ng-view>
    </main>

  </body>

app.js

var myApp = angular.module('myApp', ['ngRoute', 'angularCSS']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
  .when('/login', {
    templateUrl: 'views/login.html',
    css: 'styles.css'
  })
  .when('/home', {
    templateUrl: 'views/home.html',
    css: 'styles.css'
  })
  .when('/signup', {
    templateUrl: 'views/signup.html',
    css: 'styles.css'
  })
  .when('/submitdish', {
    templateUrl: 'views/submitdish.html',
    css: 'styles.css'
  })
  .when('/login', {
    templateUrl: 'views/login.html',
    css: 'styles.css'
  })
  .otherwise({
    redirectTo: '/home',
    css: 'styles.css'
  });
}]);

home.html：

<ul class="nav">
     <a align="center" href="views/home.html"><li>Home</li></a>
     <a align="center" href=""><li>About</li></a>
     <a align="center" href="#"><li>Contact</li></a>
  </ul>

<section class="container">
  <div class="left-half">
    <article>
      <a href="views/submitdish.html" class="Button">Sell a Dish</a>

      <p>Something Something Something about Selling your home-cooked dishes</p>
    </article>
  </div>
  <div class="right-half">
    <article>
      <a href="views/buydish.html" class="Button">Buy a Dish</a>
      <p>Yada yada yada buy food from your neighbors</p>
    </article>
  </div>
</section>

【问题讨论】：

你能重新创建这个问题并将其发布到小提琴中吗？

标签： html css angularjs ngroute ng-view

【解决方案1】：

尝试改变你的注射方式

你有什么

var myApp = angular.module('myApp', ['ngRoute', 'angularCSS']);

到

var myApp = angular.module('myApp', ['ngRoute', 'door3.css']);

只要你使用的是这个项目和版本 1.0.7

http://door3.github.io/angular-css

还要验证您的 CSS 路径，即使您的 .html 和 css 在同一个文件夹中，您也必须明确说明

    var myApp = angular.module('myApp', ['ngRoute', 'angularCSS']);

    myApp.config(['$routeProvider', function($routeProvider){

    $routeProvider
      .when('/login', {
        templateUrl: 'views/login.html',
        css: 'views/styles.css'
      }); 
}]);

或者如果在不同的文件夹中

var myApp = angular.module('myApp', ['ngRoute', 'angularCSS']);

        myApp.config(['$routeProvider', function($routeProvider){

        $routeProvider
          .when('/login', {
            templateUrl: 'views/login.html',
            css: 'Content/styles.css'
          }); 
    }]);

【讨论】：

嗯，这似乎不起作用......在该项目的描述中，它提到添加“angularCSS”作为依赖项：github.com/castillo-io/angular-css
@PaulBridi 检查 css 文件的路径，即使 css 位于您视图的同一文件夹中
好的，只是仔细检查了路径，它直接在根文件夹中，在视图文件夹之外。当我复制项目路径时，它只是styles.css。
不，我不这么认为
如果您尝试将 css 文件移动到文件夹中怎么办？然后更新路径

【解决方案2】：

好的，我发现问题是我正在使用链接到其他视图

<a href="views/submitdish.html" class="Button">Sell a Dish</a>

当我应该使用 #/submitdish 进行链接时（以便正确使用 routeProvider）

<a href="#/submitdish" class="Button">Sell a Dish</a>

【讨论】：

下面的答案中有很好的描述

【解决方案3】：

默认情况下，$routeProvider 和 $locationProvider 在 URL 中查找“#”——“hashbang 模式”。

例如，http://example.com/#/home 将使用您的原始设置作为 home 的 templateURL。

如果您不想使用哈希，请将 $locationProvider.html5Mode 设置为 true。下面的小示例将允许您使用浏览器 URL，例如 http://www.example.com/base/path

配置：

$routeProvider
  .when('/path', {
   templateUrl: 'path.html',
});
$locationProvider
  .html5Mode(true);

HTML（注意头部的基本 href）

<html>
  <head>
    <base href="/">
  </head>
  <body>
    <a href="/path">link</a> 
  </body>
</html>

【讨论】：