wmash wmash - 19 days ago 9
AngularJS Question

$stateProvider not working

Before I start, I have looked around many other answers:



I am building an app with Ionic.

I have created the app from another one I am working on, however, the
$stateProvider
seems to be working on that one and not this. The only difference being that the working one was set up as an Ionic tabs (
ionic start myApp tabs
) template and this one was setup as a blank template (
ionic start myApp blank
). The
index.html
is loading as expected but when I visit
/login
, the HTML page is not loading, nor the controller with it.

routes.js

angular.module('vCAFI.routes', [])

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('blocklyEditor', {
url: '/blocklyEditor',
templateUrl: 'templates/blocklyEditor.html',
controller: 'blocklyEditorCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
});
$urlRouterProvider.otherwise('/login')
});


login.html

<ion-view title="Login" hide-nav-bar="true" hide-back-button="true" cache-view="false" nav-transition="none" id="page2">
<ion-content padding="true" class="manual-ios-statusbar-padding" scroll="false">

...

</ion-content>
</ion-view>


There is not a
ui-view
directive or anything as Angular substitutes it for
ion-view
.

When I visit:


localhost:8100/#/login


...I am returned with
index.html
. When I hit:


localhost:8100/templates/login.html


...the it can find the correct page (but with no Ionic stuff loaded in as
index.html
has not been loaded in yet)


I have played around setting
templateUrl
to different paths to
login.html
but nothing works.

There is no
ui.router
or
ui.state
injected into the app as I am told that Ionic doesn't require it. I have tested it with those dependencies as well but still no look.

Finally, there is nothing in the log when debugging and - when putting a breakpoint in -
routes.js
is being hit which means it's being loaded in correctly.

I have added a
$stateChangeError
handler but still not output to the log:

.run(function($rootScope) {
$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
console.log(error);
});
})


(I've never implemented this handler before so correct me if I am wrong)

Any help will be greatly appreciated!

Answer

You need an <ion-nav-view> element for the route templates to render in

Comments