I am using Yeoman package manager to create an angular web application. this is my main controller:
'use strict';
angular
.module('resFourApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'ContactCtrl'
})
.otherwise({ redirectTo: '/' });
// use the HTML5 History API
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
which works fine if I access the app from the base directory but if I access it from the url and go to www.base.com/route I get a 404 error. Which I understand is because Angular is a client side app so there is nothing on the server to handle these requests. I have read a lot online about having to reroute with server or mod rewrites with apache, but I still have not gotten it working.
Things I have tried
Apache rewrite rules not being applied for angularjs
https://groups.google.com/forum/#!msg/angular/GmNiNVyvonk/mmffPbIcnRoJ
my .htaccess for apache web server:
# BEGIN angularJS
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) /index.html/#/$1
</IfModule>
# END angularJS
I've tried a few things with rewriting and couldn't get it to work but found a workable solution using redirection and the NE flag
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ #/$1 [NC,R,NE]
There seems to be quite a few other interesting links from this SO answer regarding the hash/ URL fragment: https://stackoverflow.com/a/15135130
Related
I using HTML5 urls on Angularjs for my single page application. I directed urls like localhost/project/page to index.php with htaccess code i found on the internet. If I am refreshing the page when a url like localhost/project/page/user occurs, the console seems to be in the localhost/project/page directory and my codes looks but doesn't work.
Screenshot:
(Project file is sosyalmedya)
My htaccess codes;
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.php [L]
And my angular codes;
app.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
$routeProvider.
when('/', {
templateUrl:'interpages/home.php'
}).
when('/home', {
templateUrl:'interpages/home.php'
}).
when('/notifications', {
templateUrl:'interpages/notifications.php'
}).
when('/messages', {
templateUrl:'interpages/messages.php'
}).
when('/search', {
templateUrl:'interpages/search.php'
}).
when('/profile', {
templateUrl:'interpages/profile.php'
}).
when('/profile/:user', {
templateUrl:'interpages/profile.php'
})
.otherwise({rediectTo:"/home"});
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true)
}])
How can i solve this problem? I thank you in advance for your helps.
Do you have the base element in you head?
<base href="/sosyalmedya/">
try this .htaccess:
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /sosyalmedya/index.php
for example
$routeProvider.
when('/', {
templateUrl:'/sosyalmedya/interpages/home.php'
}).
when('/home', {
templateUrl:'/sosyalmedya/interpages/home.php'
}).
when('/notifications', {
templateUrl:'/sosyalmedya/interpages/notifications.php'
}).
when('/messages', {
templateUrl:'/sosyalmedya/interpages/messages.php'
}).
when('/search', {
templateUrl:'/sosyalmedya/interpages/search.php'
}).
when('/profile', {
templateUrl:'/sosyalmedya/interpages/profile.php'
}).
when('/profile/:user', {
templateUrl:'/sosyalmedya/interpages/profile.php'
})
.otherwise({rediectTo:"/home"});
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true)
My app.js
app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'interests.html',
controller: 'InterestsController'
})
.when('/interests',{
templateUrl: 'interests.html',
controller: 'InterestsController'
})
.when('/subjects',{
templateUrl: 'subjects.html',
controller: 'SubjectsController'
})
.when('/prequalification',{
templateUrl: 'prequalification.html',
controller: 'PreQualificationController'
})
.when('/qualification',{
templateUrl: 'qualification.html',
controller: 'QualificationController'
})
.when('/personalinfo',{
templateUrl: 'personalinfo.html',
controller: 'PersonalInfoController'
})
.otherwise({
redirectTo : '/interests'
});
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
}]);
In index.html file. Path to index.html file: localhost:8080/cf/. All of the other views also resides with index.html
<base href="/cf/">
.htaccess file content(path to .htaccess file: localhost:8080/cf/.htaccess)
<ifModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ cf/index.html [L]
</ifModule>
Path to my project folder on server is: localhost:8080/cf. I have various rules in .htaccess file from other posts of stackoverflow but nothing is working. When even i reload or refresh the page, i get 404. With out refreshing and reloading everything is working fine. Please help!!!
Step 1: Add this in app config
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
Step 2: Add this in index.html file
<base href="/your-app-name">
Step 3: Add .htaccess file on root directory
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
Use
<base href="/cf">
in document "head" section.
Hope this helps!!
After enabling $locationProvider.html5Mode(true); and <base href="/" /> in the index.html routes began crashes after manual reload.
Looking up for solutions I found that .htaccess rules will fix this problem, but different configurations didn't help.
Maybe this is because my index.html is in the subdirectory /views/index.html
.htaccess:
Options +FollowSymLinks
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L] # /views/index.html doesn't work as well
</ifModule>
route config
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'AddTaskCtrl',
controllerAs: 'AddTask'
})
.when('/chat', { //this route breaks on manual refresh
templateUrl: 'chat.html',
controller: 'ChatCtrl',
controllerAs: 'chat'
})
}]);
step 1: use only $locationProvider.html5Mode(true);
step 2: Change your .htaccess
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
When index.html is start load point your app, or see more methods https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
My .htaccess looks like this:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^thesite\.com\.cp\-45\.webhostbox\.net$ [OR]
RewriteCond %{HTTP_HOST} ^www\.thesite\.com\.cp\-45\.webhostbox\.net$
RewriteRule ^/?$ "http\:\/\/www\.thesite\.com\/" [R=301,L]
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
My base URL is set to root in index.html:
<base href="/">
And I also have the following line of code in my AngularJS app configuration:
$locationProvider.html5Mode(true);
Despite all this, I am unable to get rid of a 404 when I try to directly access any page on my site without the # symbol in the URL. I can follow the links alright but once on a page, refreshing it returns a 404. Is there something I am missing in my rewrites?
Just in case it helps, my Angular app config looks like this (partial code below):
// create the module and name it asApp
var asApp = angular.module('asApp', ['ngRoute']);
// configure our routes
asApp.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
title: 'Learn Spanish with thesite | Unconventional tricks for the crazy learner',
templateUrl : 'pages/thesitehome.html?v=1.1',
controller : 'mainController'
})
// route for the about page
.when('/about', {
title: 'About thesite and its penchant for cunning Spanish learning tricks',
templateUrl : 'pages/aboutus.html?v=2',
controller : 'mainController'
})
// route for dictionary term
.when('/dictionary/:word2lookup', {
templateUrl : 'pages/dictionary.html?v=1',
controller : 'dictController'
})
// route for dictionary
.when('/dictionary', {
title: 'The thesite dictionary – Look up Spanish or English words in a jiffy',
templateUrl : 'pages/dictionary.html?v=1',
controller : 'mainController'
})
// route for the 404 page not found error
.when('/notfound', {
templateUrl : 'pages/404.html',
controller : 'mainController'
})
// route otherwise
.otherwise({
controller: 'mainController',
templateUrl: 'pages/404.html'
});
$locationProvider.html5Mode(true);
}]);
Any nudge in the right direction will be highly appreciated! Oh and the website in question is live just in case you wish to take a look and see the problem first-hand.
Try following tuts.
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
The basic routing method like below,
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
$locationProvider.html5Mode(true);
}]);
I want make user can access view1 by typing url "://host/view1" on browser. but this is not work..
By using $routeProvider and $locationProvider, if user click "href=/view1" this link, then
page routed host/view1.
But If user access directly to the url "://host/view1" it emit 404 error.
To make user can access /view1 directly by url, I have to remove html5Mode then, user can access by "://host/#/view1"
but How can I remove the # symbol!? not only just html5mode, the method user can access the page directly by typing that url.
Thanks. Yoshi
I create .htaccess file on DocumentRoot folder and add below
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
into .htaccess file.
that works as I expected!
ps.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
above two lines means if the file with the specified name in the browser doesn't exist, or the directory in the browser doesn't exist then procede to the rewrite rule below