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

考虑这个$routeProvider配置为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标签传输来节省网络带宽？

来源

2017-06-23 Ryan

你可以这样说，但同样的，它不。如果你真的需要节省网络带宽，我知道this website，但我不知道jQuery足够了解它在做什么，所以我不能在那里做任何事情来帮助你。该网站只有一个页面，但导航菜单隐藏并显示了div，因此您只能通过一页来获得那种“多页面”网站。希望我回答你的问题，并给你一些你可以解决的问题。我确实把jQuery从网站上拉下来了，但是我无法让它起作用，所以也许你可以弄清楚，并且发现我发生了什么。

编辑： 我想通了jQuery，所以我将把我的全codepen以下）。

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

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

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

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

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

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

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

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

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

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>

来源

2017-06-23 05:46:36 InvincibleM

使用$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得到改变的页面。因此，切换页面将从客户端获取，而不是从服务器端获取。

来源

2017-06-23 05:57:59 selvassn

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

回答

相关问题