I am trying to enter a ui-router parent or child state simply by navigating to its associated URL. I know that ui-sref is a proven, simple way to enter into a state via an a link, but just typing the URL of a state into a browser seems to always redirect me to my $urlRouterProvider.otherwise() statement.
For example, I would like to be able to navigate into the page state, via going to example.com/#/page in the browser. Instead, I am redirected to the otherwise.
JS
angular.module('app', [ 'ui.router', 'subapp']);
angular.module('app').config(function($urlRouterProvider, $locationProvider) {
}).controller('appCtrl', function(){});
angular.module('subapp', ['ui.router']);
angular.module('subapp').config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('#/page/nothing', '/');
$stateProvider
.state('page', {
url: '#/page',
templateUrl: 'page.tpl.html'
})
.state('page.edit', {
url: '/:myparameter',
templateUrl: 'page-edit.tpl.html'
});
$urlRouterProvider.otherwise('/hello');
});
Index.html
<body ng-controller="appCtrl">
This is the index.html file<br>
Go to page state<br>
Go to page child state with a parameter
<ui-view></ui-view>
PLNKR: http://plnkr.co/edit/HQziTB2CyJrCvbgzzuJm?p=preview
ote I have a subapp service which is injected into the main app—but I don't think that would make a difference, as page state should still be a 'top-level' state injected into the index.html <ui-view>
How can I make it so that I can navigate to a URL (even one with a parameter) directly? The documentation says its possible, but I can't seem to get it to work.
I would say, that you are almost there. There is an updated plunker. But while your links could (should) be with # (we are not using html5Mode)
<a href="#/page">
<a href="#/page/myparameter">
<a href="#/page/11">
The state definition should not contain that sign:
.state('page', {
// instead of this
// url: '#/page',
// we need this
url: '/page',
...
.state('page.edit', {
// instead of this
// url: '#/:page',
// we need this
url: '/:page',
And then also these will work:
<a ui-sref="page">
<a ui-sref="page.edit({page:123})">
<a ui-sref="page.edit({page:444})">
Check it here
Your parameter URL is wrong, you cannot map URL with a fixed name and other url with a parameter cause will cause a crazy rewrite thinking this is a variable
$stateProvider
.state('page', {
url: '#/page',
templateUrl: 'page.tpl.html'
}
).state('page.edit', {
url: '/:myparameter',
templateUrl: 'page-edit.tpl.html'
});
Use URL by this way:
$stateProvider
.state('page', {
url: '/page',
templateUrl: 'page.tpl.html'
}
).state('page.edit', {
url: '/page/:myparameter',
templateUrl: 'page-edit.tpl.html'
});
Related
Pretty new to Angular, I am sure I'm missing something obvious here. I am using ui-router.
I want to provide a link to my clients so that they can click the URL link and visit the web app with the appropriate partial. I also want to be able to pass in parameters. Here's how I approached this (kind of hokey). This is in my main controller:
var pNumber = $location.search().number;
if (!(pNumber == null || pNumber == "")){
$state.go('view-ticket');
}
Here is my app.js:
$stateProvider
.state('home', {
url: "/",
templateUrl: 'partials/welcome-screen.html',
controller: 'mainPageController'
})
.state('submit-ticket', {
url: "/submit-ticket",
templateUrl: 'partials/ticket-submit.html',
controller: 'TicketSystemTestCtrl'
})
.state('view-ticket', {
url: "/view",
templateUrl: "partials/ticket-central.html",
controller: 'TicketCentralCtrl'
})
The logic is this: If the URL contains a param 'number' inject ticket-central.html partial.
However, when I run this in the debugger, it seems the first part of the code got executed before it loads the welcome-screen.html partial. How to solve this?
EDIT: I am trying to type this into the URL: http://localhost/techsupport/view and I want it to load the ticket-central.html partial into the main view. However, it won't work.
if i understand correctly all you want to do is to provide a possibility to 'deep-link' to the 'view-ticket' state.
for this search params are not the ideal solution as they are optional, just use path variables:
.state('view-ticket', {
url: '/view/:ticketNumber,
template: 'partials/ticket-central.html',
controler: 'TicketCentralCtrl'
})
also don't use the $location service if you don't really have to, have a look at $stateParams
here is a small plunkr with a welcome and a ticket state
launch the preview in a separate window to see how the url changes - you can also refresh on each page and the correct state will be loaded
https://plnkr.co/edit/r3UcYbfwET0OVwkd77Rv
I created this small app where I have following states:
restricted.route.js
$stateProvider.state('restricted', {
url: '/restricted',
templateUrl: 'app/restricted/restricted.html',
abstract: true
});
pages.route.js
$stateProvider.state('restricted.pages', {
url: '/pages',
templateUrl: 'app/restricted/pages/pages.html',
controller: 'pagesController',
controllerAs: 'vmPages'
});
detail.route.js
$stateProvider.state('restricted.pages.detail', {
url: '/:id',
controller: 'pageDetailController',
controllerAs: 'vmDetail',
templateUrl: 'app/restricted/pages/detail/detail.html'
});
app.run.js
$urlRouterProvider.otherwise('/restricted/dashboard');
When I load the URL #/restricted/pages everything works fine. Controller is loaded and view is shown.
When I load the URL #/restricted/pages/1 the controller and view from the state 'restricted.pages' is loaded and executed.
The state is clearly recognized, because the $urlRouterProvider.otherwise is not executed.
Does anyone have an idea what I'm doing wrong here?
Thanks!
Is it intentional to have the details as a substate of the pages (list?) state? If so, you need to place an <div ui-view></div> into the template named app/restricted/pages/pages.html.
If that was not your intention, I recommend to rename the detail state to something like restricted.pages_detail as every dot introduces a nested level in the state definitions.
I think your issue lies in the HTML, the nested state should be loaded in a ui-view tag on the parent element.
I have an application based on Angular with the UI-Router. I'm trying to get the following URL structure
/base/category
/base/category/id
while serving different templates for each route.
I've been searching around a lot but couldn't find anything that helps me.
My code:
$stateProvider
.state('app', {
url: '',
templateUrl: 'views/app.html',
abstract: true
})
.state('base', {
url: '/base',
template: '<div ui-view></div>',
abstract: true,
parent: 'app'
})
.state('base.cat', {
url: '/:catId',
templateUrl: 'views/cat_view.html'
})
.state('base.cat.id', {
url: '/:id',
templateUrl: 'views/id_view.html'
});
Accessing /base/category returns the correct template, but /base/category/id also returns the category template (I want it to return id_view.html). I might want to add more dynamic parameters later on so I want a clean solution for this.
This is my workaround for now:
.state('base.id', {
url: '/:catId/:id',
templateUrl: 'views/id_view.html'
});
It works but the UI-Router doesn't trigger the active classes in my menu.
Thanks for taking time to read this, if you just point me in the right direction that helps me a lot!
There is a working example with the code above
Your concept is ok, just be sure, that parent has place for its child:
<div ui-view></div>
So, in our case, I added the above line into views/cat_view.html. That is the parent state view of the state 'base.cat.id'. These links are now working:
<a href="#/base/category">
<a href="#/base/category/1">
<a href="#/base/category/22">
Check it in action here
What's wrong with this syntax?
if I click this link: #/app/games/game/{{id}}/team
it redirects to: #/app/games instead of going to the above
gameitem.html template:
<a class="tab-item" ng-href="#/app/games/game/{{id}}/team">Team</a>
which renders to: #/app/games/game/2/team
the routing state:
.state('app.game', {
url: "/games/game/:id",
views: {
'menuContent': {
templateUrl: "templates/gameitem.html",
controller: 'GameItemController'
}
}
})
.state('app.game.team', {
url: "/games/game/:id/team",
views: {
'menuContent': {
templateUrl: "templates/gameitem-team.html",
controller: 'GameItemTeamController'
}
}
})
Don't use ng-href with ui-router. Instead use ui-sref.
ui-sref="app.game.team({id:id})"
Use ui-sref, that way you directly point to your state, so you can afterwards change the URL and it will handle that for you templatewise:
<a class="tab-item" ui-sref="app.game.team({'id': id})">Team</a>
Reference:
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
And pointed out by Martin in the comments, the URL property in a childstate, appends the used value to the parent's URL. Prepending it with ^ makes it an absolute route.
Reference:
https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states
You should use ui-sref, as mentioned in previous answers. But couse of your problem is erroneously defined url in sub state.
'app.game' is parent state, 'app.game.team' substate - because dot notation (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#dot-notation).
In nested states are url concatenated. Correct url of 'app.game.team' state should be "/team" only (see https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states)
I'm working on a simple angular application using ui-router. I have a couple states for selecting and then editing information about a publisher. The relevant config:
.state('select-publisher', {
url: '/select-publisher',
templateUrl: '/Content/superadmin/src/templates/publishers/publishers.html'
})
.state('publisher', {
abstract: true,
url: 'publisher/{id:int}',
templateUrl: '/Content/superadmin/src/templates/publishers/publisher.html'
})
.state('publisher.details', {
url: '/details',
templateUrl: '/Content/superadmin/src/templates/publishers/details.html'
})
.state('publisher.ad-tags', {
url: '/ad-tags',
templateUrl: '/Content/superadmin/src/templates/publishers/ad-tags.html'
})
.state('publisher.native-ads', {
url: '/native-ads',
templateUrl: '/Content/superadmin/src/templates/publishers/native-ads.html'
})
Inside the select-publisher state I have a big list of available publishers. Each one of them is bound to an ng-click event that triggers the following function in my controller:
$scope.selectPublisher = function(publisher) {
publisherService.setSelectedPublisher(publisher);
$state.go('publisher.details', {id: publisher.Id});
};
This works just fine and takes me to the publisher.details state and renders the proper view. At this point the URL in my browser points to localhost:1337/superadmin#/publisher/39/details where 39 is the ID of the publisher that I selected.
The problem is, if I refresh this page or attempt to navigate directly to it by pasting the URL into the browser from another area of the application, I am ALWAYS taken back to the select-publisher state. I would like to be able to configure my states such that I am able to navigate to the details state (or any other state) based on URL.
Worth noting is that I do have a catch all route defined after all of my states:
$urlRouterProvider.otherwise('/select-publisher');
I'm assuming that for some reason this is being triggered but I can't reason as to why navigation works in my app using either $state.go as I have indicated in my controller as well as using ui-sref directive in my HTML templates but not through navigating directly to the URL.
Maybe it's because of missing slash url: /publisher/{id:int}