using ng-view and
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/partials/home',
controller: 'homePage'
}).
otherwise({redirectTo: '/login'});
}]);
everything works fine, except the URL, which shows /#/ before each address. How do you get rid of it?
inject $locationProvider and set html5mode to true
http://docs.angularjs.org/guide/dev_guide.services.$location
myApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: '/partials/home',
controller: 'homePage'
}).
otherwise({redirectTo: '/login'});
$locationProvider.html5Mode(true); // <-- Here comes the magic
}]);
remember though that you will need to set upp the backend to redirect all links to index.html
Related
Change the below url
http://example.com/#/alphabits/a b c
to
http://example.com/#!/alphabits/a_b_c
Any suggestion
You can change this from $locationProvider. I used this code in my application to change this.
angular.module('myApp').config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix(''); // We are actually removing ! from URLs as ! is default one.
$routeProvider
.when('/', {
templateUrl: 'templates/home.tpl.html',
controller: 'homeCtrl'
})
.when('/about', {
templateUrl: 'templates/about.tpl.html',
controller: 'aboutCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
I have an AngularJS 1.0.7 web application. When I load my site in a browser I type www.domainname.com. The browser loads the page and immediately my browser url changes to www.domainname/home.
How can avoid this? I would like the browser shows www.domainname.com when I´m in index.html
UPDATE:
Please see my app.js:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers'])
.config(['$routeProvider', '$httpProvider', '$locationProvider',function($routeProvider, $httpProvider, $locationProvider) {
// use the HTML5 History API
$locationProvider.html5Mode(true);
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$routeProvider.when('/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'});
$routeProvider.when('/contact', {templateUrl: 'partials/contact.html', controller: 'HomeCtrl'});
// More routing
$routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});
// More routing
$routeProvider.otherwise({redirectTo: '/home'});
}])
.config(function(AngularyticsProvider) {
AngularyticsProvider.setEventHandlers(['Console', 'GoogleUniversal']);
}).run(function(Angularytics) {
Angularytics.init();
});
It should work if you replaced:
$routeProvider.otherwise({redirectTo: '/home'});
by
$routeProvider.otherwise({redirectTo: '/'});
and added:
$routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});
NOTE: and as #isherwood rightly commented below:
$routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});
can be removed altogether, to avoid having both '/' and '/home' pointing to the same route.
I have a small AngularJS website where I use one controller and a view. I wanted to remove the /# in the URL with $locationProvider.html5Mode(true), but here starts the problem.
My code:
[...]
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/',
{
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/'});
}]);
When I do this I get the error that he can't find the home view on views/home.html (which is the correct path). When I delete the html5mode for removing the /# in the URL it all works just fine.
With this:
[...]
.config(['$routeProvider', function($routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/Project',
{
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/Project'});
}]);
Summary: when I add the html5mode it gives me the error that he can't find the view. When I remove it it all works.
Anyone who has an idea what the problem could be?
I have this code:
var app = angular.module('TabsApplication', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/search', {
templateUrl: 'search.html',
controller: 'SearchController'
})
.otherwise({
redirectTo: '/home'
});
}])
Right now, I go to http://myapp.com/#/search, it will display search.html. What I want is that if I go to http://myapp.com/#/search?search1=1&search2=2, it will also display search.html.
If I use '/search*', it will redirect to home if I type http://myapp.com/#/search, but if I type http://myapp.com/#/search*, it will show search.html.
Is there a way to do this? I am using AngularJs version 1.2.9.
enter code herevar app = angular.module('TabsApplication', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/search", {
templateUrl: 'html/somepath/search.html'
controller: 'SearchController'
})
.otherwise({
redirectTo: '/home'
});
}])`enter code here`
I have a small angular app that uses this configuration:
.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider,$httpProvider) {
$routeProvider.
when('/', {templateUrl: 'home.html', controller: 'mainCtrl'}).
when('/report/fail', {templateUrl: 'fail.html', controller: 'mainCtrl'}).
when('/report/:url', {templateUrl: 'report.html', controller: 'reportGeneralCtrl'}).
when('/report/:id/:url', {templateUrl: 'report.html', controller: 'reportUserCtrl'}).
otherwise({redirectTo: '/'})
$locationProvider.html5Mode(true)
}]);
When I try to access some url directly, typing in the browser the url, angular add this string: "#.UqX3mNJN9Zo" to my url.
Why this happens?
Found out that this is caused by addThis script. probably this don't work well on angular.