i'm having trouble configuring my routers.
the router going to /:lang/:country & /:lang/:country/:city are not working. 1st three routes works OK, how cna I fix it?
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', { // works
templateUrl : 'templates/main.html',
controller: 'MainCtrl'
}).when('/:lang', { // works
templateUrl : 'templates/main.html',
controller: 'MainCtrl'
}).when('/:lang/premium-benefits', { // works
templateUrl : 'templates/premium_benefits.html',
controller: 'PremiumBenefitsCtrl'
}).when('/:lang/:country', { // NOT working
templateURL : 'templates/destination.html',
controller: 'DestinationCtrl'
}).when('/:lang/:country/:city', { // NOT working
templateURL : 'templates/destination.html',
controller: 'DestinationCtrl'
}).otherwise({
templateURL : 'main.html'
});
$locationProvider.html5Mode({enabled: true, requireBase: true});
}]);
sorry guys, templateURL must be templateUrl lol
Related
I am trying to redirect the url using the $routeprovider
$routeProvider.when('/', {
templateUrl : 'scripts/login/login.tpl.html',
controller : 'LoginCtrl'
});
$routeProvider. when('/sample', {
templateUrl: 'sample.html'
});
$routeProvider.otherwise({
redirectTo : '404.html'
});
Below is the url which loads the application
http://localhost:8080/orion-web/app/
when I try to append the word 'sample' to the url
ie
http://localhost:8080/orion-web/app/sample
I get 404 error , This is not the 404.html from the $routeprovider. It's tomcats 404 resource not found page
Do you have a base url set for your page?
It should be <base href="/orion-web/app/"> within the header section of your index.html
In the second $routeprovider.when try removing /
$routeProvider. when('sample', {
templateUrl: 'sample.html'
});
$routeProvider
.when('/', {
templateUrl : 'scripts/login/login.tpl.html',
controller : 'LoginCtrl'
})
. when('/sample', {
templateUrl: 'sample.html'
})
.otherwise({
templateUrl: '404.html'
});
Use this code
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 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 .
This is how I am doing .Here is my code.
I need to have specific function for each route
var App = angular.module('App', ['ngRoute']);
App .config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'mainController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'mainController'
});
});
I guess you want to use the 'resolve' function. Try like below
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController',
resolve: {
val: function() {
// do whats needed here
return true;
}
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'mainController',
resolve: {
val: function() {
// do whats needed here
return true;
}
})
friends, can anybody help.
Angular 1.4.9 make links like this http://domain/#!/product,
but I need links like this http://domain/#!product with out slash.
Code:
var app = angular.module('myApp', [
'ngRoute'
])
.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider, ngMeta) {
'use strict';
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
})
.when('/article/:slug', {
controller: 'ArticleCtrl',
templateUrl: 'views/article.html'
})
.when('/catalog/:category/:subcategory', {
controller: 'CatalogCtrl',
templateUrl: 'views/catalog.html'
})
.when('/product/:category/:subcategory/:product', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.when('/product/:category/:subcategory/:product/:texture', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
]);
I don't think this is a valid URL - http://domain/#!product
It should be http://domain/#!/product or http://domain/product,
To transform your URLs in desired way, it gives you some heads up -
https://docs.angularjs.org/guide/$location