AngularJS 控制器不是函数,未定义(来自工厂的数据)
AngularJS controller is not a function, got undefined (data from factory)
我正在重构一个旧的 AngularJS 项目,以便它不那么愚蠢和糟糕,分离控制器并使用工厂导出数据,而不是将所有数据都放在一个巨大的控制器中。不幸的是,我不能走得很远,因为我的主控制器不工作。我已经进行了如此广泛的搜索,none 我看到的问题与我的匹配。我也是 运行 一位高级开发人员,他找不到问题所在。任何帮助深表感谢。在我进行重构之前,该应用确实有效。
我的index.html:
<!DOCTYPE html>
<html ng-app="campSpots">
<head>
<meta charset="utf-8">
<title>Camp Spots</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="mainCtrl">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="components/main.ctrl.js"></script>
</body>
</html>
我的工厂:
(function(){
"use strict";
angular
.module("campSpots")
.factory("postFactory", function($http){
function getPosts(){
return $http.get('data/posts.json');
};
return {
getPosts: getPosts
};
})
})
还有我的控制器,main.ctrl.js:
(function(){
"use strict";
angular
.module("campSpots")
.controller("mainCtrl", mainCtrl);
mainCtrl.$inject = ['$scope', '$http', 'postFactory'];
function mainCtrl($scope, $http, postFactory){
postFactory.getPosts().then(function(posts){
$scope.posts = posts.data;
})
}
})
您忽略了为控制器和工厂调用 IIFE 中的函数。
他们应该是这样的:
(function(){
///code
}());
您的代码中缺少最后一个 ()
,因此实际上 运行 不是代码块。
我正在重构一个旧的 AngularJS 项目,以便它不那么愚蠢和糟糕,分离控制器并使用工厂导出数据,而不是将所有数据都放在一个巨大的控制器中。不幸的是,我不能走得很远,因为我的主控制器不工作。我已经进行了如此广泛的搜索,none 我看到的问题与我的匹配。我也是 运行 一位高级开发人员,他找不到问题所在。任何帮助深表感谢。在我进行重构之前,该应用确实有效。
我的index.html:
<!DOCTYPE html>
<html ng-app="campSpots">
<head>
<meta charset="utf-8">
<title>Camp Spots</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="mainCtrl">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="components/main.ctrl.js"></script>
</body>
</html>
我的工厂:
(function(){
"use strict";
angular
.module("campSpots")
.factory("postFactory", function($http){
function getPosts(){
return $http.get('data/posts.json');
};
return {
getPosts: getPosts
};
})
})
还有我的控制器,main.ctrl.js:
(function(){
"use strict";
angular
.module("campSpots")
.controller("mainCtrl", mainCtrl);
mainCtrl.$inject = ['$scope', '$http', 'postFactory'];
function mainCtrl($scope, $http, postFactory){
postFactory.getPosts().then(function(posts){
$scope.posts = posts.data;
})
}
})
您忽略了为控制器和工厂调用 IIFE 中的函数。
他们应该是这样的:
(function(){
///code
}());
您的代码中缺少最后一个 ()
,因此实际上 运行 不是代码块。