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>
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
Ok, here is the problem. I have an app where user can signup as merchant and can have their own store name and the url I looking for is:
http://localhost:8000/#/storename
This is getting conflict with default homepage subpages such as contactus, aboutus. Following is my implementation of ui-router.
.state('home', {
url: '/', --> http://localhost:8000/#/ [work]
templateUrl: 'views/main_home.html',
resolve: loadSequence('flexSlider','wantCtrl'),
css: 'assets/vendor/style.css'
})
.state('home.contact', {
url: '/contact', --> http://localhost:8000/#/contact [not work]
views: {
'homeView': {
templateUrl: 'partials/contact.html',
}
},
css: ['assets/vendor/style.css']
})
.state('store',{
url: '/:storename', --> http://localhost:8000/#/myshop [work]
templateUrl: 'views/main_store.html'
})
.state('store.list', {
url: '/lists', --> http://localhost:8000/#/myshop/lists [work]
views: {
'primView': {
templateUrl: 'views/store_home.html',
}
}
})
Here the http://localhost:8000/#/contact are accessing the store template as if contact is a store name. Default whatever inherit home.[anything] should be under parent defined template. How can i resolve this issue?
There is dirty way of doing this, which is define new parent for each of the subpages, but that will be repetition of header and footer partial layout.
as far as i know angular follows top to bottom approach while dealing with routes. so define
.state('store',{
url: '/:storename', --> http://localhost:8000/#/myshop [work]
templateUrl: 'views/main_store.html'
})
last after all other routes. In your case when angular reaches /:storename itwill think that contact is a store name and load that page. to avoid it you need to keep it last
I have 2 states in my app currently. Each app has multiple views. I want on state to be activated on app start up. Right now, when the app starts, I only get the links. Then I have to click on any link to activate any state. How do I make a state opened by default?
states conf
var app = angular.module('dategenie', ['ui.router', 'ui.bootstrap', 'geolocation', 'ngIdle', 'infinite-scroll']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /profile
$urlRouterProvider.otherwise('/');
// Now set up the states
$stateProvider.state('profile', {
views: {
mainModule: {
url : '/profile'
, templateUrl : 'partials/profile.html'
, controller: 'ProfileCtrl'
}
, rightPaneModule: {
templateUrl: 'partials/location.html'
, controller: 'LocationCtrl'
}
}
})
.state('profiles', {
views: {
mainModule: {
url : '/'
, templateUrl : 'partials/home.html'
, controller : 'HomeCtrl'
}
, chatModule: {
templateUrl : 'partials/chat.html'
, controller: 'ChatCtrl'
}
}
});
}]);
HTML
a(ui-sref="profile") Profile
a(ui-sref="profiles") Home
a(href="/logout") Logout
div(ui-view="mainModule")
div(ui-view="chatModule")
div(ui-view="rightPaneModule")
Thanks!
First of all, your url declaration should be outside of the views object.
So this is how your profiles state would look like:
.state('profiles', {
url : '/',
views: {
mainModule: {
templateUrl : 'partials/home.html'
, controller : 'HomeCtrl'
},
chatModule: {
templateUrl : 'partials/chat.html'
, controller: 'ChatCtrl'
}
}
});
Note: I'm not sure if this is still a valid concern, but I would put all of my view names in quotes. If memory serves me right, this had some implications earlier on with UI-router - not sure if that still applies.
Secondly, you need to make sure you have HTML5 Pushstate enabled if you wish for routing to pick up an active state on "/". Otherwise your 'root' would be "/#/".
Here's some code you can slap in say a push-state.js file;
app.config(['$locationProvider', function($locationProvider) {
return $locationProvider.html5Mode(true);
}]);
Quite useful to have in it's own file when you stumble upon errors with client side routing, I find most of my issues arise from PushState indescrepencies (so toggling it on and off is a nice little advantage when debugging).
Hope that works out for you, good luck : )
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'
})