Bolboa Bolboa - 2 months ago 5
AngularJS Question

angular $stateProvider not routing as expected

In my main

index.html
file I have the following simple markup...

<body ng-app="starter" ng-controller="AppCtrl">
<div ui-view></div>
</body>


In my
app.js
I am using
$stateProvider
to create routes so I can display certain pages...

app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/app');
$stateProvider

.state('app', {
url: '/app',
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.accounts', {
url: '/accounts',
templateUrl: 'templates/accounts.html'
})
});


When the page loads, the first state is loaded, meaning I can see the contents of
menu.html
in my main
index.html
and the controller
AppCtrl
is passed to this state.

My
AppCtrl
loads an API that I am using on click of a button from
menu.html
, the API provides a UI for a user to login, and once the credentials are good, the
success
is called...

app.controller('AppCtrl', function($scope, $ionicModal, $timeout, $state) {

$scope.create = function() {
var linkHandler = Plaid.create({
env: 'tartan',
clientName: 'Example Project',
key: 'test_key',
product: 'connect',
onSuccess: function(token) {
$state.go('app.accounts');
},
});

linkHandler.open();
}
});


What the API does is pretty irrelevant, but as you can see, I am passing
$state.go('app.accounts');
on success. But instead of changing the state to
app.accounts
, I believe the
otherwise
statement is called because all I see is the contents of the
app
state.

Why is this so? I've been stuck on this issue for some time now.

Answer

app.accounts is a child state of app. That means in menu.html there must be <ui-view> in order to display accounts.html.

If you don't want to display accounts.html inside menu.html, you shouldn't make accounts a child state of app:

<body ng-app="starter">
    <div ui-view></div>
</body>

and

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/app');
  $stateProvider

    .state('app', {
      url: '/app',
      templateUrl: 'templates/menu.html',
      controller: 'AppCtrl'
    })
    .state('accounts', {
      url: '/accounts',
      templateUrl: 'templates/accounts.html'
    })
});
Comments