Question

在单页应用程序上工作一切正常但在想要在未找到:username时设置404页面或在浏览器中加载任何意外网址时遇到困难请检查下面的代码

controller.js

    var myApp = angular.module('assignment', ['ngRoute']);

    myApp.service('userData', ['$http', function($http){
      return{
        userslist : function(){
            return $http({'url' : 'js/data.json', 'method' : 'GET'}).then(function(response){
            return response.data;
          }, function(data){
            console.log('some error')
          })
        }
      }
    }]);


      myApp.config(function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'user-list.html',
            controller: 'users'
          }).
          when('/:username', {
            templateUrl: 'detail.html',
            controller: 'userdetail'
          }).
          otherwise({
            redirectTo: '/404.html' /*>>>>>>Here is the problem<<<<<<*/
          });
      });



    myApp.controller('userdetail', ['$scope', '$routeParams', 'userData', function($scope, $routeParams, userData){

var selectedUser = $routeParams.username;
selectedUser = selectedUser.replace(/-/g, ' ');



  userData.userslist().then(function(data){
    $scope.items = [];

    angular.forEach(data.data.bst_users, function(item){
          if(item.name == selectedUser) {
             $scope.user = item;
           };

    })

  })
}])



    myApp.controller('userdetail', ['$scope', '$routeParams', 'userData', function($scope, $routeParams, userData){
    console.log($routeParams.username);

    userData.find($routeParams.username, function(found){

        $scope.user = found;
    })

    console.log(scope.user)

    }])


    /*******Filters*******/

    myApp.filter('removeSpace',function() {
        return function(input) {
            if (input) {
                return input.replace(/\s+/g, '-');    
            }
        }
    });

Answer 1

由于您将/:username声明为路由，因此它可以匹配/之后的任何内容，这意味着404路由实际上并没有做任何事情，并且在某种意义上用户名路由充当您的路径全能路线。这是一种奇怪的情况，因为你无法真正定义常规404路线。但是你可以做的是/404路由，如果/:username没有解析给用户，请将它们重定向到/ 404。这是我能提出的最有效的方法，但我保证有更好的方法。

Answer 2

@Jordan指出了一个明确的问题。

我建议您将用户详细信息路径更新为以下内容：

when('/user/:username', {
  templateUrl: 'detail.html',
  controller: 'userdetail'
})

因此/random_username和/unmatched_path之间没有混淆。

使用角度js中的$ routeProvider设置404页面

2 个答案: