IONIC Partial View Not Showing

I am having an issue navigating to a partial view from the main view in ionic. I am doing everything according to the defined rules in ionic but I cannot seems to wrap my head around the issue yet.

My code is as follows;

The index.html:

<!DOCTYPE html>
 <html lang="en" class="no-js">
    <meta charset="UTF-8" />
     <script src="lib/ionic/js/ionic.bundle.js"></script>
<body ng-app="app">

    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/AppCtrl.js"></script>
    <script type="text/javascript" src="app/PartialCtrl.js"></script>


My menu.html file :

<ion-list fill-mnu-item>
      <ion-item  nav-clear  href="#app/partialview">HOME</ion-item>  

My app.js file :

angular.module('app', ['ionic', 'app.controllers'])

.run(['$ionicPlatform',function($ionicPlatform) {

 $ionicPlatform.ready(function() {
 // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
if (window.StatusBar) {
  // org.apache.cordova.statusbar required

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

$stateProvider.state('app', {
url: "/app",
templateUrl: "app/menu.html",
controller: 'AppCtrl as vm'

 $stateProvider.state('app.partialview', {
    url: "/partialview",
    views: {
        'menuContent': {
        templateUrl: "app/partials/partialview.html",
        controller: 'PartialCtrl as vm'

  // if none of the above states are matched, use this as the fallback

My AppCtrl controller file :

 //App Controller 
  'use strict';


  AppCtrl.$Inject = ['$scope','$ionicModal','$timeout','$state'];

  function AppCtrl($scope, $ionicModal, $timeout,$state){

   console.log ("App Controller Initialed ---> ");



My PartialCtrl.js Controller file :

(function (){

 'use strict';

  PartialCtrl.$inject = ['$scope'];

  function PartialCtrl($scope){
     var vm = this;
     console.log("PartialCtrl Initiated -->");



All I want to do is simply goto partialview.html when I click on the link on the menu.html file.

Could someone please let me know what I am doing wrong ?.

My file structure is as shown below :

enter image description here
Could someone please help me out ?.

Source: javascript

Leave a Reply