Angular.js如何在单独的.js文件中移动服务 [英] Angular.js how to move the service in a separate .js file
问题描述
使用他们文档中的示例，我做了以下.html文件：
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>
现在我有一个test.js文件，看起来像这样：
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);
}
});
现在，如果我按下按钮，它将返回其中的一个字符串。哪个好
我想做的是将mainApp.service（....）移到/services/vehicle_info.js文件中。可以吗？
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);
我是一名Android开发人员，昨天才开始使用AngularJS，所以对此感到抱歉问题太简单了，或者有些人可能会考虑这个常识，但是我只是想弄清楚angularJS如何与javascript一起工作
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
编辑：
尝试过的是：
我这样制作了services / vehicle_info.js：
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);
然后在我的test.js文件中，我尝试过：
And from my test.js file, I tried this:
var mainApp = angular.module（ mainApp，[]）;
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按钮调用此方法？
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?
推荐答案
您可以按照以下步骤进行操作：
You can do this just as folowing:
- 从
mainApp.service（ 'VehicleInfoService'，function（VehicleInfo）{到vehicle_info.js - 添加
< script src = services / vehicle_info.js >< / script>放入< HEAD>标记 - 中。 js获取模块，请使用
var myApp = angular.module（ mainApp）;
- 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");
这篇关于Angular.js如何在单独的.js文件中移动服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
