Html 使用$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

有home，about，contact，被路由到不同的页面时，它不是每次都要传输html标记吗

---

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

你可以说它节省了网络带宽，但同样地，它也没有。如果您真的需要节省网络带宽，我知道，但我对jQuery了解不够，无法理解它在做什么，因此我无法在那里做任何事情来帮助您。该网站只有一个页面，但是导航菜单隐藏并显示div，所以你只需要一个页面就可以得到那种“多页面”网站。希望我回答了你的问题，给了你一些你可以解决的问题。我确实从网站上删除了jQuery，但是我无法让它工作，所以也许你可以找出它，然后告诉我发生了什么

编辑： 我算出了jQuery，所以我将把完整的代码笔放在下面；）

$（函数（）{
$（“#导航主页”）。单击（函数（）{
$（“#home”）.show（）；
$（“#项目”）.hide（）；
$（“#联系人”）.hide（）；
$（“.selected”）.removeClass（“selected”）；
$（“#导航主页”）.addClass（“选定”）；
});
$（“#nav项目”）。单击（函数（）{
$（“#home”）.hide（）；
$（“#项目”）.show（）；
$（“#联系人”）.hide（）；
$（“.selected”）.removeClass（“selected”）；
$（“#nav项目”）.addClass（“选定”）；
});
$（“#导航联系人”）。单击（函数（）{
$（“#home”）.hide（）；
$（“#项目”）.hide（）；
$（“#联系人”）.show（）；
$（“.selected”）.removeClass（“selected”）；
$（“#导航联系人”）.addClass（“选定”）；
});
});
正文{
填充顶部：4em
}
#导航栏{
身高：100%；
宽度：14em；
填充：0.5em；
}
#导航条h1{
边缘顶部：1米；
边缘底部：2米；
显示：块；
}
#纳瓦尔里酒店{
显示：列表项；
边缘：0.2米0微米；
}
#纳瓦尔{
利润率：1.4em；
显示：块；
}
#页面{
填充顶部：0；
左侧填充：16.5em；
}
#导航栏{
位置：固定；
宽度：100%；
高度：3em；
排名：0；
左：0；
背景色：#282726；
盒影：插图-1em 0 2em rgba（0,0,0,0.2）；
颜色：#FFFFFF；
文本阴影：0.01米rgba（0,0,0,0.4）；
文本对齐：居中；
z指数：100；
字体大小：110%；
}
#导航条h1{
字号：2em；
颜色：#0077FF；
边缘：0.2米；
显示：内联；
}
#纳瓦尔{
列表样式：无；
字号：1.4em；
文本对齐：左对齐；
保证金：0.6em；
显示：内联；
}
#纳瓦尔里酒店{
边缘：0.2米；
显示：内联；
光标：指针；
}
#导航栏ul li：悬停，选中导航栏ul li{
颜色：#0077FF；
}

样本页

-主页
-项目
-联系人

这里的家居用品
项目列表在这里
使用
$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

-script.js
-index.html
-页数
-----home.html
-----关于.html
-----contact.html

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