Navigating to TemplateURL in MobileAngularUI not working

Question

I am creating a new project in MobileAngularUI and previously from Ionic project background. I am having some difficulties in navigating from one page to another using template URL and my controller is also not binding. I end up in defining all possibilities and class path but it is not navigation to another HTML controller.

Below is the source for my project.

In app.js

angular.module('FirstMobileAngularRouter', [
  'ngRoute',
  'mobile-angular-ui',
  'FirstMobileAngularRouter.controllers.Main',
  'FirstMobileAngularRouter.controllers.Calender'
])

.config(function($routeProvider) {
  //$routeProvider.when('/', {templateUrl:'home.html',  reloadOnSearch: false});
  $routeProvider
      .when('/', {templateUrl:'home.html',  reloadOnSearch: false})
      .when('/calender',
          { templateUrl:'/calender.html',
            controller: 'CalenderCtrl',
            reloadOnSearch: false
          })
      .otherwise({redirectTo: '/'});
});

In Sidebar HTML

<div class="scrollable">
  <h1 class="scrollable-header app-name">FirstMobileAngularRouter</h1>  
  <div class="scrollable-content">
    <div class="list-group" ui-turn-off='uiSidebarLeft'>
      <a class="list-group-item" href="#/">Home <i class="fa fa-chevron-right pull-right"></i></a>
      <a class="list-group-item" href="#/calender">Calender <i class="fa fa-chevron-right pull-right"></i></a>
    </div>
  </div>
</div>

In Index.html

<div class="navbar navbar-app navbar-absolute-bottom">
        <div class="btn-group justified">
          <a href="#/home" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Home</a>
          <a href="#/calender" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> Calender</a>
          <a href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a>
        </div>
      </div>

 <head>
 <script>
      document.write('<base href="' + document.location + '" />');
 </script>
 <script type="text/ng-template" id="home.html">
     <h2>Home</h2>
 </script>
 <script type="text/ng-template" id="calender.html">
    <h2>Calender</h2>
 </script>
  <script src="calenderCtrl.js"></script>
 </head>

In CalenderCtrl.js

angular.module('FirstMobileAngularRouter.controllers.Calender', [])

    .controller('CalenderCtrl', function($scope, $routeParams){

    });

But it is not navigating to Calender page.

Below is the link for complete 2 page project from MobileAngularUI for free download

FirstMobileAngularUI project

Navigating to TemplateURL in MobileAngularUI not working

0 Answers0