Ionic Framework can't work - angularjs

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