如何通过单击不同的选项卡查看不同的JSP文件

Question

首先，我是angular.js的初学者。

我有3个jsp文件。 main.jsp，list.jsp和new.jsp。

我可以从不同的网址查看它们，但我想在main.jsp中将它们组合在一起。所以我在下面试过，但我没有成功。我想在标签下显示new.jsp和list.jsp文件。

我的main.jsp

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

            <div id="content" class="span10">   
                <div class="content-header">
                    <div class="row">
                        <div class="content-name span4">
                            <h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
                        </div>
                        <div class="span8 button-group">
                            <jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
                        </div>
                    </div>
                </div>
                <div ng-app="TabsApp">
                 <div id="tabs" ng-controller="TabsCtrl">
                    <ul class="nav nav-tabs content-tab-header" id="content_tab_0">

                        <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"><a><i class="{{tab.cssClass}}"></i><tags:label text="{{tab.title}}"/></a></li>
                    </ul>
                 </div>
                 <div id="mainView">
                    <div ng-include="currentTab"></div>
                 </div>
               </div>
                <!-- content ends -->
            </div><!--/#content.span10-->



<script>

angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
    $scope.tabs = [{
            title: 'list.brands',
            url: '/admin.brands/list',
            cssClass: 'icon-th-list'
        }, {
            title: 'add.brand',
            url: '/admin.brands/new',
            cssClass: 'icon-plus'
    }];

    $scope.currentTab = '/admin.brands/list';

    $scope.onClickTab = function (tab) {
        $scope.currentTab = tab.url;
    }

    $scope.isActiveTab = function(tabUrl) {
        return tabUrl == $scope.currentTab;
    }
}]);
</script>

的List.jsp。请注意，list.jsp有自己的控制器。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>        
            <div id="content" class="span10">   
                <div class="content-header">
                    <div class="row">
                        <div class="content-name span4">
                            <h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
                        </div>
                        <div class="span8 button-group">
                            <jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
                        </div>
                    </div>
                </div>

                <table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-app="MyApp" ng-controller="PostsCtrl">

                    <thead>

                    <tr>
                        <th><tags:label text="brandid"/></th>

                        <th><tags:label text="name"/></th>
                        <th><tags:label text="isactive"/></th>

                        <th></th>
                        </tr>
                    </thead>
                    <tbody>



                        <tr id="actionresult{{$index + 1}}" ng-repeat="post in posts | filter:search">
                            <td>{{post.brandid}}</td>
                            <td>{{post.name}}</td>
                            <td>{{post.isactive}}</td>

                            <td>
                            <a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/edit?brandid={{post.brandid}}" ><tags:label text="edit"/></a>
                            <a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{post.brandid}}" ><tags:label text="delete"/></a>
                            </td>
                        </tr>


                    </tbody>
                </table>
                </div>

                <script>
                var app = angular.module("MyApp", []);

                app.controller("PostsCtrl", function($scope, $http) {
                  $http.get('http://localhost/admin.brands/getJSONDataOfSearch').
                    success(function(data, status, headers, config) {
                      $scope.posts = data;

                    }).
                    error(function(data, status, headers, config) {

                    });
                });
                </script>

new.jsp

<div class="row-fluid sortable">
        <div class="box span12">
            <%-- <div class="box-header" data-original-title>
                <h2>
                    <i class="glyphicon glyphicon-info-sign"></i>
                    <tags:label text="new.brand"/></h2>
            </div> --%>

            <div class="box-content">
                <form class="form-horizontal" action='/admin.brands/add' data-toggle="modalform" data-popup="modal">
                    <fields:form formName="brand.form" >

                        <div class="section-heading"></div>

                        <div class="control-group">
                            <label class="control-label" for="selectError"><tags:label text="name"/> *</label>
                            <div class="controls">
                                <fields:field name="name" cssClass="validate[required]"/>
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
                            <div class="controls">
                                <fields:field name="isactive" value="1"/>
                            </div>
                        </div>

                        <div class="section-heading"><tags:label text="logo"/></div>

                        <div class="control-group">
                            <label class="control-label" for="textarea2"></label>
                            <div class="controls">
                                <template:file.upload dropzoneWidth="200px" dropzoneHeight="160px" maxFiles="1"></template:file.upload>
                            </div>
                        </div>


                        <div class="form-actions">
                            <a href="/admin.brands" class="btn btn-ext-darkblue"><tags:label text="close"/></a>
                            <button type="submit" class="btn btn-ext-lightblue btn-modal-trigger"><tags:label text="save"/></button>
                        </div>

                    </fields:form>
                </form>
            </div>
        </div>