web-dev-qa-db-ja.com

anglejs ng-routeからハッシュ＃を削除する方法

LocationProviderを使用してangular jsのURLルートからハッシュタグを削除しようとしていますが、エラーが発生します。

app.js

var eclassApp = angular.module('eclassApp', 
    ['ngRoute', 'eclassControllers', ]
);

eclassApp.config(['$routeProvider','$locationProvider',
    function ($routeProvider, $locationProvider){
        $routeProvider.
            when('/',{
                templateUrl: '/html/student-list.html',
                controller: 'StudentsListCtrl',
            }).
            when('/students/:studentId',{
                templateUrl: '/html/student-details.html',
                controller: 'StudentDetailsCtrl',

            }).otherwise({
                redirectTo: '/students'
            });
            $locationProvider.htmlMode(true);
    }]
);

エラー：

 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=eclassApp&p1=TypeE…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.13%2Fangular.min.js%3A17%3A1)

何か不足していますか？

編集：このようなオプションオブジェクトを使用してhtml5Mode関数を呼び出す

$locationProvider.html5Mode({
    enabled:true
})

私は次のエラーを取得します（angular fullに変更して、縮小版の代わりにエラーのより良い説明を取得します）

Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present!

http://errors.angularjs.org/1.3.13/$location/nobase

javascriptangularjsangular-routing
14
Apostolos

次のように$ locationProviderを使用できます-

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

または、index.htmlでベースタグを使用できます（これがランディングページだと思います）

<head>
  <base href="/">
</head>

ベースタグを削除すると、古いIEでいくつかの副作用が発生する場合がありますIE IE9

44
Rabi

URLから＃を取り除く手順：

  1. 注入$ locationProvider config（）関数のangularルートモジュールで、html5Mode（）をtrueに設定

    angular.module( 'app', [ ] ).config(function( $locationProvider) {
   $locationProvider.html5Mode(true);
});

  2. アプリケーションの最初の読み込みページのヘッドセクションにbaseタグを含めます。

4
Giridhar Kumar

依存関係配列に余分なコンマがあります。あなたが持っているhtmlのheadセクションにベースタグを含めるだけでなく、カンマを削除することができ、ハッシュタグを削除するのに適しています

<base href="/">

依存関係配列：

var eclassApp = angular.module('eclassApp', ['ngRoute', 'eclassControllers'] );
1
V31

私はこれが1年前であることを知っていますが、今日まで、これに対する簡潔で完全な解決策をまだ見つけていません。ネット上のいくつかの回答のすべての断片であるため、ここで詳細に説明し、他の訪問者が1つの完全な回答を得ることができる場所になることを願っています。 *回答に追加しますが、これを行うには長すぎます。それでは、始めましょう。

まず、ngRouteまたはangular-ui-routerのいずれかをダウンロードする必要があります。後者を選択するのは、ngRouteにあるものがすべて含まれており、さらに多くの機能があるためです。それではなぜですか？

  1. あなたのCMDに行き、これを入力してください

    npm install --save angular-ui-router

  2. App.jsファイルに移動して、次のようなルートを記述します

    var app = angular.module('ngCribs', ['ui.bootstrap', 'ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    // Application routes
    $stateProvider
        .state('index', {
            url: '/',
            templateUrl: 'views/partials/home.html'
        })
        .state('listings', {
            url: '/listings',
            templateUrl: 'views/partials/listings-list.html'
        });

    // For unmatched routes
    $urlRouterProvider.otherwise('/');

    $locationProvider.html5Mode(true);

}]);

  3. 次のステップでは、<head>に移動してベースディレクトリを追加する必要があります

    <base href="/"> </base>

  4. ハッシュタグはもうないはずです[〜＃〜] but [〜＃〜]、/以外のページに移動してリロードすると、エラーが発生し、ページがロードされません。パスとベースディレクトリの処理方法をサーバーに指示する必要があります。したがって、このジレンマを解決するには、サーバーが必要であり、Expressを好みますが、他のサーバーを使用することもできます。 Expressをお勧めします。ある時点で、MEANスタックに関与して何を推測する必要があるのでしょうか。 Mongo以外では、すでにAngularとNodeを使用しているので、Expressをミックスに追加してみませんか？！もう一度CMDに移動して、これを行います。

    $ npm install express --save

  5. サーバーがインストールされたので、server.jsファイルを作成し、それをディレクトリのベースに配置し、その中に次を配置する必要があります。 *フォルダパスがディレクトリと一致することを確認してください。

    var express = require('express');
var server = express();

server.use(express.static(__dirname + '/'));
server.set('views', __dirname + 'views');
server.set('js', __dirname + 'js');
server.set('css', __dirname + 'css');

server.get('/', function(req, res){
    res.render('index.ejs');
});

server.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

//the port you want to use
var port = 3006;
server.listen(port, function(){
    console.log('server listening on port' + port)
});

  6. まだやっていない。ポート3006でサーバーを実行しようとすると、エラーが発生します。 CMDに戻り、これを入力します。

    npm install ejs --save

  7. これで完了です。サーバーを実行して、開いたままにしておくだけです。したがって、この時点から、CMDで行う必要があることは何でも、2番目のCMDウィンドウが必要になります。 （私は通常、その時点で4つ実行しています。1サーバー、BrowserSyncの2ガルプ、3モンゴDB、4途中で必要な依存関係をダウンロードします）。 CMDに移動してサーバーを実行し、邪魔にならないように最小化する

    node server.js

  8. これで、localhost:3006に自由に移動して、すでに設定されているライブサーバーにいるかのように移動できます。

1
LOTUSMS

この行を試してください：

$locationProvider.hashPrefix('!').html5Mode(true);

この行の前：

$routeProvider.

0
Luis Teijon

テスト済みAngular 1.6.1バージョン：

URLからハッシュタグ（＃）を削除するには、3つの手順が必要です。

ステップ1：Configを介してlocationProviderでhtml5modeを有効にします。サンプルコード：

app.config(function($locationProvider, $routeProvider){
            $locationProvider.html5Mode(true);
            $routeProvider.when('/', {templateUrl: 'partials/home.html'}).when('/info', {templateUrl: 'partials/info.html'});
        });

ステップ2：index.htmlのheadセクションにベースhref属性を提供します。これは、すべてのスクリプトおよびCSSタグの上に配置する必要があります。 href属性は、プロジェクトの相対パスを定義します。サンプルコード：base href="/demo/"。私のデモアプリケーションは、Apache Webサーバーのルートディレクトリにあります。アプリケーションがサブディレクトリの場合は、base href="/demo/sub-directory/"またはbase href="http://localhost/demo/sub-directory/"を使用します

ステップ3：このAngularJSアプリケーションをApacheサーバー（Wamp、Mampなど）で実行している場合：他のStackOverflow投稿から、url-rewriteモジュールを有効にする必要があります。 Apacheバージョン2.2以降では、FallbackResourceコマンドを使用してこれを実現できます。サンプルコード：Apacheサーバーのルートディレクトリに.htaccessファイルを作成します。以下のコマンドを追加して、サーバーを再起動します。角経路機能に起因する404エラーを処理する相対パスindex.htmlを提供します。これにより、ディープURLの更新/アクセスとすべての404エラーが解決されます。

FallbackResource /demo/sub-directory/index.html
0
Raj Malakpet

  • Step1：_$locationProvider_をangularルートモジュールのconfig() functionに挿入し、html5Mode()をtrueに設定、構文_angular 1.3_バージョンの変更です。

    _$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});
_

  • Step2：_web.config_に以下の設定を追加します

_<system.webServer>
  <rewrite>
    <rules>
      <clear />
      <rule name="AngularJS" enabled=true stopProcessing="true">
        <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_FILENAME}" pattern"^/(api)" negate="true" />
          </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
_
0
alpesh