Question

我有一个使用AngularJS的应用程序。这是它的链接 - Angular App 导航栏中的所有链接都使用默认角度路由器。当我刷新它们时，所有页面都能正常工作，但是当我刷新它或直接转到它时，像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-history模式时发生了什么？

你发出请求，在角度可以对该请求作出反应之前，你的服务器找到example.html文件并提供服务，而且那些文件没有css或js文件，你的index.html包含所有你的文件，所以你需要告诉你的服务器只保持服务index.html和更高版本的角度将重定向到所请求的页面，该页面将显示在ng-view中，并将包含所有css和js文件。

服务器端（Source Angular的文档）

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

Angular app在刷新页面上没有加载CSS和JS？

1 个答案: