I'm using angular ui router / stateProvider. However I set up my url any parts after the second forward slash is ignored and it always sends to this state:
$stateProvider.state('board', {
url: "/:board",
views: {
'content': {
templateUrl: '/tmpl/board',
controller: function($scope, $stateParams, $location) {
console.log('wat')
console.log($location)
}
}
}
});
Which has only 1 forward slash. Even when I go to localhost/contacts/asdf The following state doesn't run.
$stateProvider.state('test', {
url: "/contacts/asdf",
views: {
'main': {
templateUrl: '/tmpl/contacts/asdf',
controller: function () {
console.log('this doesnt work here')
}
}
}
});
This is a console log of $location. As you can see $location only recognizes the last part of the url as the path. As far as I can tell that's wrong. It's missing the "contacts" right before it. Any url is interpreted as having only 1 part for the url and sends to the board state. How do I fix this. THanks.
Edit: found that this was caused by angular 1.1.5. Reverting back to 1.1.4 didn't have this.
This may be the cause: https://github.com/angular/angular.js/issues/2799 . Try adding a base href.
Looks like that fixed in AngularJS v1.0.7. Just tested it.
Related
Based on the documentation, angularjs ui-router url parameters are by default optional. So is there a way to create mandatory parameters? Like when the parameter is missing or null it will not proceed to the page?
Hope you can help me.
Thanks
Use UI Routers resolve to check if route params are missing.
//Example of a single route
.state('dashboard', {
url: '/dashboard/:userId',
templateUrl: 'dashboard.html',
controller: 'DashboardController',
resolve: function($stateParams, $location){
//Check if url parameter is missing.
if ($stateParams.userId === undefined) {
//Do something such as navigating to a different page.
$location.path('/somewhere/else');
}
}
})
Above answer prasents incorrect usage of resolve that will fail when code is minified even if annotated. Look at this issue I've spent a lot of time debugging this, because ui-router#0.4.2 won't warn you that resolve should be object.
resolve: {
somekey: function($stateParams, $location){
//Check if url parameter is missing.
if ($stateParams.userId === undefined) {
//Do something such as navigating to a different page.
$location.path('/somewhere/else');
}
}
If you need minification, ngAnnotate
I'm having this annoying issue, when i refresh my page, it's not reloading the controller or the state. I'm using ui-router and Angularjs. I don't understand because only one page is having this trouble.
Here is my app.js:
(the page which having this issue this app.organization):
var route = angular.module('route', ["ui.router","starter"])
route.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/app")
$stateProvider
.state('app',{
abstract:false,
url:"/app",
templateUrl: "views/header.html",
controller:"homeCtrl"
})
.state('app.organization', {
url: "/organization:id",
templateUrl: "views/organization.html",
controller:"homeCtrl"
})
.state('app.usersingle',{
url:"/user:id?page:iterate",
templateUrl: "views/single_user.html",
controller:"userCtrl"
})
.state('app.ticket',{
url:"/ticket:id/author:myid",
templateUrl: "views/ticket.html",
controller:"ticketCtrl"
})
});
and in my controller i declare this as :
.controller('homeCtrl',['$state','$stateParams','$scope','dropdown','userdisplay','displayfilter','$q','$http',
function ($state,$stateParams,$scope,dropdown,userdisplay,displayfilter,$q,$http) {
// doing request etc...
}])
I really don't know wher the problem came from and how can i resolve it any help would be really appreciate.
Its because of our state definition is incorrect for app.organization.
Change it as below:
.state('app.organization', {
url: "/organization/:id",
templateUrl: "views/organization.html",
controller:"homeCtrl"
});
On further looking I think this issues is other states as well. Correct them and it should work. Refer this for details: https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters
I am building a simple HTML site using Angular JS ui-router.
I have built a custom 404 page ('www.mysite/#/error/404'), to which the user is redirected if the user types a url like 'www.mysite/#/invalidUrl'. This functionality was achieved by the following code snippet:
$urlRouterProvider
.when('', '/')
.when('/home', '/')
.otherwise('/error/404');
And the following state snippet:
$stateProvider.state('404', {
parent: 'app',
url: '^/error/404',
views: {
'errorContent#main': {
controller: 'error404Controller',
templateUrl: 'js/general/templates/error404.html'
}
}
});
I am trying to capture the invalid URL requested by the user to be displayed to the user like below.
The URL you requested cannot be found
Request: www.mysite.com/#/invalidUrl
I have tried listening to '$stateNotFound' event, which only seems to be firing when a specific invalid state is requested. I've also tried to listening to events '$stateChangeStart', '$locationChangeStart', and '$locationChangeSuccess' but couldn't find a way to achieve this functionality.
Is this possible? Please, share your thoughts - thank you
Awesome! Thank you Radim Köhler. I don't know how I didn't land on that thread when I searched but that helped me get the answer.
I changed the answer in that thread to fit my scenario which I am going to leave below for reference to any other users.
$stateProvider.state('404', {
parent: 'app',
url: '^/error/404',
views: {
'errorContent#main': {
controller: 'error404Controller',
templateUrl: 'js/general/templates/error404.html'
}
}
});
$urlRouterProvider
.when('', '/')
.when('/home', '/')
.otherwise(function ($injector, $location) {
var state = $injector.get('$state');
state.go('404', { url: $location.path() }, { location: true });
});
So the magic change was the function defined for 'otherwise' option. I didn't change the URL of the 'error' state. Instead, I used the 'state.go' to activate state '404' and passed the location path as the state parameter.
Setting location=true will take you to the URL of the state, and location=false will not. Whichever way you prefer the invalid URL can be accessed easily now.
I need to change an existing AngularJS application from using URLs in the format:
example.com/thePage/#/section/1/subsection/1
To making the section & subsection parameters readable by the server with a format like so:
example.com/thePage?section=1&subsection=1
The environment does not offer something like mod_rewrite, so I need to change the routing in Angular to make it handle & generate these URLs. I believe I can do this using $locationProvider.html5Mode(true); however I’m not sure how to proceed from there. I’ve tried updating the existing routing to something like the below, however it fails to return a view (as if the routing isn’t working.
$stateProvider
.state('section', {
abstract: true,
url: '?section',
views: {
'header': {
template: '<h3></h3>'
},
'main': {
templateUrl: constants.baseUrl + 'views/section.html',
controller: 'sectionCtrl',
resolve: {
section: ['sectionervice', '$stateParams',
function (sectionervice, $stateParams) {
return sectionervice.getsection($stateParams);
}],
subsection: ['sectionervice', '$stateParams',
function (sectionervice, $stateParams) {
return sectionervice.getsubsection($stateParams);
}]
}
}
}
})
.state('section.detail.subsection', {
url: '&subsection=:sectionId',
views: {
'main': {
templateUrl: constants.baseUrl + 'views/section.detail.subsection.html',
controller: 'DictionaryCtrl'
}
}
});
It seems that $stateProvider may only work with the forward-slash(/) parameter delimiter. Is there another way to achieve this?
In the ui-router website has a simple example of you trying to do.
Maybe you can do the same thing, see the RouteProvider and StateProvider settings.
url: http://angular-ui.github.io/ui-router/sample/app/app.js
In the server side you can retrieve the url, so you can get your parameters.
[Edit]
About $locationProvider.html5Mode(true); you can do this and do the settings in route and state providers too, that don't interfere in functionality
I'm not clear why this isn't functioning. The rest of my code - sans the URL Param-based routing is working fine, I've tested that all. However, when I tried to include a URL argument in my url (base.url/route/:param) the '.otherwise' element of my routeProvider is firing instead of the appropriate controller designated in the routeProvider.
Here's the relevant bits of code:
module.config
app.config(function($routeProvider){
//http://docs.angularjs.org/tutorial/step_07
$routeProvider
.when('/home',
{
templateUrl: 'app/partials/home.html',
controller: 'HomeController'
})
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
.when('/projects',
{
templateUrl: 'app/partials/project_list_tpl.html',
controller: 'Projects'
})
.when ('/site-help',
{
templateUrl: 'app/partials/site-help.html'
})
.otherwise(
{
templateUrl: 'app/partials/404.html'
})
});
module.controller
app.controller('ImplReference', function($scope, $routeParams) {
alert('hi');
});
I get my 404 page when going to /implementation-reference/whatever.
Any ideas why I don't see the alert I put at the beginning of my controller, nor see any errors in the console?
As best as I can tell, the issue lay in use a dash in the param as defined in RouteProvider. I originally had:
.when('/implementation-reference/:ref-scope',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
when I changed it to this:
.when('/implementation-reference/:ref',
{
templateUrl: 'app/partials/topic_tpl.html',
controller: 'ImplReference'
})
...suddenly everything works fine.
I noticed this after adding a controller to the 'otherwise' that showed me the $route information. After drilling through it, I saw that the regex on the pre-defined route which had the param was only working on the part before the dash.
I've been mystified by this for hours, and can't imagine how this isn't documented more clearly somewhere. Perhaps this is some newbie mistake (I am new to this).