Angular 应用未在刷新页面上加载 CSS 和 JS？

Question

我有一个使用 AngularJS 的应用程序。这是其中的 link - Angular App 导航栏中的所有 link 都使用默认的 angular 路由器。当我刷新它们时所有页面都工作正常，但是当我刷新它或直接转到它时，像 this 这样的页面加载内容时没有 css 和 js。

我觉得这是路由的问题，虽然我不确定。这是 app.js 文件 -

angular
  .module('jobSeekerApp', [
    'ngRoute'
  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/companies', {
        templateUrl: 'views/companiesall.html',
        controller: 'CompaniesallCtrl',
        controllerAs: 'companies'
      })
      .when('/jobs', {
        templateUrl: 'views/jobsall.html',
        controller: 'JobsallCtrl',
        controllerAs: 'jobs'
      })
      .when('/companies/:id', {
        templateUrl: 'views/company.html',
        controller: 'CompanyCtrl',
        controllerAs: 'company'
      })
      .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'ContactCtrl',
        controllerAs: 'contact'
      })
      .otherwise({
        redirectTo: '/'
      });
      $locationProvider.html5Mode(true);
      $locationProvider.hashPrefix = '!';
  });

这是 index.html -

的头像

<head>
    <meta charset="utf-8">
    <title>Job Seeker</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials-theme-flat.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="/styles/main.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
    <base href="/">
  </head>

Answer 1

您正在使用 html5 历史记录模式，这就是它无法加载 css 和 js 文件的原因。您需要一直使用 url 重写器来为 index.html 提供服务，以便它可以加载您的 css 和 js 文件，并且您可以拥有 url 而不使用哈希。

注：-

除非您不刷新页面，否则您不会注意到它。一切都会正常工作，直到您点击刷新按钮并为您提供没有 css 和 js

的静态 html 页面

当你使用html历史模式时发生了什么？

您发出请求，在 angular 可以对该请求做出反应之前，您的服务器找到 example.html 文件并提供该文件，但该文件没有 css 或 js 文件你的 index.html 包含所有你的文件，所以你需要告诉你的服务器继续服务 index.html 之后 angular 将重定向到请求的页面，该页面将显示在 ng-view 和将包含所有 css 和 js 文件。

服务器端（来源Angular的文档）

使用此模式需要 URL 在服务器端重写，基本上您必须重写所有指向应用程序入口点的链接（例如 index.html）。对于这种情况，需要标记也很重要，因为它允许 Angular 区分 url 的部分，即应用程序基础和应由应用程序处理的路径。

Answer 2

谢谢大家的帮助，我在另一个问题中找到了真正的问题。我不得不将 <base href="/"> 放在 index.html 头部的其他链接之上。这是正确答案的 link。所以现在 index.html 看起来像这样

<head>
    <meta charset="utf-8">
    <title>Job Seeker</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <base href="/">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials.css" />
    <link rel="stylesheet" href="bower_components/jssocials/dist/jssocials-theme-flat.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="/styles/main.css">
    <!-- endbuild -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
  </head>

Angular 应用未在刷新页面上加载 CSS 和 JS？

Angular app not loading CSS and JS on refreshing page?

javascript

css

angularjs

ngroute