current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>

login.html looks like this:

<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!

share|improve this question
    
dropping your code in codepen might be helpful –  Aaron Saunders May 3 at 23:21
    
The multi-file structure of this question makes it impossible (I believe) to create a codepen. –  user3284007 May 6 at 10:56
add comment

1 Answer

up vote 3 down vote accepted
+50

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

share|improve this answer
1  
If this question has been helpful, please mark it as correct :) –  mhartington May 7 at 13:28
    
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. –  user3284007 May 7 at 23:38
    
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. –  mhartington May 8 at 3:13
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.