将JSP加载到Tab中

Question

我有两个标签;列出品牌和添加品牌。列表品牌是我的初始标签。这是我的List品牌jsp：

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.alpha.framework.model.*,java.util.*"%>
<%@taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%@taglib tagdir="/WEB-INF/tags/admin/template" prefix="template"%>
<% Map<String,Object> fieldValues = new HashMap<String,Object>();
%>
<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>

                <ul class="nav nav-tabs content-tab-header" id="content_tab_0">
                    <li><a href="/admin.brands/search"><i class="icon-th-list"></i><tags:label text="list.brands"/></a></li>
                    <li><a href="/admin.brands"><i class="icon-search"></i><tags:label text="search.brands"/></a></li>
                    <li><a href="/admin.brands/new"><i class="icon-plus"></i><tags:label text="add.brand"/></a></li>
                </ul>


                <div class="row-fluid sortable content-searchtable">
                    <span class="searchtable">
                    <template:search.table headerText="search.brands"
                                            submitTo="/admin.brands/search" 
                                            fieldNames="name" 
                                            formName="brand.search.form"
                                            fieldValues="<%=fieldValues %>"
                                            ></template:search.table>

                    </span>


                <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>  
                <!-- content ends -->
            </div><!--/#content.span10-->
<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>

我的添加品牌jsp是：

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.alpha.framework.config.ConfigHolder"%>
<%@page import="com.alpha.framework.config.form.*"%>
<%@page import="com.alpha.framework.Constants,com.alpha.webapps.context.ActionContext,com.alpha.framework.model.DynamicBean"%>
<%@page import="com.alpha.webapps.controller.ModelManager"%>
<%@page import="com.alpha.backend.component.brand.*"%>
<%@page import="com.alpha.backend.component.category.*"%>
<%@page import="com.alpha.backend.component.lookup.*"%>
<%@page import="com.alpha.framework.model.*,java.util.*"%>
<%@taglib tagdir="/WEB-INF/tags/admin/template" prefix="template"%>
<%@taglib uri="/WEB-INF/tlds/app.tld" prefix="app"%>
<%@taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%@taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<%
ModelManager manager = (ModelManager ) session.getAttribute(Constants.MODEL_MANAGER_ATTRIBUTE );

IBrandControl brandControl = (IBrandControl)manager.getComponentController().getComponentObjectByName(Constants.COMPONENT_ADMIN_BRAND);
ICategoryControl categoryControl = (ICategoryControl)manager.getComponentController().getComponentObjectByName(Constants.COMPONENT_ADMIN_CATEGORY);
ILookupControl lookupControl = (ILookupControl)manager.getComponentController().getComponentObjectByName(Constants.COMPONENT_ADMIN_LOOKUP);

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

    <ul class="nav nav-tabs content-tab-header" id="content_tab_0">
        <li><a href="/admin.brands/search"><i class="icon-th-list"></i><tags:label text="list.brands"/></a></li>
        <li><a href="/admin.brands"><i class="icon-search"></i><tags:label text="search.brands"/></a></li>
        <li><a href="/admin.brands/new"><i class="icon-plus"></i><tags:label text="add.brand"/></a></li>
    </ul>

    <template:message></template:message>

    <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>
    </div>
</div>

我有其他jsp文件的页脚，标题等，我只通过加载另一个jsp文件来更改正文。这是我的页面结构：

<template page="/admin/jsp/templates/admin_template.jsp">
        <screen name="admin.template">
            <parameter key="Title" value="/admin/jsp/screens/template-parts/title.jsp" dynamic="true" />
            <parameter key="Header" value="/admin/jsp/screens/template-parts/header.jsp" dynamic="true" />
            <parameter key="Navigation" value="/admin/jsp/screens/template-parts/navigation.jsp" dynamic="true" />
            <parameter key="Breadcrumb" value="/admin/jsp/screens/template-parts/breadcrumb.jsp" dynamic="true" />
            <parameter key="Body" value="body is here" dynamic="false" />
            <parameter key="Footer" value="/admin/jsp/screens/template-parts/footer.jsp" dynamic="true" />

        </screen>
    </template>

我的问题是：如何使用angular.js将不同的jsp文件加载到正文中？我不想加载整个页面。我想通过点击标签切换正文。