Trouble Creating ion-nav-view


#1

Hello,

I’m trying to create a basic app that uses the ion-nav-bar and ion-nav-view. Right now, I only have two pages.When a user clicks a button on the first page, I want to animate the other screen and have it slide-in. I’ve been following the example provided here. However, my app page doesn’t slide in. Also, I notice an error in the console that says:

“TypeError: Cannot read property ‘1’ of null”

My html and javascript look like this:

index.html

<!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>My App</title>

    <link rel="stylesheet" href="/vendor/ionic/release/js/ionic.bundle.min.js" />
    <script type="text/javascript" src="/vendor/ionic/release/js/ionic.bundle.js"></script>
    <script type="text/javascript" src="/vendor/lodash/dist/lodash.min.js"></script>
    <script type="text/javascript" src="/vendor/hammerjs/hammer.min.js"></script>
    <script type="text/javascript" src="/vendor/angular-hammer/angular-hammer.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="nav-title-slide-ios7 bar-positive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>

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

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

app.js

var myApp = angular.module('myApp', ['ionic', 'ngRoute']);
myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('intro', { url: '/', templateUrl: 'app/welcome.html', controller: 'WelcomeController' })
    .state('login', { url: '/account/register', templateUrl: 'app/signup.html', controller: 'RegisterController '})
  ;

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

controllers.js

myApp.controller('WelcomeController', function($location, $scope, $ionicSlideBoxDelegate) {
	$scope.signUpButton_Click = function() {
		$location.url('/account/register');
	};
});
myApp.controller(RegisterController', function($scope) {
});

welcome.html

<ion-view class="dark-background">
  <div>
   Content
  </div>
  <a class="button button-balanced" href="/#/account/register">Sign Up</a>
</ion-view>

signup.html

<ion-view>
   SIgn Up  
</ion-view>

#2

I am having the same problem, please someone reply