2

I created a login page for authentication. Based on the result of authentication, it redirects to different pages.

//controller.js

app.controller("LoginCtrl", ['$scope', '$location', 'loginFactory', function($scope, $location, loginFactory){
    $scope.authenticate = function() {
        loginFactory.login($scope.username, $scope.password)
        .then(function(response) {
            $location.path('/home');
        }, function errorCallBack(response) {
            console.log("Failed auth");
            $location.path('/login');
        });
    }
}]);

The app is defined in the following config.js together with routing. //config.js

var app = angular.module('ristoreApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
        .when('/', {
            redirectTo: '/home'
        })
        .when('/login', { 
            templateUrl: 'views/login.html', 
            controller: 'LoginCtrl' 
        })
        .when('/home', { 
            templateUrl: 'views/home.html', 
        })
        .otherwise({ 
            redirectTo: '/login' 
        });
});

The structure of files:

root/
    js/ -- config.js
        -- authentication/ -- controller.js
    views/ -- home.html
           -- login.html

When I submit the login form, instead of redirecting to "http://127.0.0.1:8081/views/login", it redirects to "http://127.0.0.1:8081/views/login#/login". Plus "http://127.0.0.1:8081/login" returns 404.

I start node.js under root. From the "network" tab in Chrome, it shows "config.js" is loaded. Why doesn't the routing work?

ddd
  • 4,665
  • 14
  • 69
  • 125

1 Answers1

4

If you do not want to use the # in angular routing, you need to enable Html5 mode.

var app = angular.module('ristoreApp', ['ngRoute']);

app.config(function ($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
        .when('/', {
            redirectTo: '/home'
        })
        .when('/login', { 
            templateUrl: 'views/login.html', 
            controller: 'LoginCtrl' 
        })
        .when('/home', { 
            templateUrl: 'views/home.html', 
        })
        .otherwise({ 
            redirectTo: '/login' 
        });
     $locationProvider.html5Mode(true);
});

if that is not working, you may have to set your base on the pages by putting this in the head section.

<base href="/">
Dylan
  • 1,068
  • 12
  • 25
  • I added `$locationProvider.html5Mode(true);` in config and put `` in every html. Now it redirects to "http://127.0.0.1:8081/home" but it does not load "views/home.html". – ddd May 03 '16 at 18:48
  • Where is your app.js or whatever you named that file above? If it's in a folder, you need to change your template url. Sounds like your template is not loading correctly as the path is incorrect. – Dylan May 03 '16 at 19:11
  • The file is config.js inside js/ folder. See my folder structure in original post. – ddd May 03 '16 at 19:18
  • change your templateUrl to something like this templateUrl:'./views/login.html' – Dylan May 03 '16 at 19:19
  • Still getting 404 for "127.0.0.1:8081/login" after I changed templateUrl – ddd May 03 '16 at 19:24
  • maybe its help you : http://stackoverflow.com/questions/18584703/angularjs-routeprovider-route-not-found?rq=1 – oguzhan00 May 03 '16 at 19:45