AngularJS service in separate file

2019-03-13 20:02发布

站内问答 / JavaScript
727 3 2

My app.js contains 

var app = angular.module('myApp', []).
config(['$routeProvider', function ($routeProvider, $http) {
    ...
}]);

Service looks like

app.service('MyService', function () {
    addNums = function (text) {
        return text + "123";
    }
});

And in contoller I have

function adminCtrl ($scope, MyService) {
    $scope.txt = MyService.addNums("abc");
};

They are all in separate files. The problem is that I'm getting an error Unknown provider: MyServiceProvider <- MyService

Looks like I'm doing something wrong.

3条回答
欢心
2楼-- · 2019-03-13 20:24

The provider error can occur if you forgot to tell Angular to load your myApp module. E.g., do you have this in your index.html file?:

<html ng-app="myApp">

Your service is missing "this.":

this.addNums = function(text) {

Fiddle.

There seems to be a lot of confusion in the Angular community about when to use service() vs factory(), and how to properly code them. So, here's my brief tutorial:

The service() method expects a JavaScript constructor function. Many Angular code examples that use service() contain code that is not a constructor function. Often, they return an object, which kind of defeats the purpose of using service() — more about that below. If an object needs to be created and returned, then factory() can be used instead. Often, a constructor function is all that is needed, and service() can be used.

The quotes below are from different AngularJS Google Group posts:

The main difference between using factory() vs service() is that factory() must return an object, while service() doesn't return anything but it must be an object constructor function.

Use factory() if the function you are providing builds the object you want. I.e., Angular will essentially do
obj = myFactory()
to get the obj. Use service() if the function you are providing is a constructor for the object you want. I.e., Angular will essentially do
obj = new myService()
to get/instantiate the obj.

So when people use service() and its code "return"s an object, it is kind of a waste because of the way JavaScript "new" works: "new" will first create a brand new JavaScript object (then do stuff with prototype, then call the function defined by myService(), etc. -- details we don't really care about here), but because the function defined by myService() returns its own object, "new" does something a bid odd: it throws away the object is just spent time creating and returns the object that the myService() function created, hence the "waste".

One of the reasons that service() was introduced was to make it easy to use "classical" OO techniques, such as defining your service as a coffeescript class.

Also, the undocumented naming convention for services seems to be camelCase with first letter lowercased: e.g., myService.

查看更多
0人赞 添加讨论(0) 举报
做个烂人
3楼-- · 2019-03-13 20:44

You need to return addNums in app.service callback.

app.service('MyService', function () {
  addNums = function (text) {
    return text + "123";
  }
  return addNums;
});

Now, whenever you use MyService, angular will give you back the addNums function to use.

Therefore, you should use it in your controller like so (note there isn't the addNums call):

function adminCtrl ($scope, MyService) {
  $scope.txt = MyService("abc");
};
查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
4楼-- · 2019-03-13 20:44

Just as an added clarification on Brian's answer, if you wanted to still have your code call MyService.addNums you could use the following:

app.service('MyService', function() {
    var result = {};
    result.addNums = function (text) {
        return text + "123";
    };

    return result;
});

Then you could still use

MyService.addNums("abc");

if you wanted to do so.  

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)