简体   繁体   English

路由时AngularJS给出'无法获取/ page'

[英]AngularJS gives 'Cannot get /page' when routing

I'm trying to use angular-route to perform routing on my angularJS app. 我正在尝试使用angular-route在我的angularJS应用上执行路由。 However, when I try to load /sales in the browser nothing appears (I tried with '#' and I get the same result). 但是,当我尝试在浏览器中加载/ sales时,没有任何显示(我尝试使用“#”,但得到的结果相同)。 Here's my main.js file: 这是我的main.js文件:

'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);
}]);

Here's my index.html 这是我的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>

I'm using angular 1.6.1. 我正在使用角度1.6.1。 Can anyone tell me what I'm doing wrong? 谁能告诉我我在做什么错?

Angular 1.6.1 default hashPrefix is now ! Angular 1.6.1默认的hashPrefix现在是! as stated in the docs and the changelog 如文档和变更日志中所述

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

This should work. 这应该工作。

Try 尝试

$locationProvider.html5Mode(false);

And visit http://yourapp.com/#/page instead of http://yourapp.com/page 然后访问http://yourapp.com/#/page而不是http://yourapp.com/page

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM