Config issues with Factories in app.js & stateProv

Question

I am trying to set up a factory in my app.js of my ionic app. I have the following code that should work however my state provider is throwing me off and Im not sure where my states should be. I was suggested to use this app.js code to get my factory working however it leaves no room for my routes. I have tried different variations of the following with no lck. Thnk you in advance.

(function() {
  'use strict';

  angular
    .module('starter', []) // In your real application you should put your dependencies.. ['ng...']
    //.run(runFunction) // Just commenting to make it WORK HERE
    .controller('MainCtrl', MainCtrl)
    .factory('myService', myService);

  // Just commenting to make it work here..
  /*function runFunction($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);

      }
      if (window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
      }
    })
  }*/


  MainCtrl.$inject = ['$scope', 'myService'];

  function MainCtrl($scope, myService) {
    function getSuccess(response) {
      $scope.items = response.data;
    }

    function getError(response) {
      console.log('Of course an error since the url is a invalid, but it should work with a valid url!');
    }

    myService.getAll()
      .then(getSuccess)
      .catch(getError);
  }

  function myService($http) {
    var factory = {
      getAll: getAll
    };

    return factory;

    function getAll() {
      return $http.get("url"); // it -> should be your URL
    }
  }
})();


// dont know where the config goes?

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

    .state('login', {
      url: "/login",
      cache: false,
      controller: 'AccountCtrl',
      templateUrl: "templates/login.html"
    })

    .state('list', {
      url: "/list",
      cache: false,
      controller: 'ListCtrl',
      templateUrl: "templates/list.html" 
    })

  $urlRouterProvider.otherwise('/tab/dash');

});

Answer 1

I don't see you have included ui.router in your app. To work with $stateProvider you should place ui.router module in your depenencies, and should include angular-ui-router.js files in your project.

angular
    .module('starter', ['ui.router']) // In your real application you should put your dependencies.. ['ng...']
    //.run(runFunction) // Just commenting to make it WORK HERE
    .controller('MainCtrl', MainCtrl)
    .factory('myService', myService);

ui.router is the module that provides you $stateProvider.

After this .config can go along with module like .controller and .factory. Config is also defined on you app:

angular.module('starter', ['ui.router'])
         .config(configFn) //configFn is the function you have in your .config
        .controller('MainCtrl', MainCtrl)
        .factory('myService', myService);