Angular app在刷新頁面上沒有加載CSS和JS？

Question

我有一個使用AngularJS的應用程序。 這是它的一個鏈接 - Angular App導航欄中的所有鏈接都使用默認的角度路由器。 當我刷新它們時，所有頁面都能正常工作，但是當我刷新它或直接轉到它時，像這樣的頁面加載沒有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

謝謝大家的幫助，我在另一個問題中找到了實際問題。 我必須將<base href="/">放在index.html頭部的其他鏈接之上。 這是正確答案的鏈接。 所以現在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>

Answer 2

您正在使用html5歷史記錄模式，這就是為什么它無法加載css和js文件。 你需要使用url重寫器來整個服務index.html所以它可以加載你的css和js文件，你可以有沒有哈希的url。

注意：-

在您不刷新頁面之前，您不會注意到它。 一切都會有效，直到你點擊刷新按鈕並為你提供沒有css和js的靜態html頁面

使用html-history模式時發生了什么？

您提出請求，並且在角度可以對該請求作出反應之前，您的服務器找到example.html文件並提供該文件並且該文件沒有css或js文件，它是您的index.html，其中包含所有的文件，因此您需要告訴您只保持服務index.html和更高版本angular的服務器將重定向到所請求的頁面，該頁面將顯示在ng-view中，並將包含所有css和js文件。

服務器端 （Source Angular的文檔）

使用此模式需要在服務器端重寫URL，基本上您必須重寫所有鏈接到應用程序的入口點（例如index.html）。 對於這種情況，需要標記也很重要，因為它允許Angular區分作為應用程序庫的url部分和應用程序應該處理的路徑。

Angular app在刷新頁面上沒有加載CSS和JS？

問題描述

2 個解決方案

解決方案1
10 已采納 2016-08-12 13:24:20

解決方案2
0 2016-08-12 09:21:53

Angular app在刷新頁面上沒有加載CSS和JS？

問題描述

2 個解決方案

解決方案1 10 已采納 2016-08-12 13:24:20

解決方案2 0 2016-08-12 09:21:53

解決方案1
10 已采納 2016-08-12 13:24:20

解決方案2
0 2016-08-12 09:21:53