Angularjs, как сделать ngRoute без хеширования

В моем приложении angularjs у меня есть index.html в общей папке с кодом ниже,

<body ng-controller="TheController">
    <div id="startdiv">
        <label>Username</label><input type="text" tabindex="1" placeholder="Enter Your User Name" name="email" required>
        <label>Password</label><input type="password" tabindex="2"  placeholder="Enter Your Password" name="password" required>
        <br><br>
        <button ng-click="saveData()">Login</button><button ng-click="saveData()">SignUp</button><br>   
        <button ng-click="changeview()">ClickMe</button>
    </div>  
</body>

И часть сценария, как показано ниже,

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

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

app.config(function($routeProvider) {
    $routeProvider
    .when("/test", {
        templateUrl : "index.html"
    })
    .when("/london", {
        templateUrl : "london.html",        
    });/*
    .otherwise({
            redirectTo: '/paris.html'
        }); */
});


app.controller('TheController', function ($scope,$location) {       
    console.log('hello')    
     $scope.changeview = function () {
        console.log('in functgion changeview')
        console.log($location)
        $location.path('/london');      
    }
});

Также у меня есть london.html в той же общедоступной папке, которую я хочу загрузить при нажатии кнопки.

мой london.html

<h1>London</h1>
<h3>London is the capital city of England.</h3>

Проблема в том, что при нажатии кнопки URL-адрес изменяется с "http://localhost:3000/" на " http://localhost:3000/#/london ", но страница html не загружается. Также я хочу знать, можно ли выполнить маршрутизацию с помощью символа решетки.

Пожалуйста, дайте мне знать, где я ошибаюсь. Спасибо.


angularjs ngroute angularjs-ng-route
person usersam    schedule 14.05.2018    source источник
comment
Отредактируйте вопрос, чтобы ограничить его конкретной проблемой с достаточной детализацией, чтобы найти адекватный ответ. Не задавайте сразу несколько разных вопросов.   -  person georgeawg    schedule 14.05.2018

Ответы (1)


arrow_upward
0
arrow_downward

Используйте это в app.module.js

$ locationProvider.html5Mode (true);

Пример:

window.routes = {
  '/': {
    templateUrl: 'app/visitor/visitor.html',
    anonymous: true
  },
  '/index': {
    templateUrl: 'app/visitor/visitor.html',
    caseInsensitiveMatch: true,
    anonymous: true
  },
  '/lu/:mt?/:tab?/:id?': {
    templateUrl: 'app/user/user.html',
    caseInsensitiveMatch: true,
    anonymous: false
  }
};

app.config(function ($routeProvider, $locationProvider) {
  for (var path in window.routes) {
    $routeProvider.when(path, window.routes[path]);
  }
  $routeProvider.otherwise({redirectTo: '/'});

  $locationProvider.html5Mode(true);
});

Также, как templateUrl: 'app/visitor/visitor.html', в примере, укажите полный путь к вашим файлам.

person Saeed    schedule 14.05.2018