如何从Angular的JS文件中调用方法？

Question

我有test.js其中包含：

function test(str) {
    return 'Hello, ' + str + '!'
}

我想在我的Angular控制器中使用测试方法：

angular.module('testModule')
.controller('testController', ['$scope', function($scope){
    console.log(test('John'))
}

返回Hello, John!

我努力了：

<div ng-app="testModule" ng-controller="testController">
    <script type="text/javascript">
        function test(str) {
            return 'Hello, ' + str + '!'
        }
    </script>
</div>

哪个工作正常，返回Hello, John! ， Hello, John! 。 但是尝试从我的其他.js文件中引用该方法将返回ReferenceError: ____ is not defined 。

1. 如何在Angular控制器中从其他.js文件调用方法？
2. 调用这些方法的最佳实践是什么？ （例如，我是否必须将所有.js文件中的代码传输到Angular的模型或控制器中？）

Answer 1

您应该为单例对象创建服务 。 在生产中，您可以为它提供活动对象，而在测试过程中，可以为其提供模拟对象。 参见http://jsfiddle.net/mendesjuan/E9bU5/235/

您可能会违反Angular提供的功能，而直接从控制器使用全局变量（例如jQuery或toaster ）。

angular.
module('testModule', []).
 controller('testController', ['$scope','test', function ($scope, test) {
   $scope.callTest = function(msg) {
     return test(msg);
   };
 }]).
factory('test', [function() {
   return function(msg) {
     return 'Hello, ' + str + '!';
   } 
}]);

 // Just some global window.myTest = function() { return "I'm in"; }; angular. module('testModule', []). controller('testController', ['$scope','test', function ($scope, test) { // This will be easy to test because it's using a service that can be mocked $scope.callTest = function(msg) { return test(msg); }; // This will be hard to test because it is touching a global $scope.myTest = function() { return myTest(); } }]). factory('test', ['$window', function(str) { return function(str) { return 'Hello, ' + str + '!' } }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="testModule" ng-controller="testController"> <!-- Show the name in the browser --> <h1>{{ callTest('You') }}</h1> <h1>{{ callTest('Me') }}</h1> <h1>{{ myTest() }}</h1> </div> 

Answer 2

首先，您在模块中创建服务。 （根据您的需求，创建服务的方法有几种略有不同的方法。如果有需要，我会让有角度的纯粹主义者争论那些。）

angular.module("testModule")
    .factory("testService", function() {
        return {
            sayHello: function(str) { 'Hello, ' + str + '!';}
        }
    });

然后，您可以将该服务注入到控制器中：

angular.module('testModule')
    .controller('testController', ['$scope', 'testService', function($scope, testService){
        console.log(testService.sayHello('John'));
    });

请注意，由于角度手柄的注入方式，您无需按顺序运行它们。 您可以先定义控制器，Angular仍会为您注入服务。