app.js

Question

我是Angular的新手，但这有点问题。

因此，如果我访问localhost：9000，我会看到index视图。如果我点击我的导航栏链接到/about链接，我将被带到http://localhost:9000/about，我会看到关于该视图。

但是，如果我在/about路线上刷新该页面。它打破并告诉我：Cannot GET /about如果我回到索引它再次开始工作。如果我刷新索引它就不会中断。

我设置$locationProvider.html5Mode(true);以及将<base href="/">添加到我的index.html文件的head。

以下是我文件中的相关信息。（我也使用Chrome）

app.js

    myApp = angular.module('myApp', ['ngRoute']);

    myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

        $routeProvider

        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'mainController'
        })

        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'aboutController'

        })

        $locationProvider.html5Mode(true);

    }]);

    myApp.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
        $log.info($location.path());

    }]);

    myApp.controller('aboutController', ['$scope', function($scope) {

    }]);

的index.html

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
  <head>
    <title>myapp</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
    <script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
    <script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>

    <script src="/scripts/app.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <base href="/">
  </head>
  <body>

      <!-- Removed non relevant bootstrap nav bar stuff -->
      <ul class="nav navbar-nav">
        <li><a href="/about">About</a></li>
      </ul>


      <div class="container">
        <div ng-view></div>
      </div>


 </body>

Answer 1

使用href =＆＃34;＃！/ about /＆＃34;在html中，因为它在angularjs.1.6中改变了href =＆＃34;＃/ about＆＃34;不适合它

使用以下HTML代码

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
  <head>
  <title>myapp</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
  <script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
  <script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>

  <script src="/scripts/app.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <base href="#!/">
  </head>
  <body>

  <!-- Removed non relevant bootstrap nav bar stuff -->
  <ul class="nav navbar-nav">
  <li><a href="#!/about">About</a></li>
  </ul>


  <div class="container">
  <div ng-view></div>
  </div>


 </body>

删除＃！从路线Angular 1.6。浏览器在刷新时中断

app.js

的index.html

1 个答案: