Multiple functions in Angular config

Question

I'm working on my first Angular project and currently stuck (again).

My problem is I have two functions that needs to implement in the Angular config.

• For Facebook connect (I use ngFacebook)
• For routing ( I use ui-router)

What I cannot understand is, both of there modules using <angular module>.config, I don't know how to combine these two , because when I read the Angular docs it seems like it gets a name, and a function.

Following is my current code (and these two works individually)

var myApp = angular.module('myApp', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise("/state1");
        $stateProvider
          .state('state1',{
            url: 'state1',
            templateUrl: "../pages/form.html"
          });
          $locationProvider.html5Mode(false);
    });



myApp = angular.module('myApp', ['facebook'])

    .config([
        'FacebookProvider',
        function(FacebookProvider) {
            var myAppId = '<FB app id>';
            FacebookProvider.init(myAppId);}

    ]
)

How can I combine these two functions in to one

var myApp = angular.module('myApp', ['facebook','ui.router']).config(
     facebook functon and ui-route function
 ) 

I have found almost the same SO question here but unfortunately no answer.

Answer 1

var myApp = angular.module('myApp', ['ui.router','facebook'])
    .config(function($stateProvider, $urlRouterProvider, FacebookProvider){
        $urlRouterProvider.otherwise("/state1");
        $stateProvider
          .state('state1',{
            url: 'state1',
            templateUrl: "../pages/form.html"
          });
          $locationProvider.html5Mode(false);

        var myAppId = '<FB app id>';
            FacebookProvider.init(myAppId);
    });

Is that what you want?

Answer 2

Alternatively, you can chain configs to keep things isolated like so

var myApp = angular.module('myApp', ['ui.router','facebook'])
    .config(function($stateProvider, $urlRouterProvider){
       ... state provider config ...
    })
    .config(function(FacebookProvider){
       ... facebook provider config ...
    });

or you could split them right up like so

var myApp = angular.module('myApp', ['ui.router','facebook']);

myApp.config(function($stateProvider, $urlRouterProvider){
  ...
});

myApp.config(function(FacebookProvider){
  ...
});