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>