使用AngularJS路由加载页面时出现问题

Stumped。我的代码没有问题（据我所知），并且当没有选择任何内容时，它会加载list-patents.htm模板，但是当单击相应的锚标记时无法加载add-patents模板。 URL显示如下：使用AngularJS路由加载页面时出现问题

http://localhost/#!/#list-patents

任何理由的内容不加载？这可能是URL中的#!？

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script> 
</head> 

<main ng-app="myApp" ng-controller="appCtrl"> 
    <div class="container"> 
     <nav> 
      <ul> 
       <li><a href="#list-patents">List patents</li> 
       <li><a href="#add-patent">Add patent</li> 
      </ul> 
     </nav> 
     <section class="ng-view"> 

     </section> 
    </div> 
</main>

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

app.controller('appCtrl', function($scope, $http, $rootScope) { 
    $scope.stages = [ 
     {'stage': 'green', 'cost': '$1, 500'}, 
     {'stage': 'yellow', 'cost': '$1, 800'}, 
     {'stage': 'red', 'cost': '$2, 100'}, 
     {'stage': 'blue', 'cost': '$2, 500'}, 
     {'stage': 'brown', 'cost': '$2, 900'} 
    ]; 
    $http.get('../scripts/patent-renewal.json').then(function(response) { 
     $scope.application = response.data.patents; 
    }); 

}); 

app.config(function($routeProvider){ 
    $routeProvider 
    .when('/', { 
     templateUrl: '../templates/list-patents.htm', 
     controller: 'appCtrl' 
    }) 
    .when('/add-patent', { 
     templateUrl:'../templates/add-patent.htm', 
     controller: 'appCtrl' 
    }) 
});

来源

2017-05-09 Patrick McDermott

的!#的确可能是问题，为什么它的加入不知道。

什么你可以尝试是切换到HTML5模式

$locationProvider.html5Mode(true);

然后您的href可以是直接的，没有#：

<li><a href="list-patents">List patents</li> 
<li><a href="add-patent">Add patent</li>

来源

2017-05-09 11:29:45

谢谢！它的工作原理，必须指定一个基本的URL，正如你所说的删除'＃'。仍然想知道为什么有一个问题.....反正，再次感谢 –

使用AngularJS路由加载页面时出现问题

回答

相关问题