I use https://github.com/angular-ui/ui-router library. When I try to access index route ('/') I'm redirected to 404. The code:
angular.module('cr').config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/index.html'
});
$urlRouterProvider.otherwise('/404');
});
What's wrong with that code? Although when I use ui-sref="home" it works but the url looks like '/#/' but when a user inputs site name he uses just domain name, like 'mysite.com', not 'mysite.com/#/'
You've declared how to behave when any unknown/other route is provided - go to /404.
But we also have to define how to behave, when some expected, but not "exact" / "not known" route is accessed, ie. create alias
That's where the .when() could/should be used:
...
// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/');
// the unknown
$urlRouterProvider.otherwise('/404');
There is nothing wrong with your code. You are just missing an explicit state for 404. Try adding this:
.state('404', {
url: '{path:.*}',
templateUrl: 'views/404'
});
To get rid of the hash (#) symbol you need to inject one more dependency into your config module:
$locationProvider
And use the .html5Mode() method to set HTML5 Mode to true, like so
$locationProvider.html5Mode(true);
Also, ensure your server is configured to allow Angular to handle your routing. For example, here is a Node/Express configuration that allows the above technique to work:
app.get('*', routes.index);
And in your index.js file (or however you configure your node.js instance):
exports.index = function(req, res){
res.render('index');
};
Here by example:
// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/');
// Redirect any unmatched url to 404 view (without change location.hash)
$urlRouterProvider.otherwise(function($injector) {
var $state = $injector.get('$state');
$state.go('404', null, {
location: false
});
});
$stateProvider
// homepage views
.state('homepage', {
url: "/",
templateUrl: "views/homepage.html",
data: {
pageTitle: 'Home'
}
... more here ...
})
// 404 views
.state('404', {
url: "/404",
templateUrl: "views/404.html",
data: {
pageTitle: '404 Not found'
}
});
The simplest way for me with ui-router was giving the url field an empty value :
$stateProvider
.state('home', {
url: '',
templateUrl: 'views/homepage.html',
controller: 'AppCtrl'
})
Related
I have a standard module config like this:
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/404");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "templates/partials/home.html"
})
...
.state('error',{
url: "/404",
templateUrl: "templates/partials/404.html"
});
});
And I need not to redirect to the 404.html page, but keep in the address bar the url which user tried go to.
Is there a simple method to reach that?
Url is an optional field in state, if you don't add that , it will only render the template.
Try this :
.state('error',{
templateUrl: "templates/partials/404.html"
});
And add this state to otherwise
I have an angular app where I am using ui-router module. I am storing a "page" in database with URL and content. I also have some other states/URLs that have their own template. For example:
$stateProvider
.state('landing', {
url: '/',
templateUrl: 'landing-page.html'
})
.state('admin', {
url: '/admin',
templateUrl: 'admin.html'
})
.state('user', {
url: '/user',
templateUrl: 'user.html'
})
I want to define a state for the pages using something like
.state('page',{
url: '??',
templateUrl: 'page.html'
})
What should be in the url above if my page is dynamically stored in database with a URL/slug and content. How can I add the URL/slug here ? If I try this below:
.state('page', {
url: '/{path:.*}',
templateUrl: 'page.html'
})
Then it routes every page including the other states to the same template. I can always prefix the URL with something like /page but I don't want to do that. I want to be able to load the page as :
www.mysite.com/page-1
www.mysite.com/whatever-url
etc
Never mind. I figured this out. The trick was more about using regular expression. Here is my solution
.state('page', {
url: '/{path:(?!admin|user)[a-z0-9\-]+}',
templateUrl: 'page.html'
})
This will ignore routes starting with /admin and /user which we want first. Then, it will check if the url has at least 1 character.
I have a request to add in another URL parameter that directs to a state that I already have set up. For efficiency purposes, I'm trying to see if I can add multiple URLs to point to the same state, or should I just use the $UrlRouterProvider.when() method to re-direct to that state in this new case.
Ex. this is what already exists
.state('site.link1',
{
url: '/link1',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
and the request is to add www.site.com/newlink that points to the link1 page. Is there something like this;
.state('site.link1',
{
url: '/link1, /newlink',
...
Try using the Regex and a parameter in the url. It is not optimal but works.
.state('site.link1',
{
url: '/{path:link1|newlink}',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
More information on regex in Urls.
To generate links with ui-sref pass the same parameter with the state name as a function
<a ui-sref="site.link1({path:'link1'})" >site link 1</a>
<a ui-sref="site.link1({path:'newlink'})">site new link</a>
You use params:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
.state('site.link',
{
url: '/{link}'
..
}
so when you use the same state like this
$state.go('site.link', {link: 'link1'})
$state.go('site.link', {link: 'link2'})
you can used when() function
.state('site.link1',
{
url: '/link1',
templateUrl: '/views/link1.html',
controller: 'link1Ctrl'
})
then on root config
angular.module('myApp', [...])
.config(function ($urlRouterProvider) {
$urlRouterProvider.when(/newlink/, ['$state','$match', function ($state, $match) {
$state.go('site.link1');
}]);
});
I found this approach to be quite simple and clean: create two equal states, just changing the url property
//Both root and login are the same, but with different url's.
var rootConfig = {
url: '/',
templateUrl:'html/authentication/login.html',
controller: 'authCtrl',
data: {
requireLogin: false
}
}
var loginConfig = Object.create(rootConfig)
loginConfig.url = '/login'
$stateProvider
.state('root', rootConfig)
.state('login', loginConfig)
I had almost the same problem, only with another constraint - I didn't want to use a redirect, since I wanted the url in the browser to stay the same, but display the same state.
This was because I wanted the chrome saved passwords to work for users that already saved the previous url.
In my case I wanted these two urls :
/gilly and
/new/gilly
to both point to the same state.
I solved this by having one state defined for /gilly, and for the second url, I defined an abstract state called /new.
This should be set up like this :
$stateProvider.state('new', {
abstract: true,
url: '/new'
template: '',
controller: function() { }
}).state('gilly', {
url: '/gilly',
template: 'gilly.html',
controller: 'GillyController'
}).state('new.gilly', {
url: '/gilly', // don't add the '/new' prefix here!
template: 'gilly.html',
controller: 'GillyController'
});
I'm using ui-router in Angularjs and I have the following routes (as part of my app.js file):
...
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
data: { public: true }
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
data: { login: true }
})
...
I have decided to keep the # in my routes because ui-router doesn't work too well with the html5 setting for routing without the hash.
Question: When I navigate to localhost:8080/ I would expect my home state to kick in but it goes to /dashboard (the otherwise route). I can only access the root of my site with localhost:8080/#/ - is this expected behaviour?
Not the answer for the question, but you might want to take a look at http://angular-route-segment.com for this case, as it works on top of built-in ngRoute module which plays well with html5 mode as well.
I'm implementing AngularUI's routing and appear to be missing something about how to configure a default URL. It seems like the below code would default the user to /dashboard/tree but if I refresh the page, the url appends another /dashboard, so I end up with /dashboard/dashboard/dashboard/dashboard/tree.
How can I properly set the default URL without having this appending issue when the user first visits the page?
config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/dashboard/tree');
/* URL mappings */
$stateProvider.
state('dashboard', {
url: '/dashboard',
views: {
'page': {
templateUrl: '/partials/admin/dashboard.htm'
}
}
}).
state('dashboard.tree', {
url: '/tree',
views: {
'content': {
templateUrl: '/partials/admin/tree-overview.htm'
}
}
});
}])
Believe it or not, this is probably a bug/feature in angular 1.1.5 (reloads add stuff to the url).
Try setting this in your head:
<base href="/"></base>