Category Archives: angularjs

.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

Setting up vhost for various web applications on AWS

On my AWS instance, I have the following setup

/var/www/html/admin <--- angularjs application
/var/www/html/api <--- angularjs application
/var/www/html/main <--- django application

How do I make them all accessible as "individual sites"? For example, browsing to:

http://ec2-xx-xx-xxx-xxx.eu-west-2.compute.amazonaws.com/admin
http://ec2-xx-xx-xxx-xxx.eu-west-2.compute.amazonaws.com/api
http://ec2-xx-xx-xxx-xxx.eu-west-2.compute.amazonaws.com/main

Should each be like going to a self contained site.

Right now going to http://ec2-xx-xx-xxx-xxx.eu-west-2.compute.amazonaws.com/main for instance (which is an AngularJS application), I see errors like this:

Failed to load resource: the server responded with a status of 404 (Not Found)

I logged onto the site and noticed that it thinks the assets live a directory above as opposed to in the "main" subdirectory. I can understand that I need to set up vhosts somehow... where do these go on an AWS instance and would they look like this?

<VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName main.com
    ServerAlias www.main.com
    DocumentRoot /var/www/html/main

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName main.com/api
    ServerAlias www.main.com/api
    DocumentRoot /var/www/html/api

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin [email protected]
    ServerName main.com/admin
    ServerAlias www.main.com/admin
    DocumentRoot /var/www/html/admin

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

AngularJS HTML5 mode with UI Router on apache

I had turned on the html 5 mode on my angular(1.5.8) app a few days back with this code:

$locationProvider.html5Mode({enabled:true,requireBase:true}).hashPrefix('!');

Later I read configuring apache server for html5 mode with ui-router.

After doing these settings, I am facing 2 problems:

  1. Browser reload, redirects to home page for every deep nested app link.
  2. Any link coming from outside(via email) always redirects to the homepage.

I have played with

  1. mod_rewrite as-in using <Directory>, FallbackResource on apache.
  2. changing paths to assets in the index.html (using relative URI and full qualified URI)
  3. adding/removing the base HTML tag. (trying options like '/', '<sitename>')

But I am yet to overcome these problems.

Here is the detailed setup on my localhost:

  1. I am deploying to apache via Virtual Host(and not .htaccess).
  2. My deployment directory is /Users/<name>/Sites/<sitename> (I am on mac OS)
  3. My index.html in-parts is as follows:

        <head>
          <base href="/">
          <!-- SPELLS 1-->
            <script src="/js/jquery.min.js"></script>
            <script src="/js/bootstrap.min.js"></script>
            <script src="/js/angular.min.js"></script>
            <!-- more scripts / css et al -->
        </head>
    
  4. My Apache(2.4.28) config is as follows:

        <VirtualHost *:80>
        ServerName <servername>
        DocumentRoot "/Users/<name>/Sites/<sitename>"
        #LogLevel debug
        LogLevel debug rewrite:trace6
        RewriteEngine on
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
        RewriteRule ^ - [L]
        RewriteRule ^ index.html [L]
    
        Options Indexes FollowSymLinks
        Require all granted
    
        </VirtualHost>
    

Can anyone help me with the exact setup?

.htaccess Facebook agent redirect not working

We are using angularjs for our web application. As Facebook share does not allow javascript debugging, we have tried to add new php page for redirection where we have used og tags. But the issue is when we try to redirect the page using .htaccess, it is not redirecting.

Here is the .htaccess code:

<ifModule mod_rewrite.c>
    RewriteEngine On

    RewriteRule    ^$    webroot/    
    RewriteRule    (.*) webroot/$1    

    RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9](+http://www.facebook.com/externalhit_uatext.php)|Twitterbot|Pinterest|facebot/[0-9]|Google.*snippet)
    RewriteRule ^(/videos/view)/(.*)$ http://www.cinimaja.com/static.php?id=$1 [NC,L]
</ifModule>

Get Node.js to receive requests for website hosted with Apache Tomcat [on hold]

I have an Angular.js website that's hosted on a Windows server that runs Apache Tomcat. However, even though I would like to continue to serve the files using Apache, I would also like to have a Node.js API that would receive some of the requests in order to integrate a MongoDB database with Mongoose.

Event though I've managed to run Node.js on the server in the website's folder, the requests are still directed to Apache.

Any ideea on how to configure things so that both servers (running on the same machine) can receive requests?

Thanks a bunch!

laravel/Angular app works perfectly locally but I’m getting a 500 Server Error on godaddy

laravel-angular on same server but in different different directory, angular works perfectly but Api call from angular to laravel routes,giving 500 error

Directory structure

api--laravel project

app--angular project

localhost url:http://myproject.com/api/public/index.php/api/v1/user/signin live url:http://myprojectlive.com/api/public/index.php/api/v1/user/signin

localhost url gives perfect result but same url for live domain gives 500 error

I can access picture from laravel project's public folder url:myprojectlive.com/api/public/my_pictures/[email protected]

but routes are not working

htaccess force https across domain with Angular app in subdirectory

I am a bit out of my depth when it comes to most server tasks so bear with me on my descriptions and understanding...

I am trying to use htaccess to force https across domain with Angular app in a subdirectory.

Project structure

/ public
  - .htaccess
  - index.html
  - styles.css
  - main.js
  - etc...
  / admin (angular app)
    - .htaccess
    - index.html
    - etc...

I am trying to force https across the whole domain while still being able to deep link to the /admin (angular) routes.

/public/.htaccess

RewriteEngine On
RewriteCond %{HTTP_HOST} ^site\.co\.uk$ [OR]
RewriteCond %{HTTP_HOST} ^www\.^site\.co\.uk$
RewriteRule ^(.*)$ https://www.site.co.uk/$1 [R,L]

/public/admin/.htaccess

RewriteEngine on
RewriteOptions inherit
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]

All /admin routes are still accessible via plain http and are not redirected. I have tried various combinations of ${SERVER_PORT} & ${HTTPS} but these never trigger. It always seems to return port 80 and https off and causes "too many redirects".

How to force an update/refresh of a Single-page application(SPA) in angularjs

I have an application that is currently running in production and I need to update application twice or maybe more in a month. Now since it is a Single Page Application so when index.html is loaded it loads all the JS files. And also for controllers i am using lazy load and once a controller is loaded it will not load js file again. Here's what is happening Some users has opened my web application on their mobile phone and they seems to not refresh the website and once i send new files to my server and since they are not refreshing they will not get new JS files and a new server response might crash the application.

Now I have implemented some ideas and i like to know if it will work:

In my angularjs APP's .htaccess and my API Server's .htaccess i have added a header:

<IfModule mod_headers.c>
    Header add appVersion "1.2"
</IfModule>

Now i will receive this header whenever i am getting anything from API server or frontend(js, html, css, images)

now in my index.html i have defined a variable something like

var frontendVersion = 1.2

I have a http Response interceptor that will look for each reponse and i have done something like this

myAPP.factory('httpRespInterceptor', function () {

    return {
        response: function (response) {
            var appVersion = response.headers('appVersion')
            if(appVersion == frontendVersion) {
                console.log('ok')
            } else if (appVersion != null) {
                location.reload();
            }

            return response;
        }
    };
});

I have added a null check because when i am loading a same view twice I am getting Empty Header Object and in my console i don't see any request that is being sent to the server..don't have a clue why this is happening if someone can shed a light it will be grateful :)

so whenever I will make a change in my code/update the application i will change my header appVersion to 1.3 and my index.html variable to var frontendVersion = 1.3

So in this situation i think it will work. Please let me know if this approach is fine.

Thanks,

Not able to perform PUT and DELETE from angular js app

THis is my .htaccess file.

RewriteEngine On

# Some hosts may require you to use the `RewriteBase` directive.
# If you need to use the `RewriteBase` directive, it should be the
# absolute physical path to the directory that contains this htaccess file.
#
# RewriteBase /

# Cross domain access
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, authorization"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
Header add Access-Control-Request-Origin "*"
Header add Access-Control-Request-Headers "origin, x-requested-with, content-type, authorization"
Header add Access-Control-Request-Methods "PUT, GET, POST, DELETE, OPTIONS"

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},last]

But when i tries to perform PUT request it gives me error like this.

:63342/web-wokoshop-partner/index.html?_ijt=vgfnsnd7c4g6l47qh3kt00i8c8#!/suppliers:1 XMLHttpRequest cannot load http://abcd.com/SupplierApi/v1/supplier/5. Response for preflight has invalid HTTP status code 404

This is How i am making request from angular

function updateSupplier(supplier, id) {
    var data = {
        name: supplier.name,
        mobile: supplier.mobile
    };

    var req = {
        method : 'PUT',
        url : REST_SERVICE_URI2 + '/' + supplier.id,
        data : JSON.stringify(data),
        headers : {
            'Content-Type' : 'application/json'
        }
    };


    $http(req).then(
        function(response) {
            alert('supplier updated.');
            console.log(data);
        },
        function(data) {
            consile.log(data);
            alert('update supplier error.');
            alert(data.statusText);

        });

}

What is the issue? Am I missing anything?