Ionic Framework can't work

Question

I want to build a hybrid mobile app with Ionic. Here is my first trial via plunker. As you can see, my plunker shows a blank page. I did inspect what's the problem, but still not found. My goal is to create a login page in first time my app starts, then users will be redirected into home-page.html. Since it's just example, I don't want any authentication code, I only need to have all those route/links work well.

Please take a look in my index.html, if I replace all those code within ...... with a normal HTML tags, it's displaying as normal.

1. Head section:

   <script src="http://code.ionicframework.com/1.1.1/js/ionic.min.js"></script>
   <script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>
   
   <link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet" />
   <link href="style.css" rel="stylesheet"/>
   
   <script src="app.js"></script>
   

2. Body section

    <script id="templates/login.htm" type="text/ng-template">
      <ion-view ng-controller="LoginCtrl">
        <ion-content>
          <h1>Login page</h1>
          <button type="button" class="btn btn-default" ng-click="logIn()">Login Press</button>
        </ion-content>
      </ion-view>
    </script>
   
    <script id="templates/home-page.htm" type="text/ng-template">
      <ion-view>
        <ion-content>
          <h1>Home Page</h1>
        </ion-content>
      </ion-view>
    </script>
   

In my app.js, I defined two states like this:

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

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

  $urlRouterProvider.otherwise('/login');

  $stateProvider
    .state('login', {
      url: "/login",
      templateUrl: 'templates/login.html',
      controller: 'LoginCtrl'
    })

    .state('home', {
      url: "/home",
      templateUrl: 'templates/home-page.html'
    });
});

app.controller('LoginCtrl', function($scope, $state, $location) {
  $scope.logIn = function() {
  //$state.go('/home');
   alert('Clicked');
  };
});

Any solution will be appreciated. Thanks.

Answer 1

not sure why but it seams that your ng-templates are not found, you are getting 404 on 'templates/login.html'. When you are using $stateProvider you need to put ui-view to show/display your content. I have modify your plunker a little bit, move templates to a separate files and add ui-view, all it's working fine now, please check here.