使用AngularJS路由加载页面时的问题
使用AngularJS路由加载页面时的问题
提问于 2017-05-09 11:11:59
不知所措。我的代码没有问题(据我所见)，当没有选择任何内容时，它会加载list-patents.htm模板，但是当单击相应的锚标记时，它将无法加载add-patents模板。URL显示如下：
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'
})
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-09 11:29:45
!#可能确实是问题所在，为什么它没有添加任何概念。
您可以尝试切换到html5模式。
$locationProvider.html5Mode(true);然后您的href可以是直接的，而不需要#。
<li><a href="list-patents">List patents</li>
<li><a href="add-patent">Add patent</li>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43868281
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号