使用$ routeProvider是否节省networking带宽?

考虑这个$routeProviderconfiguration的navbar 并假定没有caching

  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' }); }); 

我在网上阅读,单页应用程序的优势之一是networking带宽,因为它不需要每次切换页面时传输HTML标签。

但是,当我们有以上的情况navbar有家,关于联系,被路由到单独的页面,是不是每次都必须传输HTML标签?

它是否通过消除HTML标签传输来节省networking带宽?

你可以这么说,但是相反,它不是。 如果你真的需要节省networking带宽,我知道这个网站,但我不知道jQuery足够了解它在做什么,所以我不能做任何事情来帮助你。 该网站只有一个页面,但导航菜单隐藏和显示的div,所以你只能得到那种“多页”的网站只有一页。 希望我回答你的问题,给你一些你可以解决的问题。 我没有把jQuery从网站上拉下来,但是我无法把它运行起来,所以也许你可以把它弄清楚,并且PM发生了什么事情。

编辑:我想出了jQuery,所以我会把我的完整codepen下面;)。

 $(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> 

通过使用$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来获取更改。 因此,切换页面将从客户端而不是从服务器端获取。