web-dev-qa-db-ja.com

AngularアプリがCSSとJSをページの更新でロードしていませんか？

AngularJSを使用するアプリがあります。ここにそのリンクがあります- Angular App ナビゲーションバーのすべてのリンクはデフォルトを使用していますangular router。すべてのページは私がそれらを更新すると正常に動作しますが、ページlike 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>
javascriptcssangularjsngroute
13
doctorsherlock

皆さんの助けに感謝します、私は別の質問で実際の問題を見つけました。 <base href="/">の先頭にある他のリンクの上にindex.html。これが正しい答えへの link です。だから今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>
10
doctorsherlock

Html5履歴モードを使用しているため、cssファイルとjsファイルを読み込めません。あなたはCSSとJSファイルをロードできるようにindex.htmlを提供するためにURLリライターを使用する必要があり、ハッシュなしでURLを持つことができます。

注：-

ページを更新しない限り、それに気付くことはありません。あなたが更新ボタンを押してCSSとJSなしで静的HTMLページを提供するまで、すべてが機能します

html-historyモードを使用するとどうなりますか？

あなたはリクエストを出し、angularがそのリクエストに反応する前に、サーバーがexample.htmlファイルを見つけてそれを提供し、そのファイルに含まれているcssまたはjsファイルがありません。すべてのtheeファイルは、index.html以降を提供し続けることをサーバーに通知する必要がありますangularは、ng-viewに表示され、すべてのcssを持つ、要求されたページにリダイレクトしますおよびjsファイル。

サーバー側（Source Angularのドキュメント）

このモードを使用するには、サーバー側でURLを書き換える必要があります。基本的に、アプリケーションのエントリポイント（index.htmlなど）へのすべてのリンクを書き換える必要があります。 AngularでアプリケーションのベースとなるURLの部分とアプリケーションで処理する必要のあるパスを区別できるので、この場合もタグが必要です。

0
Jorawar Singh