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

Question

I have an app using AngularJS. 我有一个使用AngularJS的应用程序。 Here is a link of it - Angular App All the links in the navbar are using default angular router. 这是它的一个链接 - Angular App导航栏中的所有链接都使用默认的角度路由器。 All the pages work fine when i refresh them, but a page like this loads the content without css and js when i refresh it or go to it directly. 当我刷新它们时，所有页面都能正常工作，但是当我刷新它或直接转到它时，像这样的页面加载没有css和js的内容。

I feel this is a issue with the routing although I am not sure. 虽然我不确定，但我觉得这是路由问题。 Here is the app.js file - 这是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 = '!';
  });

This is the head from index.html - 这是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

Thanks everyone for your help, I found the actual problem in another question. 谢谢大家的帮助，我在另一个问题中找到了实际问题。 I had to put <base href="/"> above other links in the head of index.html . 我必须将<base href="/">放在index.html头部的其他链接之上。 Here is a link to the correct answer. 这是正确答案的链接。 So now index.html looks like this 所以现在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

You are using html5 history mode and that's why it's not able load the css and js files. 您正在使用html5历史记录模式，这就是为什么它无法加载css和js文件。 you need to use url re-writer for serving index.html whole the time so it can load your css and js files and you can have url without hash. 你需要使用url重写器来整个服务index.html所以它可以加载你的css和js文件，你可以有没有哈希的url。

Note:- 注意：-

You don't notice it until you don't refresh your page. 在您不刷新页面之前，您不会注意到它。 Everything will work till you hit the refresh button and serve you the static html page without the css and js 一切都会有效，直到你点击刷新按钮并为你提供没有css和js的静态html页面

What happened when you use html-history mode? 使用html-history模式时发生了什么？

You make an request and before angular can react on that request your server find example.html file and serve that and that files don't have the css or js files it's your index.html which contain all thee files so you need to tell your server that just keep serving index.html and later angular will redirect to the requested page which will be shown in the ng-view and will have all the css and js files. 您提出请求，并且在角度可以对该请求作出反应之前，您的服务器找到example.html文件并提供该文件并且该文件没有css或js文件，它是您的index.html，其中包含所有的文件，因此您需要告诉您只保持服务index.html和更高版本angular的服务器将重定向到所请求的页面，该页面将显示在ng-view中，并将包含所有css和js文件。

Server side (Source Angular's documentation) 服务器端 （Source Angular的文档）

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (eg index.html). 使用此模式需要在服务器端重写URL，基本上您必须重写所有链接到应用程序的入口点（例如index.html）。 Requiring a tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handled by the application. 对于这种情况，需要标记也很重要，因为它允许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