Angular Resource 导致视图消失答案

【问题标题】：Angular Resource causes view to disappearAngular Resource 导致视图消失
【发布时间】：2016-09-08 15:47:15
【问题描述】：

我开始使用单一路由 /login 开发 AngularJS 应用程序。这是处理该路由的控制器的代码。

angular = require('angular');
// require('../resources/loginResource');


var di = ['$scope'];

var controller = function LoginCtrl($scope) {
  $scope.myArray = [
    "foo",
    "bar",
    "baz"
  ];
};

angular.module('myApp', [])
  .controller('LoginCtrl', di.concat(controller) );

当文件中的第二行，对loginResource 的引用被注释时，页面/login 出现就好了。但是当我取消注释时，页面呈现空白。没有控制台错误，我的终端输出中没有任何内容。

这是loginResource 文件：

angular = require('angular');
require('angular-resource');

var app = angular.module('myApp', ['ngResource']);

var di = ['$resource'];

var myResource = function Foobar($resource) {
  return $resource('http://mockbin.org/bin/c7bb5923-18ec-4e2f-9189-df8fb80b606b');
};

app.factory('Foobar', di.concat(myResource));

我正在使用 gulp 和 Browserify。

这似乎是注入使用$service 的服务的正确方法。如果是，为什么页面呈现空白？

【问题讨论】：

标签： javascript angularjs browserify angular-resource

【解决方案1】：

问题将是myApp 模块的重复定义。在您的第一个 sn-p 中，您有：

angular.module('myApp', [])

在你的第二个，你有：

var app = angular.module('myApp', ['ngResource']);

您需要在第二个 sn-p 中为模块使用不同的名称，并且您需要在应用模块的配置中包含该名称。

把第一个 sn-p 改成这样：

angular = require('angular');
require('../resources/loginResource');
...
angular.module('myApp', ['loginResource']) ...

并将第二个更改为类似的内容（重命名 app 变量可能也是个好主意 - 因为它不是应用程序模块）：

angular = require('angular');
require('angular-resource');

var mod = angular.module('loginResource', ['ngResource']);
...
mod.factory('Foobar', di.concat(myResource));

【讨论】：