javascript - 基于 ngRoute 和 ReSTLike API 创建动态 View

标签 javascript angularjs angular-routing

我已经设置了一个小型 HTML 页面,其中包含 ngView 指令,在调用 ReSTLike API 后,单击任何导航链接时,该页面应该会更新。这一点似乎有效,特别是当请求中没有可使用的参数时。

一旦我尝试添加参数,它就会失败并出现以下错误:

 TypeError: undefined is not a function
at Object.<anonymous> (http://localhost:8080/dashboard/js/factorys.js:11:16)
at Object.invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3965:17)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3807:37
at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3929:39)
at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3956:13)
at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:3976:23)
at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:7315:28)
at link (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.js:907:26)
at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:6752:13)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js:6146:13) <div class="container ng-scope" ng-view="">

我的 Angular 脚本如下所示:

Controller .js:

var dashboardControllers = angular.module('dashboardControl',['ngRoute','dashboardFactory']);
dashboardApp.controller('PlayersController', function ($scope, $routeParams, Player) {
    $scope.players = Player.findAll();
});
dashboardApp.controller('PlayerDetailsController', function ($scope, $routeParams, Player) {
    $scope.playerId = $routeParams.playerId;
    $scope.player = Player.get();
});
dashboardApp.controller('OverviewController', function ($scope, $routeParams, Overview) {
    $scope.overview = Overview.query();
});

工厂.js:

var dashboardFactories = angular.module('dashboardFactory',['ngResource']);
dashboardFactories.factory("Overview", ['$resource',
    function ($resource) {
        return $resource('webresources/overview/', {}, {
            query: {method: 'GET', isArray: false}
        });
    }]);
dashboardFactories.factory("Player", ['$resource',
    function ($scope, $resource) {
        return $resource('webresources/player/:playerId', {}, {
            findAll: {method: 'GET', isArray: true},
            get: {method: 'GET', params: {playerId: $scope.playerId}, isArray: false}
        });
    }]);

概述 Controller 工作,它是我似乎收到错误消息的播放器 Controller 。

最佳答案

我创建了working example here

NOTE: It uses UI-Router instead of ngRoute... which I guess is really the right way... but the concept is exactly the same.

首先我们定义资源“player”:

.factory('player', ['$resource', function($resource){

   return $resource('player:playerId.json', {}, {
     findAll: {method: 'GET', isArray: true},
     get: {method: 'GET', isArray: false}
    });

}]) 

为什么我们使用这样的网址player:playerId.json?只因为那个笨蛋。我们从 parametrized URL template 中获利。 ...这允许在 plunker 中为列表提供 player.json ,并为每个玩家提供 player + playerId +.json

状态定义:

// States
$stateProvider
  .state('list', {
      url: "/list",
      templateUrl: 'tpl.list.html',
      controller: 'PlayerListCtrl', 
      resolve : { 
        list : ['player', function(player){return player.findAll();}]
      }
  })
  .state('player', { 
      url: "/player/:playerId",
      templateUrl: 'tpl.player.html', 
      controller: 'PlayerCtrl', 
      resolve : { 
        player : ['player', '$stateParams'
        , function(player, $stateParams){
          return player.get({playerId: $stateParams.playerId});
        }]
      }
  })

最重要的部分是:

player : ['player', '$stateParams'
, function(player, $stateParams){
  return player.get({playerId: $stateParams.playerId});
}]

因为我们让 Angular 将 $stateParams 注入(inject)到我们的解析中。然后,我们获取 playerId 参数并将其传递到模板化 URL - 因此它将生成 player1.jsonplayer2.json,...

In real life it would url like this 'server/api/resource/:id' - but the logic will be the same.

这些是消耗 Controller :

.controller('PlayerListCtrl', ['$scope', 'list', function ($scope, list) {
  $scope.list = list;
}])
.controller('PlayerCtrl', ['$scope', 'player', function ($scope, player) {
  $scope.player = player;
}])

检查一下here

关于javascript - 基于 ngRoute 和 ReSTLike API 创建动态 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28008275/

相关文章:

angular - 在 Angular 自定义错误处理程序中使用服务

Angular 路由器过渡动画有条件地左右滑动

angularjs - 在 Angular UI-Router 的动态 View 中添加一个 SEO 友好的 Url Slug

javascript - 使用 Team CIty 的 REST API 在构建数组中提取每个构建的更多信息

Javascript 倒计时器在 Safari 中不工作

angularjs - 在 rtl 和 ltr 中自动更改类别

javascript - Angular 错误 : [ng:area] and [$injector:unpr] when import ngUpload

javascript - 我如何在 jquery 中使用它来调用元素

javascript - CSS 转换在 IE-11 中不起作用

javascript - AngularJS ng-重复嵌套 JSON 数据