AngularJS $ routeProvider：ルーティングが機能しません

Question

私は認証用のログインページを作成しました。認証の結果に基づいて、別のページにリダイレクトされます。

//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'); 
     }); 
    } 
}]); 

アプリは一緒にルーティングして以下config.jsの中で定義されています。 //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' 
     }); 
}); 

ファイルの構造：私は、ログインフォームを送信する代わりに、 "http://127.0.0.1:8081/views/login" にリダイレクトする

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

、それは "http://127.0.0.1:8081/views/login#/login" にリダイレクトします。プラス "http://127.0.0.1:8081/login"は404を返します。

rootの下でnode.jsを開始します。 Chromeの[ネットワーク]タブには、「config.js」がロードされていることが表示されます。ルーティングはなぜ機能しないのですか？

Answer 1

角度ルーティングで＃を使用しない場合は、Html5モードを有効にする必要があります。

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); 
}); 

これが機能しない場合は、ヘッドセクションにこれを設定してページ上にベースを設定する必要があります。

<base href="/">