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!
Related
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 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'm working on multiple angular apps that I have to nest (like a web portal). My main app got a router where I define some states.
$stateProvider
.state('state1', {
url: "/state1",
views: {
"area": { templateUrl: "area1.html"}
}
});
And my other apps work like this too. I'd like to make a specific script that would be called if the state called in the main app is unknown by the main router, so I could to get the url and views in another router.
For example, if the main app call the state state2 that is unknown by my first router, it will look for it in a second router which define it.
I looked for a solution using the resolve option of ui-router but I'm not sure it could work this way.
Feel free to ask for more details. I did my best to make it short and understandable :)
Documentation on Otherwise()
app.config(function($urlRouterProvider){
// if the path doesn't match any of the urls you configured
// otherwise will take care of routing the user to the specified url
$urlRouterProvider.otherwise('/index');
// Example of using function rule as param
$urlRouterProvider.otherwise(function($injector, $location){
... some advanced code...
});
})
Hope this code help you as your need:
var myApp = angular.module('myApp', []);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/state1');
$urlRouterProvider.when("", "/state1");
$stateProvider
.state('state1', {
url: '/state1',
templateUrl: 'state1.php'
}
})
.state("state2", {
url: "/state2",
templateUrl: 'state2.php'
});
});
I'm working on an application built with AngularJS that has two different states:
App intro wizard
App pages (with a Navigation template and nested views)
I want to default to State 1 the first time someone access the app, once done the wizard, continue on to the App pages, State 2.
My "app" state (State 2) is an abstract state because it has nested views. So I cannot transition to this state.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'templates/intro.html',
controller: 'IntroCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent' :{
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
}
}
});
$urlRouterProvider.otherwise("/");
})
I've got the same problem as you, here is a post about abstract state: angularjs ui-router default child state and ui-sref
It explains why you can't directly access abstract state
Hope it helps.
I have added $location service to the controller of the "intro" page and use the following to transit to app state which works for me.
$location.path('app/playlists');
The menu.html is loaded and navigated to playlists.
In a service:
$location.path(
$state.href('app.some.abstract.state', { some: 'params' })
);
Or in a template ($state must be available in the local or global $scope):
<a ng-href="{{$state.href('app.some.abstract.state', { some: 'params' })}}">...</a>
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