How to add service to app.config in AngularJS

Question

wikiApp.config(['$routeProvider','authService', function($routeProvider,authService) { var admin = authService.getLoggedin(); $routeProvider .when('/hjem',{ templateUrl: 'partials/homeContent.html', admin: false }) .when('/articles/:article',{ templateUrl: 'partials/articles.html', admin: false }) .when('/newArticle',{ templateUrl: 'partials/postArticle.html', controller: 'articleController', admin: true }) 

The authService.getLoggedin () function returns either false or true depending on whether the user is logged in or not. Then I would like not to allow them URLs if they are not allowed.

But I get this error: Error: [$ injector: modulerr] Unable to create wikiApp module because of: [$ injector: unpr] Unknown provider: authService

Answer 1

At the configuration stage, you can only request providers ($ routeProvider, $ locationProvider, etc.), which means that you cannot enter any other instance, so I would suggest entering your service at the startup stage, there you will have an instance of your service.

 // configuration app.config(function($routeProvider) { }); //inject any instance app.run(function($rootScope,authService) { var admin = authService.getLoggedin(); $rootScope.$on('$routeChangeStart', function(next, current) { // your logic here... }); }); 

Answer 2

• angular.config accepts only suppliers
• every service, factory, etc. are provider instances

To implement the service in the configuration, you just need to call the service provider, adding the name "Provider" to it.

 angular.module('myApp') .service('FooService', function(){ //...etc }) .config(function(FooServiceProvider){ //...etc }); 

Answer 3

If you want to call an external function (in your case, a Utility function), enter your routes (.config) as shown below: templateProvider.getTemplate ('about')

 .state('index.about', {  url: "/about",  templateUrl: templateProvider.getTemplate('about'),  controller: 'AboutCtrl',  controllerAs: 'about',  data: {pageTitle: 'About Us Page'} }) 

You cannot create a Service or Factory for this. Instead, you should create a provider.

Here is a real example of a provider that generates a template path from a name:

 (function () {  'use strict';  angular    .module('mega-app')    .provider('template', provider);  function provider(CONSTANT) {    // The provider must include a $get() method This $get() method    // will be invoked using $injector.invoke() and can therefore use    // dependency-injection.    this.$get = function () {      return {}    };    /**     * generates template path from it's name     *     * @param name     * @returns {string}     */    this.getTemplate = function (name) {      return CONSTANT.TEMPLATES_URL + name + '/' + name + '.html';    }    /**     * generates component path from it's name     * @param name     * @returns {string}     */    this.getComponent = function (name) {      return CONSTANT.COMPONENTS_URL + name + '.html';    }  }; })(); 

Using such a provider in routes (.config) will be as follows:

 (function () {  'use strict';  angular    .module('mega-app')    .config(routes);  function routes($stateProvider, $urlRouterProvider, templateProvider) {    $stateProvider   //----------------------------------------------------------------   // First State    //----------------------------------------------------------------      .state('index', {        abstract: true,        url: "/index",        templateUrl: templateProvider.getComponent('content'),        controller: 'IndexCtrl',        controllerAs: 'index',      })      //----------------------------------------------------------------      // State      //----------------------------------------------------------------      .state('index.home', {        url: "/home",        templateUrl: templateProvider.getTemplate('home'),        controller: 'HomeCtrl',        controllerAs: 'home',        data: {pageTitle: 'Home Page'}      })      //----------------------------------------------------------------      // State      //----------------------------------------------------------------      .state('index.about', {        url: "/about",        templateUrl: templateProvider.getTemplate('about'),        controller: 'AboutCtrl',        controllerAs: 'about',        data: {pageTitle: 'About Us Page'}      })    //----------------------------------------------------------------    // Default State    //----------------------------------------------------------------    $urlRouterProvider.otherwise('/index/home');  }; })(); 

Note for VIP:

to enter a provider, you must send it using xxxProvider (this provider name should not be postfix, only when injected into .config).