Angular.js how to move the service in a separate .js file

问题

Using the examples from their documentation I did this .html file:

  <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>

Now I have a test.js file, that looks like this:

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);
        }
     });

Now if I press the button, it will return 1 of those strings. Which is good. What I want to do, is move the mainApp.service(....) inside a /services/vehicle_info.js file. Is that possible?

So that I can then call the service like:

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

I am a Android developer, that started working with AngularJS only yesterday, so I'm sorry if this question is too simple, or some might consider this common knowledge, but I'm just trying to figure out how angularJS works with javascript

EDIT: What I tried is: I made the services/vehicle_info.js like this:

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);

And from my test.js file, I tried this:

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);
        }
     });

This works!!! Which is great :D Thanks to Alex Netrebsky. My next question is how to call this method from a .js file, and not via the ng-click from the button?

回答1:

You can do this just as folowing:

Move definition of service from mainApp.service('VehicleInfoService', function(VehicleInfo){ to the vehicle_info.js
Add <script src="services/vehicle_info.js"></script> into the <HEAD>tag
In the vehicle_info.js to get the module use var myApp = angular.module("mainApp");

回答2:

There are several code structures to achieve this, but one way or another you must retrieve (and then append the service to) the module in the new file:

vehicle_info.js (Using Chaining)

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 (Using Separate Statements)

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

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

vehicle_info.js (Using Immediately Invoked Function Expression)

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

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

回答3:

This is syntax. DO accordingly to your requirement.

Create a service folder. In that create a any service file. letsay, vehicleService.js.

In that create service like this

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;
};

});

Above vechileservice is name of service, call it in controller wherever you want. Dont forget to include file source in your index.html page.

来源：https://stackoverflow.com/questions/41978661/angular-js-how-to-move-the-service-in-a-separate-js-file

标签

javascript

angularjs

service

controller

factory