javascript - 如何使失败的路由解析 promise 加载不同的模板 URL？

Question

学习 Angular 并遇到一个问题，我似乎找不到“好的”答案。我一直在关注official Tutorial并与我正在处理的项目有类似的设置。

电话详细信息的 $routeProvider .when 案例根据在电话列表页面中单击的电话名称获取特定的 .JSON 文件。问题是，如果您输入的电话名称没有关联的 .JSON 文件，路线仍会继续并显示空白页面。我正在尝试找出如何防止这种情况发生。

我已经为 .when 路由添加了解析。但是，我只能阻止 View 更改或使用 $location.path 重定向。这些看起来都不理想。

如何为没有 JSON 文件的手机显示“404 页面” View ？在我的脑海中，如果 GET 请求响应 404，我会显示不同的 templateUrl，但似乎无法让它工作。

任何帮助都会很棒!

这是我到目前为止得到的代码:

我的路线处理。

.when('/game/:Game', {
    templateUrl: 'views/game-detail.html',
    controller: 'GameDetailCtrl',
    resolve: {
      myData: ["Games", "$location", "$q", "$timeout",'$rootScope', function(Games, $location, $q, $timeout,$rootScope) {
        var def = $q.defer();

        var path = $location.path().toString().substring(6);

          // Games service
         Games.get({gameName: path}, function(game, s) {

          }).$promise.then(
            function(data) {
              // found game data 
              def.resolve(data);
            },
            function(error) {
              // couldn't find JSON file
              def.reject(error);
            }
          );

        return def.promise;
      }]
    }
  }).when('/pageNotFound', {
    templateUrl: 'views/error.html'
  })

根范围路由更改错误监听器:

 $rootScope.$on("$routeChangeError",
  function(event, current, previous, rejection) {
    console.log("failed to change routes");
    //$location.path('/pageNotFound');
  });

Answer 1

好吧，你真的不会那样做，在这种情况下你要做的就是让你的模板 HTML 包含成功和失败场景的模板，并在内部包含一个 ng-switch 来翻转状态。调用失败或成功。

此外，我认为如果您也尝试从指令中复制这个想法，它也会起作用: Angular.js directive dynamic templateURL