是否使用$ 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節省網絡帶寬？

回答

相關問題