Використовуючи angular-ui-router, як я можу використати інакший метод на $ stateProvider або як я можу його взагалі використовувати?
Використовуючи angular-ui-router, як я можу використати інакший метод на $ stateProvider або як я можу його взагалі використовувати?
Відповіді:
Ви не можете використовувати лише $stateProvider
.
Вам потрібно ввести $urlRouterProvider
і створити код, подібний до:
$urlRouterProvider.otherwise('/otherwise');
/otherwise
URL повинен бути визначений на стан , як зазвичай:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
Дивіться це посилання, де пояснюється ksperling
$stateProvider
. Це менше роботи, якщо ви просто хочете відобразити шаблон, але не перенаправляти. Я віддаю перевагу відповіді @ juan-hernandez.
otherwise
(у цьому випадку '/otherwise'
), має відповідати назві стану (перший параметр до .state
) або значенню url
параметра?
Ви можете за $stateProvider
допомогою catch весь синтаксис ( "*path"
). Вам просто потрібно додати конфігурацію стану внизу списку, як показано нижче:
$stateProvider.state("otherwise", {
url: "*path",
templateUrl: "views/error-not-found.html"
});
Усі варіанти пояснюються на https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters .
Приємна річ цього варіанту, на відміну від $urlRouterProvider.otherwise(...)
, полягає в тому, що вас не змушують змінювати місце розташування.
you're not forced to a location change
?
/this/does/not/exist
, URL-адреса залишатиметься такою в адресному рядку. Інше рішення приведе вас до/otherwise
Ви також можете вручну вводити $ state у функцію "else", яку потім можна перейти до стану, що не є url. У цьому полягає перевага браузера, що не змінює адресну панель, що корисно для повернення на попередню сторінку.
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get('$state');
$state.go('defaultLayout.error', {
title: "Page not found",
message: 'Could not find a state associated with url "'+$location.$$url+'"'
});
});
Гаразд, дурний момент, коли ти розумієш, що на запитання, яке ти задав, вже дано відповідь у перших рядках зразка коду! Просто подивіться на зразок коду.
angular.module('sample', ['ui.compat'])
.config(
[ '$stateProvider', '$routeProvider', '$urlRouterProvider',
function ($stateProvider, $routeProvider, $urlRouterProvider) {
$urlRouterProvider
.when('/c?id', '/contacts/:id')
.otherwise('/'); // <-- This is what I was looking for !
....
Я просто хочу підказати чудові відповіді, які вже надані. Остання версія @uirouter/angularjs
позначила клас UrlRouterProvider
як застарілий. Зараз вони рекомендують використовувати UrlService
замість цього. Ви можете досягти того ж результату за допомогою наступної модифікації:
$urlService.rules.otherwise('/defaultState');
Додаткові методи: https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html
У обслуговувати відповідь посилання angular-route
запитує про ui-router
. Прийнята відповідь використовує "монолітний" $routeProvider
, який вимагає ngRoute
модуль (тоді ui-router
як ui.router
модуль потрібен )
Відповідь із найвищим рейтингом використовує $stateProvider
замість цього і каже щось на зразок .state("otherwise", { url : '/otherwise'... })
, але я не можу знайти жодної згадки про "інакше" в документації, на яку він посилається . Однак я бачу, що про $stateProvider
це йдеться у цій відповіді, де сказано:
Ви не можете використовувати лише
$stateProvider
. Вам потрібно зробити ін’єкцію$urlRouterProvider
Ось тут моя відповідь може вам допомогти. Для мене було достатньо використовувати $urlRouterProvider
саме так:
my_module
.config([
, '$urlRouterProvider'
, function(
, $urlRouterProvider){
//When the url is empty; i.e. what I consider to be "the default"
//Then send the user to whatever state is served at the URL '/starting'
//(It could say '/default' or any other path you want)
$urlRouterProvider
.when('', '/starting');
//...
}]);
Моя пропозиція узгоджується з ui-router
документацією ( ця конкретна редакція ), де вона включає подібне використання. when(...)
метод (перший виклик функції):
app.config(function($urlRouterProvider){
// when there is an empty route, redirect to /index
$urlRouterProvider.when('', '/index');
// You can also use regex for the match parameter
$urlRouterProvider.when(/aspx/i, '/index');
})
$stateProvider.otherwise
, тому це допоможе мені)