stateprovider is not working in switching pages

Question

In my program i want to load programsetup html page after pressing sign in button in login page.

myconfig function for login pages as follows

 .config(function config($stateProvider) {
$stateProvider.state('login', {
    url: '/login',
    views: {
        "main": {
            controller: 'LoginCtrl',
            templateUrl: 'login/login.tpl.html'
        }
    },
    data: {
        pageTitle: 'Login'
    }
    });
 })

login page loads successfully! but program setup page is not loading after click on sign in button

$location.href = "#/programsetup";

this is line i used in my login .js for loading program setup page my programsetup config function is:

  .config(function config($stateProvider) {
    $stateProvider.state('programsetup', {
    url: '/programsetup',
    views: {
        "main": {
            controller: 'ProgramSetupCtrl',
            templateUrl: 'programsetup/programsetup.tpl.html'
        }
    },
    data: {
        pageTitle: 'Program Setup'
    }
   });
 })

what mistake i am doing? please help me out.

Answer 1

Just configure your state for programsetup inside the root .config. Then for the button login. User $state.go('programsetup') to go to that page.

Rough Html:

<button class="button button-positive" ng-click="login()">Go Programsetup</button>

Then in the config and controller.

.config(function config($stateProvider) {
         $stateProvider.state('login', {
             url: '/login',
             views: {
                 "main": {
                     controller: 'LoginCtrl',
                     templateUrl: 'login/login.tpl.html'
                 }
             },
             data: {
                 pageTitle: 'Login'
             }
         });

         $stateProvider.state('programsetup', {
             url: '/programsetup',
             views: {
                 "main": {
                     controller: 'ProgramSetupCtrl',
                     templateUrl: 'programsetup/programsetup.tpl.html'
                 }
             },
             data: {
                 pageTitle: 'Program Setup'
             }
         });
     })


     .controller('LoginCtrl', function($scope, $state) {
             $scope.login = function() {
                 $state.go('programsetup');
             }

         })
         .controller('ProgramSetupCtrl', function($scope) {
             alert('i am at Program setup page.');
         })

Answer 2

In your login.js file(inside login controller) you need to write ng-click method and add below code

$state.go("programsetup");

And $state need to add dependency injection in your controller