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
Related
Following is my code:
var app = angular
.module('moviesApp', ['ui.router'])
.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/SignIn');
$stateProvider
.state("SignIn", {
url: "/SignIn",
templateUrl: "Pages/SignIn.html"
})
.state("SignUp", {
url: "/SignUp",
templateUrl: "Pages/SignUp.html"
});
$locationProvider.html5Mode(true);
});
When I load the state - '/SignIn' it loads the contents of 'Pages/SignIn.html' in ui-view as expected. Similarly, when I load the other state - '/SignUp' it loads the contents of 'Pages/SignUp.html' in ui-view.
What is my requirement?
I want 'Pages/SignIn.html' or 'Pages/SignUp.html' to be loaded only through states in ui-view. They should not be loaded through direct URL navigation in browser.
In other words, when I type '/Pages/SignIn.html' directly in the browser's address bar, it should be redirected to the state '/SignIn'.
The contents of html files under 'Pages' folder should not get displayed over direct url navigation.
How can I achieve this? Please advise.
To prevent it from showing in the address bar use name instead of url
$stateProvider.state('default', {
url:'',
templateUrl: ctx + '/jsp/home/dashboard.jsp'
}).state({
name:'/test',
templateUrl: ctx + '/jsp/home/testview.jsp'
});
In the html page give as below
<a ui-sref="test">test view</a></li>
I am currently working on a web development project and I am having a problem in implementing UI-router (AngularJS).
I want to set a default state when the page loads and also default state for the child view.
If I use abstract:true method that is not the solution because when I want to again active that state it won't be possible.
Hope this will give you answer to your Question
var App = angular.module('TechdefeatApp',['ui.router']);
App.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/")
$stateProvider
.state('/', {
url: "/",
templateUrl: "app/components/home/homeView.html",
controller:"homeController"
})
.state('member', {
url: "/member/:seo_url",
templateUrl: "app/components/member/memberView.html",
controller:"memberController"
})
.state('category', {
url: "/category/:seo_url",
templateUrl: "app/components/category/categoryView.html",
controller:"categoryController"
})
}]);
you need to use at $urlRouterProvider service,
first inject this service, after that write
$urlRouterProvider.otherwise('/otherwise').
Pay attention that the /otherwise url must be defined on a state as usual:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
good luck!
This is the angular.ui.router definition
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider.state('/login',{
url: "/",
controller: 'Login',
templateUrl: 'login.html'
})
.state('/useractivities',{
url: "/activities",
controller: 'activitiesController',
templateUrl: 'useractivities.html'
})
}
]);
In the login controller I am executing
$state.go('useractivities', {});
This gives an error "Could not resolve 'useractivities' from state '/'"
I have tried a few things like
$location.url('useractivities')
but no luck, can anyone tell me whats going wrong?
The issue here is that to param of the $state.go() call must be existing state name. And the 'activities' is not existing name... it is the '/activities'
I would firstly suggest to use different state naming:
$stateProvider
// instead of this
// .state('/',{
// let's use this state name
.state('login',{ // this is a STATE Name
url: "/",
controller: 'Login',
templateUrl: 'login.html'
})
// instead of this
// .state('/activities',{
// use this
.state('activities',{ // this is a STATE Name
url: "/activities",
controller: 'activitiesController',
templateUrl: 'useractivities.html'
})
And then this will work
$state.go('activities', {}); // we use STATE Name here
$state.go('login', {}); // also state name...
Check here for more details:
$state.go(to [, toParams] [, options])
to
String Absolute State Name or Relative State Path
The name of the state that will be transitioned to or a relative state path. If the path starts with ^ or . then it is relative, otherwise it is absolute.
Some examples:
$state.go('contact.detail') will go to the 'contact.detail' state
$state.go('^') will go to a parent state.
$state.go('^.sibling') will go to a sibling state.
$state.go('.child.grandchild') will go to a grandchild state.
This issue can also occur if you try to use a "." in your state name. E.g.,
$stateProvider.state("Activities.Details", { url: ... })
...
$state.go("Activities.Details");
If you use a "_" or some other non-reserved character, it will work fine.
$stateProvider.state("Activities_Details", { url: ... })
...
$state.go("Activities_Details");
The sample demo of the angular ui router has this link for the start page:
full url of 'ui-router' is / or http://angular-ui.github.io/ui-router/sample/#/
full url of 'about' is /about or http://angular-ui.github.io/ui-router/sample/#/about
When I was using durandalJS there was a limitation that the default url is just "/" there can be no "/ui-router".
Has the angular ui router plugin the same limitation?
The default route for ui-router can be whatever you want it to be, there is no limitaion like in DurandalJS. Just use:
$stateProvider
.state("otherwise", { url : '/otherwise'...})
This is the official documentaion of ui-router, however I could not find the otherwise technique in there: https://github.com/angular-ui/ui-router/wiki
#apohi: ui-router is not angular-route. Your reply is adressing the wrong module.
You can do it this way:
angular.module('MyApp', ['ui.router']).config([
'$stateProvider', function ($stateProvider) {
$stateProvider.state('default', {
controller: 'MyController',
templateUrl: 'path/to/index.html',
url:''
})
)];
That way whenever the url is on the root of your site ui-router will capture it on a state that matches, in this case, 'default'.
use the $urlRouterProvider and its otherwise function:
angular.module('MyApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('default', {
controller: 'MyController',
templateUrl: 'path/to/template.ng.html',
url:'/default'
})
$urlRouterProvider.otherwise('/default')
})];
See here there is an "otherwise" option for a default route.
If you are talking about default route PARAMETERS, then there is an answer here.
You can use $urlRouterProvide.otherwise. This will work if you try to navigate to a route url that has not been defined.
Taken from here.
function configurUIRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('myhomepage',
{
abstract: false,
url: '/myhomepageurl',
templateUrl: "some-path/staff-admin.html",
controller: 'HomeController'
});
$urlRouterProvider.otherwise('/myhomepageurl'); // User will be taken to /myhomepageurl if they enter a non-matched entry into URL
}
The simplest way of all
add $urlRouterProvider service in config(function($urlRouterProvider))
and then
app.config(function ($stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('employeesState'); //default route
$stateProvider.state('employeesState', function(){
//state configuration here
}) //employees state
$stateProvider.state('cutomersState', function(){
//state configuration here
})
}
name any of the state in otherwise function to which you want as your default state/route
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'
})