I have the following routes:
/**
* General app route
*/
angular
.module('app')
.config(config);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/index.html',
controller: 'ImageController'
})
.when('/category/:name', {
templateUrl: 'partials/index.html',
controller: 'CategoryController',
})
.when('/404', {
templateUrl: 'partials/404.html'
})
.otherwise({ redirectTo: '/404' });
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
when I'm trying to access the category route from base route it works fine, but when I reload the page on category route it tries to access the assets file through category path instead of base path.
how can I fix it?
I figured it out by adding base tag to index.html
<head>
<base href="/index.html">
</head>
One way is the disable HTML5 mode
$locationProvider.html5Mode({
// enabled: true,
requireBase: false
});
Other way is to make sure the server side routing returns correct HTML file.
You have activate html5 mode, and for that you need redirect all the traffic to the index.html
See the section html5 mode for more details https://docs.angularjs.org/guide/$location
Related
I want to ask you for help in this code.
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller: "HomeController"
}).when("/login", {
templateUrl: "/views/login.html",
controller: "LoginController"
}).when("/register", {
templateUrl: "/views/register.html",
controller: "RegisterController"
}).when("/users", {
templateUrl: "/views/admin/users.html",
controller: "UserController",
requiresAuth : true
}).otherwise({
redirectTo: "/"
});
}).run(function($rootScope, Session) {
$rootScope.$on("$routeChangeStart", function(event, next, current) {
if (next.requiresAuth && !Session.getIsAdmin()) {
alert("You are not authorized");
event.preventDefault();
}
});
});
when I go to non-existent address it shows err:
Error: No default engine was specified and no extension was provided.
, so the otherwise param doesn`t work, why not?
This error comes from the server, not from angular. You need to configure your server to serve the index.html page for this "non-existent" address (and for all the existent ones too, BTW. Read Understanding what it takes to remove the hash # from angular routes).
Angular can't do anything if there is no HTML page and no application at all. Once the index.html is loaded from the server, the angular application will start, will inspect what the URL is, will detect that it doesn't match any route, and will then redirect to the home page.
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'm stuck with routeProvider. my links keep opening a new page instead of loading the template in the view.
My code is the following
raceApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/createchallenge', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/findchallenge', {
templateUrl: 'raceApp/findChallenge_view.php',
//controller: 'findChallenge'
})
.otherwise({
redirectTo: '/'
});
}]);
My HTML looks like
<base href="/runkinlocal/wp-content/themes/wordpress-bootstrap-master/" />
<a class="menu-item select-runner0" href="#/createChallenge">
<a class="menu-item select-runner0" href="#/findchallenge">
When the page loads, the initial template is loaded, but then when I click on one of the links, a new page loads instead of loading the template in the view
( the page looks like http://test.com:8888/runkinlocal/wp-content/themes/wordpress-bootstrap-master/#/createChallenge)
I am working with Wordpress.
I'm looking forward to your help!
Working Example
plnkr
Suggestions
1. Your hrefs should not have #/
Create |
Find
2. Otherwise doesn't need redirectTo
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/createChallenge', {
templateUrl: 'create.php',
controller: 'CreateChallengeController'
})
.when('/findChallenge', {
templateUrl: 'find.php',
controller: 'FindChallengeController'
})
.otherwise("/");
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
3. Extra comma after last .when()
You have:
.when('/findchallenge', {
templateUrl: 'raceApp/findChallenge_view.php',
//controller: 'findChallenge'
})
The controller is commented out but there is still a comma.
4. You might need to configure html5
(see script.js in the plnkr)
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
5. You can add the base href like so
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
Relevant Resources
I suggest checking these out:
$routeProvider docs
$route example
Let me know if that works!
FOr my angular application , I want to use $locationProvider.html5Mode(true) to remove '#' sign from URL.
I also used but it is not working.
My index.html include "" in header section.
My app.js is as follows.
$routeProvider
.when('/signIn', {
controller: 'signInController',
templateUrl: 'html/views/sign-in.html'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'html/views/log-in.html'
})
.otherwise({ redirectTo: '/login' });
$locationProvider.html5Mode(true);
All my code (html and scripts) is under App directory. But when I am trying to run my login page is not getting loaded.