子文件夹

Question

我正在使用离子选项卡和侧边菜单的优秀模板，因为选项卡中的导航存在问题。但是，当我使用代码笔示例并将html文件结构化为模板文件夹并更新app.js文件时，我将丢失导航。我显然不能正确理解js链接格式。请有人向我解释。

My code pen is here The original is here

app.js（每个html文件都在www / templates

中

angular.module('ionicApp', ['ionic'])

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

    $stateProvider
        .state('entry', {
            url: '/entry/templates',
            templateUrl: 'templates/entry.html',
            controller: 'EntryPageController'
        })

        .state('main', {
            url: '/main/templates',
            templateUrl: 'templates/mainContainer.html',
            abstract: true,
            controller: 'MainController'
        })

        .state('main.home', {
            url: '/home',
            views: {
                'main': {
                    templateUrl: 'templates/home.html',
                    controller: 'HomePageController'
                }
            }
        })

        .state('main.info', {
            url: '/info',
            views: {
                'main': {
                    templateUrl: 'templates/info.html',
                    controller: 'InfoPageController'
                }
            }
        })

        .state('main.tabs', {
            url: '/tabs',
            views: {
                'main': {
                    templateUrl: 'templates/tabs.html',
                    controller: 'TabsPageController'
                }
            }
        })

    $urlRouterProvider.otherwise('/entry');
}])

.controller('MainController', ['$scope', function ($scope) {
    $scope.toggleMenu = function () {
        $scope.sideMenuController.toggleLeft();
    }
}])

.controller('EntryPageController', ['$scope', '$state', function ($scope, $state) {
    $scope.navTitle = 'Entry Page';

    $scope.signIn = function () {
        $state.go('main.home');
    }
}])

.controller('HomePageController', ['$scope', '$state', function ($scope, $state) {
    $scope.navTitle = 'Home Page';

    $scope.leftButtons = [{
        type: 'button-icon icon ion-navicon',
        tap: function (e) {
            $scope.toggleMenu();
        }
    }];
}])

.controller('InfoPageController', ['$scope', '$state', function ($scope, $state) {
    $scope.navTitle = 'Info Page';

    $scope.leftButtons = [{
        type: 'button-icon icon ion-navicon',
        tap: function (e) {
            $scope.toggleMenu();
        }
    }];
}])

.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
    $scope.navTitle = 'Tab Page';

    $scope.leftButtons = [{
        type: 'button-icon icon ion-navicon',
        tap: function (e) {
            $scope.toggleMenu();
        }
    }];
}])

enter code here