个人中心
gpt4 book ai didi

javascript - CSS 无法正确加载带有参数的 $stateProvider 状态

转载 作者：行者123 更新时间：2023-11-28 06:01:43 27 4
gpt4 key购买 nike

所以我在这个 Angular SPA 上工作了一段时间，遇到了一个有趣的现象，我希望有人能帮我弄清楚。 Safari 会给我 Did not parse stylesheet at 'http://localhost:4000/teams/css/style.css' because non CSS MIME types are not allowed in strict mode 是一样的在 Chrome 上。这只会在我加载一个状态时发生，该状态的 url 包含其中的参数，如下所示:localhost:4000/teams/:teamname。其中 :teamname 是参数。在 url 中不包含参数的每个其他页面上，即localhost:4000/login CSS 将完美加载。

有人知道这是怎么回事吗？

这是我的代码:

应用模块和配置:app.js

(function() {

  'use strict';

  angular.module('myapp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('sprint', {
        url: '/teams/:teamname/projects/:projectId',
        templateUrl: 'js/views/project.view.html',
        controller: 'projectCtrl',
        controllerAs: 'project',
      })
      .state('register', {
        url: '/register',
        templateUrl: 'js/views/register.view.html',
        controller: 'registerCtrl',
        controllerAs: 'register'
      })
      .state('login', {
        url: '/login',
        templateUrl: 'js/views/login.view.html',
        controller: 'loginCtrl',
        controllerAs: 'login'
      })
      .state('teamDashboard', {
        url: '/teams/:teamname',
        templateUrl: 'js/views/teams/teamDashboard.view.html',
        controller: 'teamDashboardCtrl',
        controllerAs: 'teamDash',
        resolve: {
          projectStats: function($stateParams, teamsService) {
            return teamsService.getProjectStats($stateParams.teamname);
          }
        }
      })
      .state('home', {
        url: '/',
        templateUrl: 'js/views/home.view.html',
        controller: 'homeCtrl',
        controllerAs: 'home'
      });

      $locationProvider.html5Mode(true);
  });

})();

teamDashboard.controller.js

(function() {

  'use strict';

  angular.module('myapp').controller('teamDashboardCtrl', teamDashboardCtrl);

  function teamDashboardCtrl(projectStats) {
    var vm = this;

    vm. projectStats = projectStats;
  }

})();

teamDashboard.view.html

<div class="team-dashboard">
  <div class="container">
    {{teamDash.projectStats}}
  </div>
</div>

index.html

<!DOCTYPE html>
<html lang="en" data-ng-app="myapp">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/css-deps.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <base href="/">
</head>
<body>
  <div data-ui-view data-ng-controller="applicationController as app"></div>

  <script type="text/javascript" src="js/deps.min.js"></script>
  <script type="text/javascript" src="js/app.min.js"></script>
</body>
</html>

我正在使用 gulp 分别为 js 和 css 连接依赖项和我的逻辑。但是，这两个样式表都不会加载。

gulp文件.js

'use strict';

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    plumber = require('gulp-plumber'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    concat = require('gulp-concat'),
    ngAnnotate = require('gulp-ng-annotate'),
    sass = require('gulp-sass'),
    watch = require('gulp-watch'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload,
    express = require('express');


gulp.task('express', function() {
  // require('./bin/www');
  var app = require('./app');
  app.listen(4000);
});

gulp.task('js', function() {
  gulp.src(['./bower_components/jquery/dist/jquery.js',
    './bower_components/bootstrap/dist/js/bootstrap.js',
    './bower_components/angular/angular.js',
    './bower_components/angular-ui-router/release/angular-ui-router.js',
    './bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
    './bower_components/lodash/lodash.js',
    './bower_components/ev-emitter/ev-emitter.js',
    './bower_components/get-size/get-size.js',
    './bower_components/unipointer/unipointer.js',
    './bower_components/unidragger/unidragger.js',
    './bower_components/draggabilly/draggabilly.js'])
    .pipe(sourcemaps.init())
    .pipe(concat('deps.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/js'));

  gulp.src('app_client/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/js'))
    .pipe(reload({stream: true}));

});

gulp.task('css-deps', function() {
  gulp.src([
        "./bower_components/bootstrap/dist/css/bootstrap.min.css",
        "./bower_components/font-awesome/css/font-awesome.min.css"
    ])
    .pipe(concat('css-deps.css'))
    .pipe(gulp.dest('./public/css'));

  gulp.src("./bower_components/bootstrap/dist/css/bootstrap.min.css.map")
    .pipe(gulp.dest('./public/css'));

  gulp.src('./bower_components/font-awesome/fonts/*')
    .pipe(gulp.dest('./public/fonts'));
});

gulp.task('css', function() {
  gulp.src(['./app_client/sass/*.sass', './app_client/sass/**/*.sass', './app_client/sass/!partials'])
    .pipe(plumber())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest('./public/css'))
    .pipe(reload({stream: true}));
});

gulp.task('html', function() {
  gulp.src('./app_client/**/*.html')
    .pipe(gulp.dest('./public/js/views'))
    .pipe(reload({stream: true}));

  gulp.src('./public/index.html')
    .pipe(reload({stream: true}));
});

gulp.task('browser-sync', function() {
  browserSync({
    proxy: 'http://localhost:4000',
    open: false
  });
});

gulp.task('watch', function() {
  gulp.watch('./app_client/**/*.js', ['js']);
  gulp.watch('./app_client/sass/**/*.sass', ['css']);
  gulp.watch(['./app_client/**/*.html', './public/index.html'], ['html']);
});

gulp.task('default', ['express', 'js', 'css-deps', 'css', 'html', 'browser-sync', 'watch']);

app.js 快速服务器

require('dotenv').load();
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var passport = require('passport');
var database = require('./app_db/models/index');
require('./app_db/config/passport');

var routes = require('./public/routes/index');
var routesAPI = require('./app_db/routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'public'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(passport.initialize());
app.use(express.static(path.join(__dirname, 'public')));


app.use('/api', routesAPI);
app.use(function(req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// error handlers...

module.exports = app;

版本: Node 4.4.0，npm 2.14.20， express 4.13.1， Angular 1.5.2，

我使用的是 OS X 10.11

任何帮助都会很棒

最佳答案

尝试从 gulp 文件中删除“use strict”(它定义了严格模式)并运行 gulp 任务。

关于javascript - CSS 无法正确加载带有参数的 $stateProvider 状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36705667/

27 4 0
文章推荐： php - HTML 中的复选框不起作用。单击复选框时没有任何反应。如何让它发挥作用？
文章推荐： swift - 协议(protocol)字典 Swift 4
文章推荐： css - 媒体查询在我前进时不起作用
文章推荐： javascript - Ruby on Rails 实现 Ajax 帖子和评论
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com