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?
Related
I am using angular router for routing my app and I want to use the html5mode.
Routing is working fine, but when a refresh my page (on he browser), I get a 404 error.
Here is my routing code snipet
angular.module ('app', ['ngRoute', 'home', 'login', 'admin'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/components/home/home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: 'app/components/login/login.html',
controller: 'loginController'
})
.when('/outils-de-gestion', {
templateUrl: 'app/components/admin/admin.html',
controller: 'adminController'
})
$locationProvider.html5Mode(true);
}])
.controller ('appController', ['$scope', function ($scope){
}])
What am I doing wrong ? Has anyone an idea about that ?
This solution works for angularJs.
index.html => Add in head tag.if your application is in folder then you need to add folders like:
config.js => add $locationProvider in function param and the code below:
app.config(function($routeProvider,$locationProvider)
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
and your href should like ng-href="home" i.e. do not use #or !
thats it .
I'm trying remove from my url #, but when I add $locationProvider.html5Mode(true); and my app.js and <base href='/'> on my HTML, I get an error from AngularJS:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=AppDj&p1=TypeError%…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.min.js%3A20%3A69)
var AppDj = angular.module('AppDj', ['ngRoute']);
AppDj.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'mainCrtl'
})
.when('/login', {
templateUrl: 'views/login.html'
})
.when('/register', {
templateUrl: 'views/register.html'
})
.otherwise({
redirectTo: '/'
})
$locationProvider.html5Mode(true);
}]);
AppDj.controller('mainCrtl', function ($scope){
});
The error is thrown because Angular is trying to inject a module that it cannot find for some reason. Most likely this has nothing to do #. Make sure you include the script for the route provider in your page.
<script src="path/to/angular-route.js">
Edit: Actually, you haven't included the location provider, see this:
AppDj.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)
you haven't included the location provider, see this:
AppDj.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)
Also do like below if you do not require a base tag
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
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 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.
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