2017-02-05 12 views
0

私はangularJSアプリケーションでルーティングを実行するためにangle-routeを使用しようとしています。しかし、ブラウザでロード/セールをしようとすると、何も表示されません(私は '#'で試してみて、同じ結果を得ます)。ここに私のmain.jsファイルの:AngularJSはルーティング時に 'Can not get/page'を返します

'use strict'; 

/** 
* @name Main module 
* @description 
*/ 
var app = angular.module('app', ['ngResource', 'ngRoute']); 

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){ 
    $routeProvider.when('/sales', { 
    controller : 'SalesCtrl', 
    templateUrl : '/views/sales.html' 
    }); 

    $locationProvider.html5Mode(true); 
}]); 

は、ここで私は、角1.6.1を使用しています私のindex.htmlを

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>webapp</title> 

    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
    <!-- Place favicon.ico in the root directory --> 

    <!-- build:css styles/vendor.css --> 
    <!-- bower:css --> 
    <!-- endbower --> 
    <!-- endbuild --> 

    <!-- build:css styles/main.css --> 
    <link rel="stylesheet" href="styles/main.css"> 
    <!-- endbuild --> 

    <!-- build:js scripts/vendor/modernizr.js --> 
    <script src="/bower_components/modernizr/modernizr.js"></script> 
    <!-- endbuild --> 
    </head> 
    <body> 
    <!--[if IE]> 
     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
    <script> 
     (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= 
     function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; 
     e=o.createElement(i);r=o.getElementsByTagName(i)[0]; 
     e.src='https://www.google-analytics.com/analytics.js'; 
     r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); 
     ga('create','UA-XXXXX-X');ga('send','pageview'); 
    </script> 

    <!-- build:js scripts/vendor.js --> 
    <!-- bower:js --> 
    <script src="/bower_components/jquery/dist/jquery.js"></script> 
    <script src="/bower_components/modernizr/modernizr.js"></script> 
    <script src="/bower_components/angular/angular.js"></script> 
    <script src="/bower_components/angular-resource/angular-resource.js"></script> 
    <script src="/bower_components/angular-route/angular-route.js"></script> 
    <!-- endbower --> 
    <!-- endbuild --> 

    <!-- build:js scripts/main.js --> 
    <script src="scripts/main.js"></script> 
    <script src="scripts/services/sales.js"></script> 
    <script src="scripts/services/appconfig.js"></script> 
    <script src="scripts/controllers/sales.js"></script> 
    <!-- endbuild --> 

    <div ng-app="app"> 
     <div ng-view></div> 
    </div> 
    </body> 
</html> 

です。 誰かが私が間違っていることを教えてもらえますか?

+0

どのコンソールエラー?ある場合はログを提供してください – Anirudha

+1

$ locationProvider.html5Mode(false)を使用してください。 trueを設定した場合、#からURLが削除され、#接頭辞なしでは角度ルーティングは機能しません。 – shiva

+0

@Anirudhaコンソールにエラーがあります。 –

答えて

1

角度1.6.1デフォルトhashPrefixの代わりにhttp://yourapp.com/#/pageを訪問します!ドキュメントに記載されているとおりです。changelog

$locationProvider.html5Mode(false);$locationProvider.hashPrefix(''); 

これは動作するはずです。

+0

驚くばかり!私はまだ彼らがデフォルトの動作を変更したことに気付かなかった。あなたの答えでは、デフォルトの 'hashPrefix'がドキュメントと[changelog](https://github.com/angular/angular.js/blob/master/CHANGELOG)に記載されているように'! 'になっていることを指摘するかもしれません。 md#new-features-1) –

+0

確かに私はそれをします、ありがとう@TamasHegedus – shiva

-1

は今ある

$locationProvider.html5Mode(false); 

を試してみて、 http://yourapp.com/page

+0

私はhtml5Modeを 'false'に設定してurlを変更すると同じ結果になります。 –