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

Question

Stumped. 难过 No issue with my code (as far as I can see), and it loads list-patents.htm template when nothing is selected, but fails to load add-patents template when the corresponding anchor tag is clicked. 我的代码没有问题（据我所知），并且在未选择任何内容的情况下加载了list-patents.htm模板，但是在单击相应的锚标记时无法加载add-patents模板。 URL displays as follows: URL显示如下：

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

Any reason why the content isn't loading? 为何无法加载内容？ Is it possibly the #! 可能是#! in the 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'
    })
});

Answer 1

The !# might indeed be the problem, why it's added no idea. !#确实可能是问题，为什么不加说明。

What you could try is to switch to html5 mode 您可以尝试切换到html5模式

  $locationProvider.html5Mode(true);

And then your href can be direct, without # : 然后您的href可以是直接的，没有# ：

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

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-05-09 11:29:45

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-05-09 11:29:45

解决方案1
2 已采纳 2017-05-09 11:29:45