Whenever I access the url angular app remains polluted with hashtag. Is there a way to get rid of someRandomString from url after the angular has initialised.
Enter url in browser: url.dev/someRandomString
After that angular will redirect(without reloadding page) me to: url.dev/someRandomString#/ idealy it should be url.dev/#/
I am using ui-router and angular. The html5 mode is disabled.
Yes, you can.
Just set / as argument for otherwise() method of $urlRouterProvider provider of uiRouter module (which you already use) :
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
// Your custom routes
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html'
});
// Redirect to 'url.dev/#/' if no route matched
$urlRouterProvider.otherwise('/');
}
]);
Related
I am having problems with the ui-sref directive (rarely) when deploying to Heroku. The application is working properly locally. I am using angular 1.6.8, ui-router 1.0 and I cannot figure out how to solve the issue.
My config.js file looks like this:
materialAdmin
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('not-authorised', {
url: '/not-authorised',
templateUrl: '404.html'
})
//------------------------------
// LOGIN
//------------------------------
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
...
$locationProvider
.html5Mode(false)
.hashPrefix('');
}]);
EDIT: I am able to reproduce it locally if I run grunt build in production mode. I am a bit lost right now, but suspecting about the minification of the files.
This are the errors I am getting on the console:
dashboard should be a defined route if you are going to use it with ui-sref=""
I am using AngularJS ui-Router and node js.Response is coming as JSON. Normally, the page was rendered properly. If I refresh the same page manually, it displays JSON Data instead of HTML.
Kindly, help me to fix this issue.
angular.module('app.routes',[])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider
.html5Mode({
enabled:true,
requireBase:false
})
.hashPrefix('');
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider.state('/', {
templateUrl: '/views/login.html'
})
.state('admin', {
url: '/admin',
templateUrl: 'views/index.html',
controller: 'AdmCtrl',
})
.state('admin1', {
templateUrl: 'views/index1.html',
controller: 'AdmCtrl1',
})
You have turned on html5Mode routing.
This is a declaration that your internal angular route URLs are the same as your server's URLs.
In practise, it looks like you have actually configured the server to send the data as JSON instead.
You need to change your server side code to serve up HTML documents for those URLs instead of JSON.
Alternatively, turn off html5Mode and go back to hashbangs.
I'm using ui-router for an Angular (1.4) WebApp. Everything is fine, but the URL redirect rules. I know I can define a set of redirect rules when an URL is unknown. But I'd like to make it more advanced. I want to redirect the request to its nearest parent location.
Here is a simplified case:
/ // --> index.html
/apps/app/:id // --> app.html
/apps/app/:id/status // --> app.status.html
/unknown/path // --> no path segment is registered at all, so redirect to index.html
MY WISH:
/apps/app/:id/unknown // --> app.html (not redirect to index.html)
Here is corresponding code:
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'index.html'
}).
.state('app', {
url: '/apps/app/:id',
templateUrl: 'app.html'
})
.state('app.status', {
url: '/apps/app/:id/status',
templateUrl: 'app.status.html'
});
$urlRouterProvider.otherwise('/');
}])
In the real project, there are more than 20 state rules. But redirect to index.html is not user friendly. I'm looking for a smart way to redirect page to nearest page.
Solution
Now I've got a solution. Note that _.initial comes from underscorejs.
$urlRouterProvider
.otherwise(function($injector, $location) {
var parentUrl = _.initial($location.path().split('/')).join('/');
$location.path(parentUrl);
});
You can handle more complex redirects by:
$urlRouterProvider.otherwise(function($injector, $location){
// handle each case here
});
ui-router otherwise
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 have a problem between my template and controller. When i hit the refresh button on the web browser my controller is getting destroyed and not getting created again. So view doesnt function. Is there any way to avoid this error ?
UPDATE :
It was an other service which caused ctrl not the work. I solved the problem but still i couldnt figure out how to manipulate the URL when a person presses refresh in the browser..
Try this:
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider
.when('', '/home')
.otherwise('/errorPage');
// Application routes
$stateProvider
.state('someState', {
url: '/somePage',
controller: 'SomeCtrl',
templateUrl: 'any.html',
})
.state('otherOne', {
url: '/otherPage',
templateUrl: 'other.html',
})
}
And to shitch between states use <a ui-sref="someState">cLick Me</a>