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.

Upvote for "currently stuck (again)". Lolx - here's how it looks, even 6 years after your question :-) — Mawg
– Mawg, Commented Feb 21, 2020 at 19:17

Andrei R · Accepted Answer · 2015-11-30 22:40:16Z

31

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

answered Nov 30, 2015 at 22:40

Andrei R

5,2185 gold badges27 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hofnarwillie Over a year ago

I prefer this solution because you could separate the logic out into multiple files.

Code Uniquely Over a year ago

yes, keeping the logic in separate files feels 'cleaner' to me as it keeps concerns distinct facebook config separate to state provider config

Jesus is Lord · Accepted Answer · 2014-08-26 13:51:00Z

11

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?

answered Aug 26, 2014 at 13:51

Jesus is Lord

15.4k11 gold badges71 silver badges103 bronze badges

4 Comments

sameera207 Over a year ago

Thanks a lot.... I was trying to fix this for last 2 days :)... thanks again... all I had to modify is to add $locationProvider in the same line with $stateProvider :)

user84 Over a year ago

@words Like Jared: Hellom I have a similar problem. We have several routing and a othersise condition. Waht can I do? what is the trick?$locationProvider.html5Mode(false);

Jesus is Lord Over a year ago

@AliSaberi If you're still having the issue ask it ask a question and myself or someone else will answer.

user84 Over a year ago

thanks. I opened a new question here:stackoverflow.com/questions/33971500/…

Collectives™ on Stack Overflow

Multiple functions in Angular config

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related