I want to remove # hash in angularJs using $locationProvider.html5Mode(true); but this is causing all URLs to be routed through angularJs. How can I set it up so only some pre-defined URLs got routed through angularJs, while the rest still using Laravel.
The code is:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/alls', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.when('/alls/page/:page', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/alls'
});
$locationProvider.html5Mode(true);
}
]);
So if it's not /alls or /alls/page/, Laravel should handle the routing.
I've tried using <base href="."> as explained in: http://docs.angularjs.org/guide/dev_guide.services.$location. But it doesn't work.
I finally got it to work. Here is the solution:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/alls', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.when('/alls/page/:page', {
templateUrl: app.site_url + 'ang/index',
controller: 'MainCtrl'
})
.otherwise({
templateUrl: app.site_url + 'ang/index',
controller: function(){
window.location.href = window.location.href;
}
});
$locationProvider.html5Mode(true);
}
]);
Hopefully it will help someone else.
Related
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: '/'
});
}]);
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
I'm using cordova angularjs together. I will use the routeprovider.
index.js:
var appGenerator = angular.module('appGenerator', ['ngRoute', 'ngResource']);
appGenerator.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
appGenerator.config(['$routeProvider' function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "partials/tablePage.html",
controller: "MainCtrl"
})
.when('/contacts', {
templateUrl: "partials/contacts.html",
controller: "ContactsCtrl"
}).otherwise({
redirectTo: '/'
}); }]);
html:
{{table.tablename}}
But I get an net::ERR_FILE_NOT_FOUND(file:///contacts) error
What I'm doing wrong?
I have this code:
var app = angular.module('TabsApplication', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/search', {
templateUrl: 'search.html',
controller: 'SearchController'
})
.otherwise({
redirectTo: '/home'
});
}])
Right now, I go to http://myapp.com/#/search, it will display search.html. What I want is that if I go to http://myapp.com/#/search?search1=1&search2=2, it will also display search.html.
If I use '/search*', it will redirect to home if I type http://myapp.com/#/search, but if I type http://myapp.com/#/search*, it will show search.html.
Is there a way to do this? I am using AngularJs version 1.2.9.
enter code herevar app = angular.module('TabsApplication', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/search", {
templateUrl: 'html/somepath/search.html'
controller: 'SearchController'
})
.otherwise({
redirectTo: '/home'
});
}])`enter code here`
I am using MVC Web API and Angular JS
When i am giving single routeProvider, then its working after adding one more routeProvider its not working....
My Code Is:
var phoneModelsApp = angular.module('phoneModelsApp', ['ngRoute']);
phoneModelsApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/phonelist', {
templateUrl: 'partials/Test1.html',
controller: 'phoneListCtrl'
}).
$routeProvider.when('/phonelist1', {
templateUrl: 'partials/Test2.html',
controller: 'phoneListCtrl'
}).
otherwise({
redirectTo: '/phonelist'
});
}]);
You need to add to in your urls "#" or adding in your configuration:
$locationProvider.html5Mode(true);
In order to remove the # in Angular you need to make an small change in your configuration:
You need to add:
$locationProvider.html5Mode(true);
This is the whole version:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});