Question

因此，在MEAN上阅读之后，我决定制作我的第一个MEAN应用程序，这个应用程序非常小，除了路由使我的应用程序成为一个单页应用程序之外似乎都有效。任何帮助将不胜感激！

 app.config(function($routeProvider){
   $routeProvider
     .when('/', {
       templateUrl: 'main.html',
       controller: 'mainController'
     })
     .when('/login', {
       templateUrl: 'login.html',
       controller: 'authController'
     })
     .when('/register', {
       templateUrl: 'register.html',
       controller: 'authController'
     });
 });

无论如何，我采用了样板导航栏

       <nav class="navbar-fluid navbar-default navbar-fixed-top">
         <div class="container">
           <a class="navbar-brand" href="#">IoT</a>
           <p class="navbar-text">IoT</p>
           <p class="navbar-right navbar-text" ng-hide="authenticated"><a href="#/login">Login</a> or <a href="#/register">Register</a></p>
           <p class="navbar-right navbar-text" ng-show="authenticated"><a href="#" ng-click="signout()">Logout</a></p>
           <p class="navbar-right navbar-text" ng-show="authenticated">Signed in as {{current_user}}</p>
         </div>
       </nav>

而且，当我在localhost：3000上运行时，我得到的主页地址是

 http://localhost:3000/#!/

我期待的地方

 http://localhost:3000/#/

当我点击＆＃39;注册＆＃39;链接，我得到的地址是

 http://localhost:3000/#!/#%2Fregister

我期待的地方

 http://localhost:3000/#/register

这是正常的吗？也许它是我使用的Angular版本的bcs？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-resource.min.js"></script>

以前一切都很好，但后来我删除了HTML并使主页逐个拉出单个HTML页面然后发生了这种情况。

Answer 1

将您的链接从<a href="#/login">更改为<a href="#!/login">，<a href="#">更改为<a href="#!">等。

我也遇到过这个问题，但是从哈希变为hashbang可以解决这个问题。

Answer 2

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

    $routeProvider
        .when('/', {
            templateUrl: 'login.html',
            controller: 'loginController'
        })
        .otherwise('/');
}]);

可以查看https://docs.angularjs.org/api/ng/provider/ $ locationProvider

Answer 3

试试这个。我不确定这会解决你的问题。但请试试这个。

通过包含默认参数来更改路由提供程序。

app.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'main.html',
                controller: 'mainController'
            })
            .when('/login', {
                templateUrl: 'login.html',
                controller: 'authController'
            })
            .when('/register', {
                templateUrl: 'register.html',
                controller: 'authController'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

并提供<a href="#/login">Login</a>

等链接

Answer 4

试试这个：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
       templateUrl: 'main.html',
       controller: 'mainController'
     })
     .when('/login', {
       templateUrl: 'login.html',
       controller: 'authController'
     })
     .when('/register', {
       templateUrl: 'register.html',
       controller: 'authController'
     })
     .otherwise({
       redirectTo: '/'
     });
});

对于注销，您应该使用如下：

<p class="navbar-right navbar-text" ng-show="authenticated"><a href="#/" ng-click="signout()">Logout</a></p>

Angular Routing ngRoute无法提取其他HTML文件

4 个答案: