I'm practising a demo application using AngularJs 1.4.8 with backend as core php. Im using linux os. My app files reside inside, var/www/demo/ang/ directory. What I need is, to remove the "#" hash from the url. I approached many examples from internet but the only final result Im getting is that nothing being displayed in the browser. Most of the approaches say to set
<head>
<base href="/" />
</head>
or
<head>
<base href="/var/www/demo/ang/" />
</head>
app.config(function($routeProvider, $locationProvider)
{
$routeProvider
.when('/', {
templateUrl : 'index.html',
controller : indexController
})
.when('/about', {
templateUrl : 'about.html',
controller : aboutController
});
$locationProvider.html5Mode(true);
});
or
app.config(function($routeProvider, $locationProvider)
{
$routeProvider
.when('/', {
templateUrl : 'index.html',
controller : indexController
})
.when('/about', {
templateUrl : 'about.html',
controller : aboutController
});
$locationProvider.html5Mode(
{
enabled:true,
requireBase: false
});
});
Even tried this $locationProvider.html5Mode(true).hashPrefix('!'); . I know that somewhere I'm doing a mistake or forgot to add something. Kindly help me to go through this
UPDATED: Answer Found
https://www.formget.com/angularjs-remove-hashtag/
I made two mistakes
One mistake is that, I set the <base href=""/> as absolute path rather than the relative path of the url. Hence provide the relative path http://www.siteame.com/ or http://localhost/path/to/angularjs_dir/
Second mistake is that, I named the main file which includes all the scripts, ng-view etc.., as some name other than index.html. Hence provide the base file name as index.html.
Rest of this all others were correct.
Related
I'm developing a web application using ASP.NET MVC and AngularJS with ngRoute module. The configuration works fine but URLs contain #/ and I would like to remove them. I know the point is adding $locationProvider.html5Mode(true); and <base href="/"> in the <head> but there is some conflict with server side routing and I can't get it work.
This is the route provider
$routeProvider
.when("/", {
templateUrl: "Home/Phones",
controller: "firstController"
})
.when("/phone", {
templateUrl: "Home/Phone",
controller: "secondController"
})
Pages can be normally accessed through http://localhost/test/#/ and http://localhost/test/#/phone.
Now if I add $locationProvider.html5Mode(true); and <base href="test"> in the header section of index page I can access the default page at http://localhost/test/ but the page is empty. Trying to access and I get an error at http://localhost/test/phone fires 404 page not found.
So... how to solve the first problem? Console doesn't show any error, don't know what to try...
I guess I should at least change my RouteConfig.cs, not it contains the default
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
The browser is requesting an asset /test/phone but that doesnt exist. In the case of 404s within a Single Page App using html5Mode you need to configure your webserver to serve the index.html on all "404"s
My url looks like this
http://127.0.0.1:50884/index.html#/home
This is index page. I am using angular ui-router to change to various views like but url comes with # tag like this:
http://127.0.0.1:50884/index.html#/mobileOperator
http://127.0.0.1:50884/index.html#/contentExpertise
Question :
Is there a way to remove/clean # tag from url.. to show the url path like below:
http://127.0.0.1:50884/index.html/home
http://127.0.0.1:50884/index.html/contentExpertise
I tried html5mode but it give angular error in console.
Error: [$location:nobase] http://errors.angularjs.org/1.5.0-rc.2/$location/nobase
K/<#http://127.0.0.1:50884/js/angular-v1.5.min.js:6:421
pf/this.$get<#http://127.0.0.1:50884/js/angular-v1.5.min.js:110:96
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<#http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d#http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<#http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d#http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
gb/F<#http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d#http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
e#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:1
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:86
s/</<#http://127.0.0.1:50884/js/angular-v1.5.min.js:52:121
n#http://127.0.0.1:50884/js/angular-v1.5.min.js:7:364
s/<#http://127.0.0.1:50884/js/angular-v1.5.min.js:52:90
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
e/<#http://127.0.0.1:50884/js/angular-v1.5.min.js:38:458
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
gb/F<#http://127.0.0.1:50884/js/angular-v1.5.min.js:43:96
d#http://127.0.0.1:50884/js/angular-v1.5.min.js:40:270
K#http://127.0.0.1:50884/js/angular-v1.5.min.js:71:447
la#http://127.0.0.1:50884/js/angular-v1.5.min.js:60:266
R#http://127.0.0.1:50884/js/angular-v1.5.min.js:58:229
R#http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
R#http://127.0.0.1:50884/js/angular-v1.5.min.js:58:397
N#http://127.0.0.1:50884/js/angular-v1.5.min.js:56:263
Ac/c/</<#http://127.0.0.1:50884/js/angular-v1.5.min.js:21:99
sf/this.$get</m.prototype.$eval#http://127.0.0.1:50884/js/angular-v1.5.min.js:140:363
sf/this.$get</m.prototype.$apply#http://127.0.0.1:50884/js/angular-v1.5.min.js:141:83
Ac/c/<#http://127.0.0.1:50884/js/angular-v1.5.min.js:21:57
h/<.invoke#http://127.0.0.1:50884/js/angular-v1.5.min.js:41:293
Ac/c#http://127.0.0.1:50884/js/angular-v1.5.min.js:20:1
Ac#http://127.0.0.1:50884/js/angular-v1.5.min.js:21:274
de#http://127.0.0.1:50884/js/angular-v1.5.min.js:20:83
#http://127.0.0.1:50884/js/angular-v1.5.min.js:306:372
n.Callbacks/i#http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27060
n.Callbacks/j.fireWith#http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:27828
.ready#http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29619
J#http://127.0.0.1:50884/js/jquery-2.2.1.min.js:2:29804
"
Please help
By default, AngularJS will route URLs with a hashtag.
It is very easy to get clean URLs and remove the hashtag from the URL using $locationProvider in AngularJS.
You need to inject $locationProvider into your config section of module and use the HTML5 History API like this.
e.g.
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('about', {
url: '/aboutus',
templateUrl: 'aboutus.html'
});
$locationProvider.html5Mode(true);
});
Also don't forget to put a <base href="/"> tag inside index.html section.
In order for html5 mode to work you must define a baseurl like:
<base href="whatever/" />
See w3schools for more information: http://www.w3schools.com/tags/tag_base.asp
I get this error, described on this url:
Description This error occurs when a module fails to load due to some
exception. The error message above should provide additional context.
Using ngRoute In AngularJS 1.2.0 and later, ngRoute has been moved to
its own module. If you are getting this error after upgrading to 1.2.x
or later, be sure that you've installed ngRoute.
But I don't see why it's going wrong, I've added ngRoute like so:
var myApp = angular.module("myProject", ["ngRoute"]);
(and a whole bunch more, but I don't think that matters)
And the ngRoute JS file is added in the _Layout.cshtml file:
<script src="~/Scripts/External/Angular/angular-route.js"></script>
What else should I look at?
controller.js
var app = angular.module('app', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Add external file for angular-route.js after angular script in index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
working code at W3school:
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing
I have set up ui router with the following states:
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider
.state('adminprojects', {
url: '/adminprojects',
templateUrl: 'views/adminProjects.html',
controller: 'adminProjectsCtrl'
})
.state('adminprojectsdetails', {
url: '/adminprojects/:id',
templateUrl: 'views/adminProjectsDetails.html',
controller: 'adminProjectsDetailsCtrl'
})
adminprojects view contains a list with ui-sref links. eg
<li><a ui-sref="adminprojectsdetails({id: project.id})" href="/adminprojects/1">Project 1</a></li>
If I click this link for example adminprojects/1 the adminProjectsDetails.html view is shown correctly. However if I refresh this page or navigate directly to this url then the view does not load.
This however works as expected if I have html5 mode set to false;
In express I have this
router.get('/*', function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
Controller are just pretty much boilerplate for now:
angular.module('jhApp')
.controller('adminProjectsCtrl', function($scope, projects) {
$scope.projects = projects.items;
});
and
angular.module('jhApp')
.controller('adminProjectsDetailsCtrl', function($scope, $stateParams) {
console.log($stateParams);
});
Any ideas why this is not working?
Did you create your project generator-angular ?
If so put <base href="/"/> inside your HEAD above all other elements.
Generator angular create index.html using relative paths for src folders like :
<script src="xxx/yyy.js"/>
When you refresh the page , browser looking for /adminprojects/xxx/yyy.js (.css , *) file which is not found. Because of that you can get lots of script and style errors. Using base tag fixes that problem.
Or simply just change your all src locations to "xxx/yyy." -> src="/xxx/yyy."
I know you guys are going to say "It's duplicated" but it doesn't work for me.
I'm doing exactly the same thing and here's what happens.
This is my config code:
portfolioApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller: 'portfolioController',
templateUrl: 'partials/home.htm'
})
.otherwise({redirectTo: '/home'});
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
});
The URL without the locationProvider and setting path to "/" instead of "/home" would be:
http://localhost:8080/portfolio/#/
Okey, i would like to remove the hashtag and the "portfolio" path so that way it would be:
http://localhost:8080/home
With the config i've posted, it does it (the first time i refresh). But what happens? happens that if I refresh the page again with the new path... i get a 404 Tomcat Error.
In the first refresh when i write localhost:8080/portfolio and the path gets converted into "/home", I get in the console an error saying that the "partials/home.htm" can't be found 404.
So either way, it can't read my partial, and then when I refresh everything is broken.
How can I solve this? what am I doing wrong?
Make sure your including these to scripts in the header of your HTML document Where you are implementing your module. The two provided below are for implementing the most current version of angular as well as the most current version of the angular route script:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.js"></script>
Make sure your injecting ngRoute into your module, here's an example of mine:
angular.module('controller', ['ngRoute','ngResource', 'ngCookies', 'ngSanitize'])
Here is an example of my config block, make sure you inject both routeProvider and locationProvider:
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: '../partials/member.php',
controller: 'Member',
access: 'member'
})
.when('/leaderboard', {
templateUrl: '../partials/leaderboard.html',
controller: 'Leaderboard',
access: 'member'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}])
If your doing all of this and it still doesn't work post a plunker of your code. Thanks.