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 .
Related
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 angular app defined on my index.html file.
Using angular-routing i am routing a link named /erez to load a view with a template. It's working inside the app - when I click the link to /erez from the navbar on index.html it works perfectly.
But when I go directly to my.site.com/erez on the address bar, it gives 404. I understand why that is, having no server-side code, but is there a pure angular way of achieving direct urls?
my routing code:
var app = angular.module('labApp', ['ngRoute', 'angular.filter']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html',
controller: 'mainCtrl'
}).
when('/erez', {
templateUrl: 'erez2.html',
controller: 'erezCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
You can find lots of useful information from this link:
So either you need this base url tag inside the tag:
<base href="/" />
But be aware, this base tag may break the relative links in your code. Alternatively you can use:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Hope this helps.
Try this, it should work now.
var app = angular.module('labApp', ['ngRoute', 'angular.filter']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html',
controller: 'mainCtrl'
}).
when('/erez', {
templateUrl: 'erez2.html',
controller: 'erezCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({ enabled: true, requireBase: false });
});
I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation
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 the following in my app.js file:
// Declare app level module which depends on filters, and services
var APP = angular.module('DiagsDashboard', ['ngRoute', 'DiagsDashboard.filters',
'DiagsDashboard.services', 'DiagsDashboard.directives', 'DiagsDashboard.controllers']);
APP.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/views/shared/Error.html' })
.when('/Error', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard/Error', { templateUrl: '/views/shared/Error.html' })
.otherwise({ templateUrl: '/views/shared/Error.html' });
});
But when I browse to:
- /localhost/#
- /localhost/#/DiagsDashboard/
- /localhost/#/DiagsDashboard/Error
- /localhost/#/error
The whole page re-loads and everything refreshes.
I've copied this code from a project where it works and I have angular-route.js included.
This is an MVC application located within IIS as a sub-application at /localhost/DiagsDashboard.
The issue was simply I hadn't give ng-app a name in the markup. I'd read that it is possible to use ng-app without a name but obviously that isn't the case.