AngularJS 似乎没有看到 JavaScript 对象？答案

【问题标题】：AngularJS appears to not be seeing JavaScript object?AngularJS 似乎没有看到 JavaScript 对象？
【发布时间】：2018-01-18 03:54:12
【问题描述】：

这个想法是编写一个简单的服务，将 2 个数字相乘，然后将其传递给控制器并在 html 页面中显示。但是，我似乎无法显示结果，因为它只是显示 {{product}}。

编辑：当我将对象移动到与服务相同的文件中时，它可以工作。但是，当我将它放在一个名为 objects.js 的单独文件中（在同一文件夹中）时，就好像它不再对服务可见，并且不再起作用。我想让它像那样工作。

这是代码的所有部分：

JavaScript 对象：

    function Multiplier(valueFactor) {
    	this.multiply = function (controllerFactor) {
    		return valueFactor * controllerFactor;
    	};
    }

服务：

var services = angular.module("services",[]);
services.value('factor',6);
services.service('multiplier',['factor', Multiplier]);

控制器：

var app = angular.module("app",['services']);

app.controller('multiplyController',['$scope','multiplier', function($scope,multiplier) {
	$scope.product = multiplier.multiply(2);
}]);

HTML 页面：

<!DOCTYPE html>
<html ng-app="app">
	<head>
	
	</head>
	<body>
		<div ng-controller="multiplyController">
			{{product}}
		</div>
		
		<script src="js/angular.js"></script>
		<script src="js/angular-route.js"></script>
		<script src="js/jquery.min.js"></script>
		
		<script src="app/app.js"></script>
		<script src="app/controllers.js"></script>
		<script src="app/services.js"></script>
		
	</body>
</html>

【问题讨论】：

Pass Javascript variables to Angularjs controller的可能重复

标签： javascript angularjs frontend

【解决方案1】：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
var app = angular.module("app",[]);

function Multiplier(valueFactor) {
        this.multiply = function (controllerFactor) {
            return valueFactor * controllerFactor;
        };
    }

app.value('factor',6);
app.service('multiplier',['factor', Multiplier]);

app.controller('multiplyController',['$scope','multiplier', function($scope,multiplier) {
    $scope.product = multiplier.multiply(2);
}]);
  </script>
</head>
<body ng-app="app">
 <div ng-controller="multiplyController">
            {{product}}
        </div>
</body>
</html>

【讨论】：

【解决方案2】：

你在这里调用 angular var app = angular.module("app",['services']); 您应该在其余代码中使用 app 变量，例如：

app.controller('mycontrl', [function(){/*...*/}])

app.service('mysrvc1', [function(){/*...*/}])

app.service('mysrvc2', [function(){/*...*/}])

app.factory('myfact', [function(){/*...*/}])

您只需安装一次angular.module()

【讨论】：