Category Archives: angularjs-routing

.htaccess doesn’t redirect (version 1.6.10)

To clean my URL from the additional #!, I followed these steps:

  1. $locationProvider.html5Mode(true);
  2. <base href="/">
  3. And then I changed my hrefs to be like this /home

The links worked with me, but the problem is when I write the url manually or reload the page.
It returns an error: Cannot GET /home.

According to many posts I saw on this site, I added many different .htaccess files, and this was the latest one:

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 pattern is file and file doesn't exist, send 404
RewriteCond %{REQUEST_URI} ^(\/[a-z_\-\s0-9\.]+)+\.[a-zA-Z]{2,4}$
RewriteRule ^ - [L,R=404]

# otherwise use history router
RewriteRule ^ /index.html

But none of them worked.
version => 1.6.10

Redirect to main page when comming from outside url angularJS

I have this angularJS routing:

angular.module('diam8App', ['ngRoute'])
.config(['$routeProvider','$locationProvider',
  function($routeProvider,$locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'main.html'
      }).
      when('/calculator/', {
        templateUrl: 'calculator.html',
        controller: 'calculatorCtrl'
      }).
      when('/contact/', {
        templateUrl: 'contact.html',
        controller: 'contactCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }])

Everything works fine, but when I'm trying to get subpage directly by url, for example mydomain.com/contact, then I'm recieving HTTP 502. I think routing doesn't work, when accessing from outside.

So my question is: is there any way to redirect user to main page, when he comes from different page (routing from main must work as it works now)? Perhaps .htaccess or other angular configuration is needed?

Proper way to dynamically create content for URL where file does not exist on server

When I used angular, the router could catch any url that the user request and load the proper template. For example, if a user went to mysite.com/blog the angular router could provide the template even though there is no file called blog on my server.

I'm now working without angular on a web app that creates a page for every user using their username as the URL (like twitch.tv or twitter). I have found that loading mysite.com/username loads the index.php and I can grab the username out of the URL using window.location.pathname and then load content for that user. I'm honestly not quite sure why this is working. My .htaccess file consists of: ErrorDocument 404 / but if it redirects on File Not Found, why does the url remain with /username appended?

My method seems hack-y, and sometimes I get errors that say /username was not found, and also the mysite.com/username doesn't save as a suggestion of recently visited sites, I'm guessing because it never found the document.

Can someone explain more on how this redirecting works, and what the best practice is for this type of dynamic routing?

Configure apache server to pick up the HTML5 base tag href for angularjs one page app

I read at least a dozen of posts about it, and found something like

[code autolinks=”false”]
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^weiadesigner/pg-dev
RewriteRule ^subdir/(.*)$ http://weiadesigner/pg-dev/$1 [L,R=301]
[/code]

it suppose to (I think), redirect from any attempt to access weiadesigner/pg-dev to http://weiadesigner/pg-dev/$1. However, still nothing happen, I still receive the 404 Not Found issue.

I access the WAMP server through my computer name which is weiadesigner with chrome. /pg-dev is the folder where my site is. I try to tell the Apache to redirect all subdomain access, for example weiadesigner/pg-dev/events, will respond with AngularJS router instead of the 404 Not Found from the server, because I am using the HTML base tag that is setup in the index.php in its with

<base href="/pg-dev/">
  <base target="_blank" href="http://weiadesigner/pg-dev/">

I am having a big hard time to find any valid solution on this.

Configure apache server to pick up the HTML5 base tag href for angularjs one page app

I read at least a dozen of posts about it, and found something like to setup in my site's root folder (which is www/pg-dev). htaccess file:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^weiadesigner/pg-dev
RewriteRule ^subdir/(.*)$ http://weiadesigner/pg-dev/$1 [L,R=301]

it suppose to (I think), redirect from any attempt to access weiadesigner/pg-dev to http://weiadesigner/pg-dev/$1. However, still nothing happen, I still receive the 404 Not Found issue.

I access the WAMP server through my computer name which is weiadesigner with chrome. /pg-dev is the folder where my site is. I try to tell the Apache to redirect all subdomain access (meaning, if someone access weiadesigner/pg-dev/events in a url bar in a browser) , for example weiadesigner/pg-dev/events, will respond with AngularJS router instead of the 404 Not Found from the Apache server, because I am using the HTML base tag that is setup in the index.php in its with

<base href="/pg-dev/">
  <base target="_blank" href="http://weiadesigner/pg-dev/">

I am having a big hard time to find any valid solution on this.

Routing with Polymer App-Router and Apache

I understand that I need to point all URI requests to the the root URL in order for the app-router to work. Ex: URLs like /services should point to /. Also, if the base URL is /v3, the sub URLs would be like /v3/services

And I've been trying apache rewrite stuff for a couple of weeks now and no luck so far.

This is the closest I could find. But even this results in a redirect loop.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$      /$1  [NC,R,NE]

AngularJS routing issue with apache

AngularJS HTML5 mode does a full page reload on manual url change



I am using AngularJS with ui.router. I have seen a behaviour difference in Hashbang and HTML5 mode and I wonder if it can be changed/prevented. When using

$locationProvider.html5Mode(true);

a full page reload happens when I manually change the url in the address bar. For example, if I am currently on the url

http://example.com/post/5467777

And manually change it to

http://example.com/post/5464777

a pull page reload happens, and then the correct state is loaded.

If I don't use HTML5 mode, a full page reload doesn't happen, instead the state is directly loaded (which is much faster of course) when changing the url from

http://example.com/#/post/5467777

to a different one. My server-side configuration for HTML5 mode looks as follows:

# 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.php [L]

I thought AngularJS could intercept those URL changes as well. If possible, how can I make my page not reload when manually changing the url in HTML5 mode?

Thanks

AngularJS HTML5 mode does a full page reload on manual url change



I am using AngularJS with ui.router. I have seen a behaviour difference in Hashbang and HTML5 mode and I wonder if it can be changed/prevented. When using

$locationProvider.html5Mode(true);

a full page reload happens when I manually change the url in the address bar. For example, if I am currently on the url

http://example.com/post/5467777

And manually change it to

http://example.com/post/5464777

a pull page reload happens, and then the correct state is loaded.

If I don't use HTML5 mode, a full page reload doesn't happen, instead the state is directly loaded (which is much faster of course) when changing the url from

http://example.com/#/post/5467777

to a different one. My server-side configuration for HTML5 mode looks as follows:

# 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.php [L]

I thought AngularJS could intercept those URL changes as well. If possible, how can I make my page not reload when manually changing the url in HTML5 mode?

Thanks

Redirect (routing) not working when i go back in apache server with angular app running

guys! I've just set up an Apache server on my old netbook running ubuntu, and i've tried porting a simple AngularJS app from another server. When i navigate to http://myserver.com/home.html, everything works as expected (it redirects me to .../home.html#/mancaruri), but when i go to /home.html#/mancaruri/1, for example, and then i try to go back (click on ), it redirects me to the folder root (the file navigation thinggie), not ../home.html#/mancaruri. I do suspect it's got something to do with the server, as the app works as expected on the server i'm porting from.

Sorry if this is a dumb/obvious question, but i'm not familiar with server/linux terminology, i'm pretty much an advanced noob in web tech, too, so i don't really know what to search for.

Here's the routing code from Angular. The apache2 edition is 2.4.7 and it's pretty much out of the box (haven't modified anything in the .conf file).

angular.module('restaurantApp', [
'restaurantApp.controllers',
'ngRoute'
]).config(['$routeProvider', function($routeProvider){
$routeProvider.
    when("/mancaruri", {templateUrl: "partials/mancaruri.html", controller: "foodsController"}).
    when("/mancaruri/:id", {templateUrl: "partials/mancare.html", controller: "foodController"}).
    otherwise({redirectTo: "/mancaruri"});
}]);

AngularJS multilevel routing reload issue

I am working on AngularJs with HTML5 mode enabled for SEO friendly URLs, its working fine with the in app navigation but on reload.

Have written below .htaccess but still facing the same issues for nested navigation

RewriteEngine On
RewriteBase /akv/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpeg|gif|)
RewriteRule (.*) index.html [L]

Its working fine for fist level navigation like base/Blog or base/Portfolio but base/Blog/MyBlogTitle/type/post/id/1

Is there is any way to fix it.

Thanks in advanced.