Angular Routing ngRoute не может получить другие мои файлы HTML

Итак, почитав здесь и там о 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>

И когда я запускаю его на локальном хосте: 3000, вместо этого я получаю адрес домашней страницы:

 http://localhost:3000/#!/

где я ожидал

 http://localhost:3000/#/

И когда я нажал на ссылку «зарегистрироваться», я получил адрес

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

где, как я ожидал

 http://localhost:3000/#/register

Это нормально? Может быть, это версия Angular, которую я использовал?

<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-страницы одну за другой, тогда это и произошло.


javascript angularjs ngroute
person blueblood    schedule 14.12.2016    source источник
comment
Вы пытались отлаживать приложение. Если да, то что он показывает?   -  person Gangadhar JANNU    schedule 14.12.2016
comment
Самс ответ правильный . Это серьезное изменение в Angular 1.6.   -  person deostroll    schedule 14.12.2016
comment
@GangadharJannu теперь работает :)   -  person blueblood    schedule 14.12.2016
comment
@deostroll, можешь объяснить это, пожалуйста? чтобы я мог избежать этого в будущем.   -  person blueblood    schedule 14.12.2016

Ответы (4)


arrow_upward
1
arrow_downward

Измените ссылки с <a href="#/login"> на <a href="#!/login">, с <a href="#"> на <a href="#!"> и т. д.

У меня также есть эта проблема, но переход от хэша к хэшбангу решает ее для меня.

person ZombieTfk    schedule 14.12.2016
comment
Можете ли вы объяснить, почему? Странно, что вы должны добавить! чтобы это работало. - person blueblood; 14.12.2016
comment
Возможно, это сможет дать лучший ответ чем я о том, почему. Это новое поведение по умолчанию (хотя я не могу найти документацию, подтверждающую это). Angular, похоже, поощряет использование дружественных к SEO ссылок в SPA. - person ZombieTfk; 14.12.2016
comment
См. также здесь - person ZombieTfk; 14.12.2016
comment
спасибо за ссылки, знаете ли вы, повлияет ли изменение hashbang на внутреннюю маршрутизацию, которую я написал до сих пор в Express? - person blueblood; 14.12.2016
comment
У меня нет большого опыта работы с Express, но все должно быть в порядке, если вы используете только ngRoute для загрузки шаблонов/контроллеров на одной странице. Если вы запускаете экспресс-обратные вызовы на основе того, какие шаблоны извлекаются, это может быть немного более серьезной проблемой. - person ZombieTfk; 14.12.2016

arrow_upward
0
arrow_downward

Попробуй это. Я не уверен, что это решит вашу проблему. Но, пожалуйста, попробуйте этот.

Измените поставщика маршрутов, включив параметр по умолчанию.

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>

person Nitheesh    schedule 14.12.2016
comment
Спасибо за помощь, но решение, которое опубликовал Сэм Джадж, работает! - person blueblood; 14.12.2016
comment
Я не знаю, почему это! символ используется в URL-адресе href. Я надеюсь, что лучший метод для использования - это URL-адрес по умолчанию в поставщике угловых маршрутов. - person Nitheesh; 14.12.2016
comment
@Nitheesh: (из комментариев) Кажется, это новое в Angular 1.6. - person Mistalis; 14.12.2016
comment
Ой. Ok. Я еще не прошел через это. Спасибо @Mistalis - person Nitheesh; 14.12.2016

arrow_upward
0
arrow_downward

Попробуй это:

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>
person Peeyush Kumar    schedule 14.12.2016
comment
Спасибо за помощь, но решение, которое опубликовал Сэм Джадж, работает! - person blueblood; 14.12.2016

arrow_upward
0
arrow_downward 

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

person Troajan    schedule 14.12.2016