Using ui-router in the ionic framework in AngularJS

javascript angularjs angular-ui-router ionic-framework

14,131

Solution 1

If your using the bundle ionic.js file, you don't need to include ui-router, it already is included. You also don't need to include ng-router too.

Heres the codepen

Solution 2

ngRoute refers to the normal default router angular uses.

While you put that as your dependency, you cannot use the UI-router method, i.e stateProviders and the states.

In your case you have to remove ngRoute from your dependencies, or [ ]

var myApp = angular.module('myApp', ['ionic', 'ngRoute']); to

var myApp = angular.module('myApp', ['ionic']);

and then troubleshoot further since its a null value, something else is broken.

14,131

Author by

user3284007

Updated on June 05, 2022

Comments

user3284007 almost 2 years

I'm working on an app that uses the ionic framework. This in-turn uses the ui-router. Currently, I have a pretty basic two-page app. However, it will expand to be much larger. At this time, I get an error when I transition from my first view to my second view. The error says:

TypeError: Cannot read property '1' of null
    at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:14235:28
    at updateView (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37839:30)
    at eventHook (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:37786:17)
    at Scope.$broadcast (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19725:28)
    at $state.transition.resolved.then.$state.transition (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:31686:22)
    at wrappedCallback (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18429:81)
    at http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:18515:26
    at Scope.$eval (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19441:28)
    at Scope.$digest (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19267:31)
    at Scope.$apply (http://localhost:11000/vendor/ionic/release/js/ionic.bundle.js:19547:24)

I am using 1.0.0 beta 3 of the Ionic Framework. My app.js file looks like this:

"use strict";

var myApp = angular.module('myApp', ['ionic', 'ngRoute']);

myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('intro', { url: '/', templateUrl: 'app/account/welcome.html', controller: 'WelcomeController' })
    .state('login', { url: '/account/login', templateUrl: 'app/account/login.html', controller: 'LoginController '})
  ;

  $urlRouterProvider.otherwise("/");
});

function WelcomeController($scope) {
}

function LoginController($scope) {
}

My index.html looks like this:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>MyApp</title>

    <link rel="stylesheet" href="/vendor/ionic/release/js/ionic.bundle.min.js" />
    <link rel="stylesheet" href="/css/app.css" />

    <script type="text/javascript" src="/vendor/ionic/release/js/ionic.bundle.js"></script>
    <script type="text/javascript" src="/vendor/angular-route/angular-route.min.js"></script>

    <script type="text/javascript" src="/app/app.js"></script>
    <script type="text/javascript" src="/app/controllers.js"></script>
</head>
<body>
    <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>

        <h1 class="title">MyApp</h1>
    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right">
    </ion-nav-view>
</body>
</html>

welcome.html looks like this:

<ion-view>
  <br /><br />
  <h1>Welcome</h1>
  <a class="button" href="/#/account/login">Login</a>
</ion-view>

<ion-view>
  <br /><br />
  <h1>Login</h1>
</ion-view>

The view transitions just fine. However, the error I showed above concerns me. I'm afraid its going to bite me in the ass later. Does anyone know what would be causing this? Does anyone know how I can fix this?

Thank you!

mhartington almost 10 years

If this question has been helpful, please mark it as correct :)
user3284007 almost 10 years

Unfortunately, that approach won't work for me. Your approach has all of the code as templates inside of a single .html file. My approach has multiple .html files.
mhartington almost 10 years

If thats the case, then append the template url in your states provider with the folder name they are located in. I updated the codepen with a comment about that. Also, do not include the script tag to the external html files.