Angular 资源导致视图消失
Angular Resource causes view to disappear
我开始开发 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']);
您需要为第二个代码段中的模块使用不同的名称,并且您需要在应用模块的配置中包含该名称。
将第一个片段更改为如下内容:
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));
我开始开发 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']);
您需要为第二个代码段中的模块使用不同的名称,并且您需要在应用模块的配置中包含该名称。
将第一个片段更改为如下内容:
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));