使用 $routeProvider 会节省网络带宽吗?
Posted
技术标签:
【中文标题】使用 $routeProvider 会节省网络带宽吗?【英文标题】:Does using $routeProvider save network bandwidth? 【发布时间】:2017-11-26 13:58:01 【问题描述】:考虑navbar
的$routeProvider
配置并假设没有缓存
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
有home、about、contact 被路由到不同页面的情况时,不是每次都需要传输html 标签吗?
通过消除html标签传输是否仍然节省了网络带宽?
【问题讨论】:
【参考方案1】:你可以说它有,但实际上它没有。如果你真的需要节省网络带宽,我知道this website,但我对 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">- Home</li>
<li id="nav-projects">- Projects</li>
<li id="nav-contact">- 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>
【讨论】:
【参考方案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 进行更改。因此,虽然切换页面将从客户端而不是从服务器端获取。
【讨论】:
以上是关于使用 $routeProvider 会节省网络带宽吗?的主要内容,如果未能解决你的问题,请参考以下文章