Angular资源导致视图消失

Angular Resource causes view to disappear

本文关键字：视图 消失 资源 Angular      更新时间：2023-09-26

我开始在一个AngularJS应用程序上工作，只有一个路由，/login。下面是处理该路由的控制器的代码:

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的服务的正确方法。如果是，为什么页面呈现为空白?

问题将是myApp模块的重复定义。在第一个代码片段中，有:

angular.module('myApp', [])

第二行是:

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

你需要在第二个代码片段中为模块使用一个不同的名称，并且需要在app模块的配置中包含该名称。

将第一个代码段更改为如下内容:

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

并将第二个更改为如下内容(将app变量也重命名可能是个好主意-因为它不是app模块):

angular = require('angular');
require('angular-resource');
var mod = angular.module('loginResource', ['ngResource']);
...
mod.factory('Foobar', di.concat(myResource));
相关文章：