Category Archives: angularjs-ng-route

angular route not working on server apache2

I have an angular app that works perfectly in localhost. I uploaded to a server and the layout-blade works perfectly, but it can not find the index page that goes in the ng-view. It just returns a 404 error.

Here is the approutes.js

angular.module('appRoutes', []).config(['$routeProvider','$locationProvider', '$httpProvider',function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider
  .when('/', {
    templateUrl: '/partials/index',
    controller: 'MainController'
  })

The index is in /resources/views/partials

The layout blade is in /resources/views

The head of that html has

I am in an apache2 server in an ubuntu machine.

Any ideas?

edit: This is my .htacess

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews
</IfModule>

RewriteEngine On

# Redirect Trailing Slashes...
RewriteRule ^(.*)/$ /$1 [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>

Angular Route with multiple slashes override folder path

I have an Angular app using ngRoute module along with HTML5 mode pushState for cleaner URL.

app.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);

$routeProvider
    //Route for home page
    .when("/", {
        templateUrl: "templates/main.html",
        controller: "imageController",
    })
    //Route for about page
    .when("/me", {
        templateUrl: "templates/me.html",
        controller: "imageController",
    })
    //404 error
    .when("/404", {
        template: "",
        controller: "imageController",
        title: "404 Error",
    })
    //Default route to /
    .otherwise({
        redirectTo: "/404",
    });
});

I have changed my .htaccess file to rewrite trailing slashes ("/").

RewriteEngine on
RewriteBase /

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d 

RewriteRule ^ - [L]

# Redirect urls without a trailing slash
RewriteRule ^(.*)/$ $1 [L,R=301]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

This works great for one trailing slash, for e.g. 'http://example.com/me/' updates to 'http://example.com/me' and gets routed accordingly.

However, the routing breaks when there are multiple slashes, for e.g. 'http://example.com/me/foo' routes to an incomplete page instead of redirecting to '/404'. How do I resolve this so that if '/me/foo' route doesn't exist, it gets redirected to '/404'.

angularjs ngroute with html5mode(true) on apache fails

I am trying to use ngroute with $locationProvider.html5Mode(true) and a htaccess rewrite, but I can't get it to work.

When I try to access for example http://localhost/angular_blog/article/someTitle I get the following error in my console:

blogApp.js:1 Uncaught SyntaxError: Unexpected token <
blogCtrl.js:1 Uncaught SyntaxError: Unexpected token <
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=blogApp&p1=Error%3…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4138r @ angular.js:323g @ angular.js:4099ab @ angular.js:4025d @ angular.js:1452uc @ angular.js:1473Jd @ angular.js:1367(anonymous function) @ angular.js:26304a @ angular.js:2762c @ angular.js:3032

I think I've done everything various tuts I've been able to find said, but then it should work, so obviously something is missing. I've included my code below, any help or pointers will be greatly appreciated.

HTML

<!DOCTYPE html>
<html lang="en" data-ng-app="blogApp">
<head>
	<meta charset="UTF-8">
	<title>Test</title>

	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js"></script>
	<script type="text/javascript" src="./assets/js/blogApp.js"></script>
	<script type="text/javascript" src="./assets/js/blogCtrl.js"></script>

	<base href="/angular_blog/">

</head>
<body>
	<main data-ng-view></main>
</body>
</html>

JS - blogApp.js

var blogApp = angular.module('blogApp', [
    'ngRoute',
    'ngSanitize',
    'blogCtrl'
]);

blogApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
                when('/page', {
                templateUrl: './assets/templates/page.html',
                controller: 'pageCtrl'
            }).
                when('/page/:pagePermaLink', {
                templateUrl: './assets/templates/page.html',
                controller: 'pageCtrl'
            }).
                when('/article', {
                templateUrl: './assets/templates/article.html',
                controller: 'articleCtrl'
            }).
                when('/article/:articlePermaLink', {
                templateUrl: './assets/templates/article.html',
                controller: 'articleCtrl'
            }).
            otherwise({
                redirectTo: '/page',
            });
        $locationProvider.html5Mode(true);
    }]);

HTACCESS

# BEGIN Pretty URL
<IfModule mod_rewrite.c>
	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]
</IfModule>
# END Pretty URL