Блог

Главная - Вопросы по программированию - Маршрутизация не работает в angularjs

Маршрутизация не работает в angularjs

#javascript #angularjs #url-routing

#javascript #angularjs #url-маршрутизация

Вопрос:

Я очень новичок в angular js. Я реализовал маршрутизацию в angular js, но она не перенаправляет меня на страницы, которые я указал в маршруте.js вот код: Route.js

 var sampleApp = angular.module('sampleApp', []);

sampleApp.config(['$routeProvider',
  function($routeProvider) {
$routeProvider.
  when('/getplaces', {
    templateUrl: 'getplaces.html',
    controller: 'ListCtrl',

  }).
  when('/getuncategorisedplaces', {
    templateUrl: 'list.html',
    controller: 'uncatCtrl'
  })
  .otherwise ({
redirectTo: '/getplaces'
  });

}]);

Controller.js

   function uncatCtrl($scope, $http) {
  $http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data) {
  $scope.places = data;
   console.log(data);
    }
    )}
// get places
  function ListCtrl($scope, $http) {
  $http.get('http://94.125.132.253:8000/getplaces').success(function (data) {

   $scope.places = data;
  console.log("Successful")
 console.log(data);
  }
  )}

HTML-код включает в себя ng view и href, такие как href=»#getplaces»

 <body ng-app="sampleApp" >
<div class="container">
    <div class="row">
    <div class="col-md-3">
       <ul class="nav">
            <li> <a class= "linha" href="#getplaces"> Get places </a></li>
            <li><a class= "linha" href="post.html"> Post a movie </a></li>
                            <li><a class= "linha" href="#getuncategorisedplaces">List of uncategorised places  </a></li>
        </ul>
    </div>
    <div class="col-md-9">
        <div ng-view></div>

    </div>

    </div>

Ответ №1:

Убедитесь, что у вас включены оба скрипта (angular и ngroute)

 <script src='angular.js'>
<script src='angular-route.js'>

Затем убедитесь, что вы включили этот модуль в свое приложение:

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

Начиная с версии Angular 1.2.0, angular-route представляет собой отдельный модуль

обратитесь к документации angular:

https://docs.angularjs.org/api/ngRoute

Комментарии:

1. Я добавил его, и он не работает. к файлу, который я использую, можно получить доступ по адресу » creative.coventry.ac.uk /~4078078/Test codes/index.html #/… »

2. проверьте hrefs. Измените их на «/ getplaces» и «/ getuncategorisedplaces».

3. Я получаю сообщение об ошибке NOT FOUND, когда я меняю их на /getplaces из #getplaces

4. Попробуйте, если это работает на вашем локальном компьютере. если это так, необходимо установить документ по умолчанию для сервера и т. Д.

Ответ №2:

Вот пример кода, который я написал некоторое время назад.

 var app = angular.module('test', ['ngRoute','ngGrid','ngBootstrap', 'http-auth-interceptor','ui.bootstrap','ngCookies','ngSanitize']).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/sign-in', {templateUrl: 'partials/login/signin.html', controller: LoginCtrl}).
        when('/admin/sign-in', {templateUrl: 'partials/login/userManagementSignin.html', controller: LoginCtrl}).
        otherwise({redirectTo: '/dashboard'});
}]);