Angular app在刷新页面上没有加载CSS和JS? [英] Angular app not loading CSS and JS on refreshing page?
问题描述
我有一个使用AngularJS的应用程序。以下是它的链接 - Angular App
导航栏中的所有链接都使用默认的角度路由器。当我刷新它们时,所有页面都可以正常工作,但像此这样的页面加载内容时没有css和js当我刷新它或直接转到它。
I have an app using AngularJS. Here is a link of it - Angular App All the links in the navbar are using default angular router. 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.
我觉得这是路由问题,虽然我不确定。这是 app.js
文件 -
I feel this is a issue with the routing although I am not sure. Here is the app.js
file -
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
的头部 -
This is the head from 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>
推荐答案
感谢大家的帮助,我发现了实际问题在另一个问题。我必须将< base href =/>
放在 index.html
开头的其他链接之上。这是一个正确答案的链接。所以现在 index.html
看起来像这样
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
. Here is a link to the correct answer. So now index.html
looks like this
<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 app在刷新页面上没有加载CSS和JS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!