Changeing State to a new html page

1

Hi everyone I’m very new to ionic but I was wondering if anyone could let me know what I’m missing in my stateProvider that prevents my html page from opening. My app.js is

angular.module(‘starter’, [‘ionic’])

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('signin', {
            url: '/sign-in',
            templateUrl: 'templates/sign-in.html',
            controller: 'SignInCtrl'
        })
        .state('welcome', {
            url: '/welcome',
            templateUrl: 'view2.html'
        })
    
    $urlRouterProvider.otherwise('/sign-in');
})

.controller('SignInCtrl', function($scope, $state) {

    $scope.signIn = function(user) {
        console.log('Sign-In', user);
        $state.go('welcome');
    };
})

my view2.html page is below and located next to my index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>Well Hello There</p>
</body>
</html>

and the body of my index is

<body ng-app="starter">

<ion-nav-bar class="bar-positive">

</ion-nav-bar>

<ion-nav-view></ion-nav-view>

<script id="templates/sign-in.html" type="text/ng-template">
  <ion-view view-title="Sign-In">
    <ion-content>
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" ng-model="user.username">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" ng-model="user.password">
        </label>
      </div>
      <div>
        <button class="button button-block button-positive" ng-click="signIn(user)">
          Sign-In
        </button>

      </div>
    </ion-content>
  </ion-view>
</script>

<script id="templates/welcome.html" type="text/ng-template">
  <ion-view view-title="Welcome">
    <ion-content>
      <p>
        Welcome to da caribbean man!
      </p>
    </ion-content>
  </ion-view>
</script>
</body>

I’m really not sure why the file won’t show. I know it works when I set the templateUrl to the script id but I’m not sure why an external file doesn’t work. If anyone could help out I would really appreciate it.

2

AngularJS is for single-page applications: you have one html-file with your base structure (header/body). And with the routing you are changing only parts of that page like in ionic the ion-nav-views.

You could do window.location.href = “www.google.de” and go to a new website, but you will loose all connection to your app.

3

Thanks for the replay! Ok so if I use tabs and create the illusion of pages would that affect performance much? And if it’s not too much trouble, I’ve been running into some probelms with my controllers and I want to make sure I’m understandnig them right as well.

I have two buttons that are suppose to link to their controllers

<button class="button button-block button-positive" ng-click="signIn(user)">
  Sign-In
</button>
<button class="button button-block button-positive" ng-click="signUp(user)">
  Sign-Up
</button>

and I have two controllers in my app.js

.controller('SignInCtrl', function($scope, $state) {

    $scope.signIn = function(user) {
        console.log('Sign-In', user);
        $state.go('welcome');
    };
})

.controller('SignUpCtrl', function($scope, $state) {

    $scope.signUp = function(user) {
        console.log('Sign-In', user);
        $state.go('welcome');
    };
})

with the same stateProvider as before. Is their a reason the sign in button works and the sign up doesn’t?