Angular service on more than one page

Question

I'm doing an API dashboard and I need to split the Login Page from the rest of the application, because of template reasons.

I created a service using a factory, like this:

angular.module('dashboard').factory('$api', function() {
    var api_url = 'https://my.great.app/api/';
    return {
      resolve:function(path){
        return api_url + '/' + path;
      }
    };
});

How can I share this with some other?

I'm a real new be on angular, I'm a little bit confused about using bower, grunt, nodes js and so on...

D.

Answer 1

Angular have good mechanism for dependency injection .

In your case you can inject factory to controller with next code:

angular.module('dashboard')
.controller('myCtrl', ['$scope', '$api', function($scope, $api){
    var result = $api.resolve('path');
}])

Answer 2

a tip:

create a js file to create your module and share it for other files, example:

main.js

var App = angular.module("myModuelName", [])

so, now you can include this file in your HTML, this will share your App var to others files

so you will be able to do

App.controller("myCtrl" ['$scope', '$api', function($scope, $api){
    $scope.path = $api.resolve('myInternalPath')
}])

Services are a good way to share information between controllers