angular.js - angularjs不同标签页切换 ui-view，且不 刷新页面

Question

html:

   <p class="nav">
        <p class="nav_container">
            <span ng-repeat="nav in navs" ui-sref-active="li_selected" ui-sref=".{{nav.url}}">
                {{nav.name}}
                <em ng-click="CloseNav(nav.value)"></em>
            </span>
        </p>
    </p>
    <p class="content clearFix" >
        <p ui-view="" ng-style="high" style="overflow:auto;"></p>
    </p>

如图所示，点击不同的标签，ui-view区域显示不同的页面。但是在切换页面的同时，会重新刷新页面，我在页面上的操作都会被刷新掉。我想实现大概如：

    <p ui-view="html1" ng-show="html1"></p>
    <p ui-view="html2" ng-show="html2"></p> 
    <p ui-view="html3" ng-show="html3"></p> 
    <p ui-view="html4" ng-show="html4"></p> 

通过不同的标签页来控制不同ui-view的显示，或隐藏，同时保留用户的操作，不用刷新页面。
刚学习angularjs，对ui-view使用不熟练，求大神解答我这思路是不是正确的，能实现的话给出详细的代码；不正确的话，有什么别的办法吗，也请给出详细的代码，谢谢了！！

Answer 1

It is enough to set up a ui-view, you only need to load different templates for different states

Answer 2

This has nothing to do with ui-router. Ordinary page switching itself cannot save the input in the input.
You can:

1. The data entered on the page is persisted to the backend when switching tabs, that is, it is saved first when switching tabs

2. or save to service

3. Or save it to localstorage
   Anyway, find a place to save it and get it when you switch back

Also refer to: sof

Answer 3

First of all, switching tabs does not require refreshing the page. You can use angular.factory to create a cache and cache the data after modification. If you don’t use router and want to use ng-show to control the display of 4 views, you can replace ui-view with include

Answer 4

Each tab corresponds to a ui-view, and each page can be displayed in a different view

Answer 5

angular.factory creates a cache and caches the data after modification, @prototype

Use caching, this is a good idea, I learned it