Javascript 将AngularJS与工厂和控制器一起使用

我正在努力做到以下几点：

当用户访问“

localhost/people/：id

”时，有关相应人员的信息将从MongoDB获取并通过Angular显示

我有我的api，它工作得非常好，我已经仔细检查过了

我正在使用最新的AngularJS（1.4.9）和新路由器（angular new Router或ngNewRouter）

我有一个角度模块：

var personModule = angular.module('app.personDetailed', []);

工厂：

personModule.factory('personService', ['$http', function($http) {
  return {
    get : function(id) {
      return $http.get('/api/people/' + id);
    }  
  }  
}]);

以及控制器：

personModule.controller('PersonDetailedController', ['$routeParams', '$scope', 'personService', PersonDetailedController]);

function PersonDetailedController($routeParams, $scope, personService) {

  var id = $routeParams.id;

  personService.get(id).then(function(res) {   
    $scope.item = res.data;  
  });
}

所有这些都应显示在此视图中：

<div data-ng-controller="PersonDetailedController">
  <h2>{{ item }}</h2>
</div>

---

新路由器似乎去掉了

$scope

，而是绑定到模板中的控制器实例

看起来您应该改用

这个

personModule.controller('PersonDetailedController', ['$routeParams', 'personService', PersonDetailedController]);

function PersonDetailedController($routeParams, personService) {
    var personDetailed = this,
        id = $routeParams.id;

    personService.get(id).then(function(res) {   
        personDetailed.item = res.data;  
    });
}

和您的视图（不要使用
ng控制器
）

{{personDetailed.item}
文档似乎表明您应该使用“控制器为”格式（即，无
$scope
）
personModule.controller('PersonDetailedController', ['$routeParams', 'personService', PersonDetailedController]);

function PersonDetailedController($routeParams, personService) {
    var personDetailed = this,
        id = $routeParams.id;

    personService.get(id).then(function(res) {   
        personDetailed.item = res.data;  
    });
}

<h2>{{ personDetailed.item }}</h2>