Sample Angular-App 如何知道如何获取“项目”？答案

【问题标题】：How does Sample Angular-App know how to get the "projects"?Sample Angular-App 如何知道如何获取“项目”？
【发布时间】：2015-02-02 16:37:20
【问题描述】：

我正在关注 Pawel Kozlowski 和 Peter Bacon Darwin 的热门 Sample Angular App。

我很难理解文件projects.html 中的行

<tr ng-repeat="project in projects">

设法获得projects。

我正在尝试追踪管道，但我遇到了死胡同。

我可以看到整个projects.html 正被路由器放入index.html 文件中。该区域的控制器称为AppCtrl。但是，查看此控制器，没有任何迹象表明与从服务器获取 projects 并将它们存储在范围中远程相关。

我完全不知道这些项目是如何出现在我的屏幕上的。

谁能解释一下？我快疯了:-(

【问题讨论】：

标签： javascript angularjs angularjs-directive dependencies

【解决方案1】：

在这里：

https://github.com/angular-app/angular-app/blob/master/client/src/app/projects/projects.js

.config(['$routeProvider', 'securityAuthorizationProvider', function ($routeProvider, securityAuthorizationProvider) {
  $routeProvider.when('/projects', {
    templateUrl:'projects/projects-list.tpl.html',
    controller:'ProjectsViewCtrl',
    resolve:{
      projects:['Projects', function (Projects) {
        //TODO: fetch only for the current user
        return Projects.all();
      }],
      authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
    }
  });
}])

如您所见，ProjectsViewCtrl 正在传递到该视图，并且正在从那里获取项目变量。

【讨论】：

但Projects（大写P）从何而来？

【解决方案2】：

projects.html 页面的路由和控制器在此处定义：

https://github.com/angular-app/angular-app/blob/master/client/src/app/projects/projects.js

'resolve' 确实会通过 API 加载项目：

resolve:{
      projects:['Projects', function (Projects) {
        //TODO: fetch only for the current user
        return Projects.all();
      }],
      authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
    }

然后projects 依赖注入到控制器并在这里使用：

$scope.projects = projects;

【讨论】：

我不明白。 Projects 来自哪里？ projects 是什么？据我所知，它是这个模块的名称。你将一个模块注入到它自己的config?
'Projects' 是这里描述的服务：github.com/angular-app/angular-app/blob/master/client/src/… 它被注入到解析器'projects'中。（有关解决的详细信息：docs.angularjs.org/api/ngRoute/provider/$routeProvider）
我看不到它是在哪里注入的。我只看到这些注入'resources.projects', 'productbacklog', 'sprints', 'security.authorization'
当您使用resolve 时，您创建了一个模块，因此它看起来像：resolve: {var1 : module1, var2: module2, etc}，请参阅此处的“数组表示法”：docs.angularjs.org/api/auto/service/$injector
我不确定细节，但 Angular 的工作顺序如下：首先触发所有模块声明，然后调用 .config，然后调用 .run。 resolve 在控制器运行之前触发，由 ngRoute 添加到特定视图（在 .config 中指定）。所以当resolve被调用时，$injector已经知道Project是什么意思，因为它是模块'resources.projects'的一部分