使用$routeProvider是否节省网络带宽？

Question

考虑一下这个navbar 的navbar配置，假设没有缓存

    app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
    });

我在网上读到，单页应用程序的优点之一是网络带宽，因为它不需要每次用户切换页面时传输html标记。

然而，当我们有以上的情况，navbar有家，关于，联系被路由到不同的页面，它不是必须转移html标签每次？

它是否仍然通过消除html标签传输来节省网络带宽？

Answer 1

你可以说是这样，但实际上并非如此。如果你真的需要节省网络带宽，我知道本网站，但我不太了解jQuery在做什么，所以我不能在那里做任何事情来帮助你。该网站只有一页，但导航菜单隐藏和显示div的，所以你得到那种“多页”网站只有一页。希望我回答了你的问题，给了你一些你可以做的事情。我确实把jQuery从网站上删除了，但我无法让它工作，所以也许你可以弄清楚它，并PM我发生了什么。

编辑：，我计算出了jQuery，所以我会把我的完整代码放在下面;)。

​

$(function(){
				$("#nav-home").click(function(){
					$("#home").show();
					$("#projects").hide();
					$("#contact").hide();

					$(".selected").removeClass("selected");

					$("#nav-home").addClass("selected");
				});

				$("#nav-projects").click(function(){
					$("#home").hide();
					$("#projects").show();
					$("#contact").hide();

					$(".selected").removeClass("selected");

					$("#nav-projects").addClass("selected");
				});

				$("#nav-contact").click(function(){
					$("#home").hide();
					$("#projects").hide();
					$("#contact").show();

					$(".selected").removeClass("selected");

					$("#nav-contact").addClass("selected");
				});
			});

body {
  padding-top: 4em
}

#navbar {
                    height:100%;
                    width: 14em;
                    padding: 0.5em;
                }

                #navbar h1 {
                    margin-top: 1em;
                    margin-bottom: 2em;
                    display: block;
                }

                #navbar ul li {
                    display: list-item;
                    margin: 0.2em 0em;
                }

                #navbar ul {
                    margin: 1.4em;
                    display: block;
                }

                #page {
                    padding-top: 0;
                    padding-left: 16.5em;
                }
#navbar {
                position: fixed;
                width: 100%;
                height: 3em;
                top: 0;
                left: 0;
                background-color: #282726;
                box-shadow: inset -1em 0 2em rgba(0,0,0,0.2);
                color: #FFFFFF;
                text-shadow: 0 0 1em rgba(0,0,0,0.4);
                text-align: center;
                z-index: 100;
                font-size: 110%;
            }

            #navbar h1 {
                font-size: 2em;
                color: #0077FF;
                margin: 0.2em;
                display: inline;
            }

            #navbar ul {
                list-style: none;
                font-size: 1.4em;
                text-align: left;
                margin: 0.6em;
                display: inline;
            }

            #navbar ul li {
                margin: 0.2em;
                display: inline;
                cursor: pointer;
            }

            #navbar ul li:hover,#navbar ul li.selected {
                color: #0077FF;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<h1>Sample Page</h1>
<ul>
<li id="nav-home" class="selected">-&nbsp;Home</li>
<li id="nav-projects">-&nbsp;Projects</li>
<li id="nav-contact">-&nbsp;Contact</li>
</ul>
</div>

<div id="home">Home Items Here</div>

<div id="projects" style="display: none;">Project List Here</div>

<div id="contact" style="display: none;">Contact Me here</div>

​

Answer 2

通过使用$routeProvider，您仍然在维护单个页面应用程序。它只是改变了网页的内容，而不是再次刷新整个页面。

  - script.js             <!-- stores all our angular code -->
- index.html            <!-- main layout -->
- pages                 <!-- the pages that will be injected into the main layout -->
----- home.html
----- about.html
----- contact.html

在上面的代码结构中，只有注入到index.html的页面才会通过使用$routeprovider而不是index.html得到更改。因此，在切换页面时，将从客户端获取，而不是从服务器端获取。