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