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
});
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 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 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 went through the yeoman tutorial and when I execute grunt serve the resulting app works fine. However it fails when I execute grunt serve:dist. The error message is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mytodoApp due to: Error: [$injector:unpr] Unknown provider: a
In my app.js file if I comment out the call to configure (which sets the prefix) then the issue goes away:
angular.module('mytodoApp', ['LocalStorageModule', 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ui.sortable'])
.config(['localStorageServiceProvider', function (localStorageServiceProvider) {
localStorageServiceProvider.setPrefix('ls');
}])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
I had the same issue. As suggested by Eddie, I ended up combining the two .config sections like so:
.config(function ($routeProvider, localStorageServiceProvider) {
localStorageServiceProvider.setPrefix('ls');
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
wrapping my app.js file as follows resolved the issue:
(function() {
var app = angular.module('mytodoApp', ['LocalStorageModule','ngCookies','ngResource','ngSanitize','ngRoute','ui.sortable']);
app.config(['localStorageServiceProvider', function (localStorageServiceProvider) {
localStorageServiceProvider.setPrefix('ls');
}]);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
}.call(this));
You need to wrap the second .config() block in ngMin safe code:
angular.module('mytodoApp', ['LocalStorageModule', 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ui.sortable'])
.config(['localStorageServiceProvider', function (localStorageServiceProvider) {
localStorageServiceProvider.setPrefix('ls');
}])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Or combine the two blocks.
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