如何在angular js应用程序中将一个分区包含在其他页面中？

Question

在我的angularjs应用程序中，我有一个页面订单详细信息，其中有两个部分，leftwrapper和writewrapper。我需要左包装到其他页面，如何将该分区包含在其他页面中？

订单细节

在这个左侧包装器中，意味着在下面的页面中需要我的帐户部分。

阶details.html

<div id="manage" class="page-layout simple tabbed">

<!-- HEADER -->
<div class="header md-accent-bg" layout="row" layout-align="start center">
     <div class="title">
        <span class="md-display-1 font-weight-300">Your Orders!</span>
     </div>
</div>

<md-content layout-padding> 
    <div class="innerContent">

        <div class="leftWrapper">
            <div>                   
                <h1>My Account</h1>
                <div class="leftContent">
                <nav class="{{active}}" ng-click="$event.preventDefault()">
                    <ul>
                        <li>
                            <div class="userInfo">
                                <div class="userImage">
                                    <img md-menu-align-target class="avatar" src="assets/images/avatars/profile.jpg">
                                </div>
                                <div class="userName">
                                    <span style="font-size:15px;">{{vm.name}}</span><br>
                                    <span style="font-size:13px; color:#ccc">{{vm.email}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <hr></hr>
                    <ul>
                        <li>
                            <i class="iconLeft">
                                 <md-icon md-font-icon="icon-cart" class="icon"></md-icon>
                            </i> ORDERS <br>
                            <ul>
                                <li>
                                    <a class="orders" ms-nav-button ui-sref="app.order-details" md-ink-ripple>
                                        <span class="ms-nav-label" >Orders</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <hr></hr>
                    <ul>
                        <li>
                            <i class="iconLeft">
                                  <md-icon md-font-icon="icon-account" class="icon"></md-icon>
                            </i> PROFILE <br>
                            <ul>
                                <li>
                                    <a class="address" ms-nav-button ui-sref="app.personal-details" md-ink-ripple>
                                        <span class="ms-nav-label" >Saved Address</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="wishlist" ms-nav-button ui-sref="app.wishlist" md-ink-ripple>
                                        <span class="ms-nav-label" >Wishlist</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="contributions" ms-nav-button ui-sref="app.manage-contributor" md-ink-ripple>
                                        <span class="ms-nav-label" >Manage Contributions</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="contributions" ms-nav-button ui-sref="app.security" md-ink-ripple>
                                        <span class="ms-nav-label" >Security</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="contributions" ms-nav-button ui-sref="app.message" md-ink-ripple>
                                        <span class="ms-nav-label" >Message to Guest</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="contributions" ms-nav-button ui-sref="app.invitation" md-ink-ripple>
                                        <span class="ms-nav-label" >Invitation Inserts</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <hr></hr>
                    <ul>
                        <li>
                            <i class="iconLeft">
                                  <md-icon md-font-icon="icon-cake" class="icon"></md-icon>
                            </i> Occassion <br>
                            <ul>
                                <li>
                                    <a class="occassion" ng-click="vm.popUpDialog()" md-ink-ripple style="cursor:pointer">
                                        <span class="ms-nav-label" >Add Occassion</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <hr></hr>
                    <ul>
                        <li>
                            <i class="iconLeft">
                                  <md-icon md-font-icon="icon-email" class="icon"></md-icon>
                            </i> TELEGRAM <br>
                            <ul>
                                <li>
                                    <a class="telegram" ms-nav-button ui-sref="app.telegram-rsvp" md-ink-ripple>
                                        <span class="ms-nav-label" >Telegram</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                </div>
            </div>
        </div>

        <div class="writeWrapper">
            <h1>My Orders</h1>
            <hr></hr>
            <div style="width:100%; padding:20px" class="md-whiteframe-3dp" ng-repeat="product in vm.result | filter:searchText">
                <div class="orderId" layout="row" layout-align="space-between center">
                    <div>
                        <b>Placed On</b> : {{product.orderDate | date: "MMMM d, y, h:mm:ss a"}}<br>
                        <b>Order Id</b> : {{ product.transactionId }}
                    </div>
                    <span style="float:right"><md-button class="md-raised md-primary">Details</md-button></span>
                </div>

                <hr>

                <div style="width:100%;  padding:15px" layout="row">                
                    <div>
                        <img ng-src="{{ product.productImage }}" style="height:150px" alt="Image here" ><br>
                    </div>

                    <div style="width:400px; margin-left:30px">
                        <h2>{{ product.productName | characters:30 }}</h2><br>

                        <div class="actionButtons">
                            <md-button class="md-raised">Return/Replace</md-button>
                            <md-button class="md-raised">Get Invoice</md-button>
                        </div>
                    </div>
                </div>

                <div layout="row" layout-align="space-between center">
                    <div>
                        <p>Status :</p>
                    </div>
                    <div>
                        <p>Delivered On :</p>
                    </div>
                </div>
                <hr></hr>
                &nbsp;  
            </div> 
        </div>
    </div>
</md-content>  

Answer 1

您可以使用ng-include包含元素，这里是您的所有页面的整个侧边栏。为此，您只需创建另一个带有所需侧栏的html页面，并将其包含在需要它的页面中。

请在此处查看：AngularJs docs