Как настроить routeProvider и locationProvider в angularJS?

Я хочу активный html5Mode в angularJS, но я не знаю, почему он не работает. Что-то не так с моим кодом?

angular
    .module('myApp',[])
    .config(function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.when('/', {
           templateUrl: 'partials/home.html', 
           controller: HomeCtrl
        });

        $routeProvider.when('/tags/:tagId', {
            templateUrl: 'partials/result.html', 
            controller: TagResultCtrl
        });
        //$routeProvider.otherwise({redirectTo: '/home', controller: HomeCtrl});
     });

в html

  <a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a>

Ответы

Ответ 1

Единственная проблема, которую я вижу, - относительные ссылки и шаблоны, которые не загружаются должным образом из-за этого.

из документов, касающихся режима HTML5

Относительные ссылки

Обязательно проверьте все относительные ссылки, изображения, скрипты и т.д. Вы должны указать базу url в заголовке основного файла html (<base href="/my-base">), или вы должны использовать абсолютные URL-адреса (начиная с /) везде потому что относительные URL-адреса будут разрешены к абсолютным URL-адресам, используя исходный абсолютный URL-адрес документа, который часто отличается от корня приложения.

В вашем случае вы можете добавить косую черту / в атрибутах href ($location.path делает это автоматически), а также templateUrl при настройке маршрутов. Это позволяет избежать таких маршрутов, как example.com/tags/another и правильно загружает шаблоны.

Вот пример, который работает:

<div>
    <a href="/">Home</a> | 
    <a href="/another">another</a> | 
    <a href="/tags/1">tags/1</a>
</div>
<div ng-view></div>

и

app.config(function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/', {
      templateUrl: '/partials/template1.html', 
      controller: 'ctrl1'
    })
    .when('/tags/:tagId', {
      templateUrl: '/partials/template2.html', 
      controller:  'ctrl2'
    })
    .when('/another', {
      templateUrl: '/partials/template1.html', 
      controller:  'ctrl1'
    })
    .otherwise({ redirectTo: '/' });
});

Если вы используете Chrome, вам нужно будет запустить его с сервера.

Ответ 2

AngularJS обеспечивает простой и сжатый способ связывания маршрутов с контроллерами и шаблонами с помощью объекта $routeProvider. Недавно обновив приложение до последней версии (1.2 RC1 в текущее время), я понял, что $routeProvider больше не доступен в стандартном angular.js script.

Прочитав журнал изменений, я понял, что маршрутизация теперь представляет собой отдельный модуль (как мне кажется, большой ход), а также анимацию и некоторые другие. В результате стандартные определения модулей и код конфигурации, такие как следующие, будут работать больше, если вы перейдете к версии 1.2 (или будущего):

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

app.config(function ($routeProvider) {

    $routeProvider.when('/', {
        controller: 'customersController',
        templateUrl: '/app/views/customers.html'
    });

});

Как вы его исправите?

Просто добавьте angular -route.js в дополнение к angular.js на свою страницу (возьмите версию angular -route.js здесь - имейте в виду ее в настоящее время  версию кандидата-релиза, которая будет обновлена) и изменить определение модуля выглядит следующим образом:

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

Если вы используете анимации, вам понадобится angular -animation.js, а также нужно ссылаться на соответствующий модуль:

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

Ваш код может быть следующим:

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

    app.config(function($routeProvider) {

    $routeProvider
        .when('/controllerone', {
                controller: 'friendDetails',
                templateUrl: 'controller3.html'

            }, {
                controller: 'friendsName',
                templateUrl: 'controller3.html'

            }

    )
        .when('/controllerTwo', {
            controller: 'simpleControoller',
            templateUrl: 'views.html'
        })
        .when('/controllerThree', {
            controller: 'simpleControoller',
            templateUrl: 'view2.html'
        })
        .otherwise({
            redirectTo: '/'
        });

});

Ответ 3

Попробуйте

Если вы развертываете свое приложение в корневом контексте (например, https://myapp.com/), установите базовый URL-адрес в /:

<head>
  <base href="/">
  ...
</head>

Angular Документация

Ответ 4

Ниже приведено описание того, как можно настроить $locationProvider, используя флаг requireBase=false, чтобы избежать установки базы href <head><base href="/"></head>:

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

app.config(function($locationProvider){
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    }) 
});

Ответ 5

вы можете попробовать:

<a href="#/controllerone">Controller One</a>||
<a href="#/controllerTwo">Controller Two</a>||
<a href="#/controllerThree">Controller Three</a>

<div>
    <div ng-view=""></div>
</div>

Ответ 6

@Simple-решения

Я использую простой HTTP-сервер Python. Когда в каталоге рассматриваемого приложения Angular (используя MBP с Mavericks 10.9 и Python 2.x), я просто запускаю

python -m SimpleHTTPServer 8080

И это устанавливает простой сервер на порту 8080, позволяя вам посетить localhost:8080 в вашем браузере, чтобы просмотреть приложение в разработке.

Надеюсь, что это помогло!