Question

使用他们文档中的示例我做了这个.html文件：

  <html>

  <head>
  <title>Angular JS Services</title>
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="test.js"></script>
  </head>

  <body>
  <h2>AngularJS Sample Application</h2>

  <div ng-app = "mainApp" ng-controller = "VehicleInfo">
     <p>Enter a number: <input type = "number" ng-model = "number" /></p>
     <button ng-click = "getNameOfVclass()">X<sup>2</sup></button>
     <p>Result: {{result}}</p>
  </div>

现在我有一个test.js文件，如下所示：

var mainApp = angular.module("mainApp", []);

     mainApp.factory('VehicleInfo', function() {
        var factory = {};
        return factory;
     });

     mainApp.service('VehicleInfoService', function(VehicleInfo){
        this.getNameOfVclass = function(a) {
           switch(a) {
              case 1:
                 return 'psngr.profile.vehicle.car.midsize';
              case 2:
                 return 'psngr.profile.vehicle.car.large';
              case 3:
                 return 'psngr.profile.vehicle.car.compact';
              case 4:
                 return 'psngr.profile.vehicle.car.scooter';
              case 5:
                 return 'psngr.profile.vehicle.car.motorcycle';
              case 6:
                 return 'psngr.profile.vehicle.car.suv';
              case 7:
                 return 'psngr.profile.vehicle.car.van';
              case 8:
                 return 'psngr.profile.vehicle.car.pickup';
              case 9:
                 return 'psngr.profile.vehicle.car.truck';
              case 10:
                 return 'psngr.profile.vehicle.car.bicycle';
              default:
                 return 'psngr.profile.vehicle.car.midsize';
           }
        }
     });

     mainApp.controller('VehicleInfo', function($scope, VehicleInfoService) {
        $scope.getNameOfVclass = function() {
           $scope.result = VehicleInfoService.getNameOfVclass($scope.number);
        }
     });

现在，如果按下按钮，它将返回其中一个字符串。这很好。我想要做的是将mainApp.service（....）移到/services/vehicle_info.js文件中。这可能吗？

然后我可以调用服务，如：

 mainApp.service('VehicleInfoService', methodFromVehicleInfo.js);

我是Android开发人员，昨天才开始使用AngularJS，所以如果这个问题太简单，或者有些人可能会考虑这个常识，我很抱歉，但我只想弄清楚angularJS是如何工作的的JavaScript

编辑：我尝试的是：我像这样制作了服务/ vehicle_info.js：

var vehicle_info = function($rootScope, $timeout, $q) {
 function getNameOfVclass(vclass) {
  switch(vclass) {
  case 1:
     return 'psngr.profile.vehicle.car.midsize';
  case 2:
     return 'psngr.profile.vehicle.car.large';
  case 3:
     return 'psngr.profile.vehicle.car.compact';
  case 4:
     return 'psngr.profile.vehicle.car.scooter';
  case 5:
     return 'psngr.profile.vehicle.car.motorcycle';
  case 6:
     return 'psngr.profile.vehicle.car.suv';
  case 7:
     return 'psngr.profile.vehicle.car.van';
  case 8:
     return 'psngr.profile.vehicle.car.pickup';
  case 9:
     return 'psngr.profile.vehicle.car.truck';
  case 10:
     return 'psngr.profile.vehicle.car.bicycle';
  default:
     return 'psngr.profile.vehicle.car.midsize';
  }
   }

  //Exposed methods
  return {
  /* get name of vclass */
  getNameOfVclass: function(vclass) {
     return getNameOfVclass(vclass);
  },
  };
};
 mainApp.service('VehicleInfoService', vehicle_info);

从我的test.js文件中，我尝试了这个：

var mainApp = angular.module（“mainApp”，[]）;

     mainApp.factory('VehicleInfo', function() {
        var factory = {};
        return factory;
     });

     mainApp.controller('VehicleInfo', function($scope, VehicleInfoService) {
        $scope.getNameOfVclass = function() {
           $scope.result = VehicleInfoService.getNameOfVclass($scope.number);
        }
     });

这个有效!!!这很棒：D感谢Alex Netrebsky。我的下一个问题是如何从.js文件中调用此方法，而不是通过按钮中的ng-click调用此方法？

Answer 1

有几种代码结构可以实现这一点，但是必须以这种或那种方式检索（然后将服务附加到）新模块中的模块：

vehicle_info.js（使用链接）

angular.module("mainApp").service('VehicleInfoService', function(VehicleInfo){
        this.getNameOfVclass = function(a) {
           switch(a) {
              case 1:
                 return 'psngr.profile.vehicle.car.midsize';
              case 2:
                 return 'psngr.profile.vehicle.car.large';
              case 3:
                 return 'psngr.profile.vehicle.car.compact';
              case 4:
                 return 'psngr.profile.vehicle.car.scooter';
              case 5:
                 return 'psngr.profile.vehicle.car.motorcycle';
              case 6:
                 return 'psngr.profile.vehicle.car.suv';
              case 7:
                 return 'psngr.profile.vehicle.car.van';
              case 8:
                 return 'psngr.profile.vehicle.car.pickup';
              case 9:
                 return 'psngr.profile.vehicle.car.truck';
              case 10:
                 return 'psngr.profile.vehicle.car.bicycle';
              default:
                 return 'psngr.profile.vehicle.car.midsize';
           }
        }
     });

vehicle_info.js（使用单独的语句）

var mainApp = angular.module("mainApp");

mainApp.service('VehicleInfoService', function(VehicleInfo){
    this.getNameOfVclass = function(a) {
       // Your Switch Statement here...
    };
});

vehicle_info.js（使用立即调用的函数表达式）

(function(app)
    var vehicleInfoService = function(VehicleInfo) {        
       this.getNameOfVclass = function(a) {
           // Your switch statement here...
       };
    };

    app.service("VehicleInfoService", vehicleInfoService);
)(angular.module("mainApp"));

Answer 2

您可以按照以下方式执行此操作：

将服务定义从mainApp.service('VehicleInfoService', function(VehicleInfo){移至vehicle_info.js
将<script src="services/vehicle_info.js"></script>添加到<HEAD>代码
在vehicle_info.js中使用var myApp = angular.module("mainApp");

Answer 3

这是语法。根据您的要求做。

创建服务文件夹。在那里创建一个任何服务文件。 letsay，vehicleService.js。

在这样的创建服务中

app.service('vechileservice', function(){

this.add = function(a, b){
    return a + b;
};

this.subtract = function(a, b){
    return a - b;
};

this.multiply = function(a, b){
    return a * b;
};

this.divide = function(a, b){
    return a / b;
};

});

以上vechileservice是服务名称，无论你想在哪里都可以在控制器中调用它。不要忘记在index.html页面中包含文件源。

Angular.js如何在单独的.js文件中移动服务

3 个答案: