AngularJS實(shí)現(xiàn)網(wǎng)站換膚實(shí)例

更新時(shí)間：2021年02月19日 10:35:40 作者：justforuse

這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)網(wǎng)站換膚的簡(jiǎn)單實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

網(wǎng)站不應(yīng)該只注重功能，還應(yīng)該注重用戶體驗(yàn)；成熟的大型網(wǎng)站大都具備讓用戶自行選擇主題及顏色的功能，AngularJS也可以做到這點(diǎn)。

效果圖：

原理是使用ng-href來(lái)動(dòng)態(tài)為網(wǎng)頁(yè)更換樣式：

代碼：

<!DOCTYPE html>
<html ng-app="app" ng-controller="mainCtrl">
<head >
 <meta charset="UTF-8">
 <title></title>
 //動(dòng)態(tài)更新CSS樣式
 <link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css">
 <script src="../angular.js"></script>
 <style type="text/css">
 h1{
  font-style:italic;
 }
 </style>
 <script type="text/javascript">
 angular.module("app", [])
  .controller("mainCtrl", function($scope){
  $scope.options = [
   {
   name:"藍(lán)色",
   value:"blue"
   },
   {
   name:"紅色",
   value:"red"
   }
  ];
  //默認(rèn)選擇第一個(gè)樣式
  $scope.theme = $scope.options[0];
  })
 </script>
</head>
<body>
 <select ng-model="theme" ng-options="c.name for c in options">
 </select>
 <h1>Welcome</h1>
 <ul>
 <li>Home</li>
 <li>About</li>
 <li>Contact</li>
 </ul>
</body>
</html>

blue.css

h1{
 color:blue;
}
ul li{
 display:inline-block;
}

red.css

h1{
 color:red;
}

此文檔的作者：justforuse
Github Pages：justforuse

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS表格添加序號(hào)的方法
這篇文章主要介紹了AngularJS表格添加序號(hào)的方法,涉及AngularJS表格的遍歷及序號(hào)添加實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
簡(jiǎn)單談?wù)勱P(guān)于Angular Cli打包的事
使用過(guò)angular2人都應(yīng)該知道，angular2提供的Angular CLI來(lái)快速搭建，快速生成serives、component、derective、modulet各種模板...下面這篇文章主要給大家介紹了關(guān)于Angular Cli打包的一些事，需要的朋友可以參考下。
2017-09-09
Angular動(dòng)畫實(shí)現(xiàn)的2種方式以及添加購(gòu)物車動(dòng)畫實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Angular動(dòng)畫的2種方式以及添加購(gòu)物車動(dòng)畫的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-08-08
Angular網(wǎng)絡(luò)請(qǐng)求的封裝方法
本篇文章主要介紹了Angular網(wǎng)絡(luò)請(qǐng)求的封裝方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
解決angular雙向綁定無(wú)效果,ng-model不能正常顯示的問(wèn)題
今天小編就為大家分享一篇解決angular雙向綁定無(wú)效果,ng-model不能正常顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
總結(jié)AngularJS開(kāi)發(fā)者最常犯的十個(gè)錯(cuò)誤
AngularJS是如今最受歡迎的JS框架之一，簡(jiǎn)化開(kāi)發(fā)過(guò)程是它的目標(biāo)之一，這使得它非常適合于元型較小的apps的開(kāi)發(fā)，但也擴(kuò)展到具有全部特征的客戶端應(yīng)用的開(kāi)發(fā)。下面給大家總結(jié)了AngularJS開(kāi)發(fā)者最常犯的十個(gè)錯(cuò)誤，有需要的可以參考學(xué)習(xí)下。
2016-08-08
AngularJS實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)(ztree)菜單示例代碼
這篇文章運(yùn)用示例代碼給大家詳細(xì)介紹了利用AngularJS如何實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)(ztree)菜單，文中僅用了幾行AngularJS代碼就是了這個(gè)功能，對(duì)大家日常開(kāi)發(fā)很有幫助，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。
2016-09-09
AngularJS通過(guò)$sce輸出html的方法
不知道大家有沒(méi)有發(fā)現(xiàn)在用AngularJS作為前端搭建個(gè)人博客的時(shí)候，發(fā)現(xiàn)用AngularJs輸出html的時(shí)候，瀏覽器并不解析這些html標(biāo)簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實(shí)現(xiàn)這種功能的通過(guò)這篇文章來(lái)看看吧。
2016-09-09
AngularJS實(shí)現(xiàn)Model緩存的方式
這篇文章主要介紹了AngularJS實(shí)現(xiàn)Model緩存的方式，分享了多種AngularJS實(shí)現(xiàn)Model緩存的方法，感興趣的小伙伴們可以參考一下
2016-02-02
簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剅equire模塊化jquery和angular的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06