AngularJS實現(xiàn)網(wǎng)站換膚實例
更新時間：2021年02月19日 10:35:40 作者：justforuse
這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)網(wǎng)站換膚的簡單實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
網(wǎng)站不應該只注重功能，還應該注重用戶體驗；成熟的大型網(wǎng)站大都具備讓用戶自行選擇主題及顏色的功能，AngularJS也可以做到這點。
效果圖：
原理是使用ng-href來動態(tài)為網(wǎng)頁更換樣式：
<link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css">
代碼：
<!DOCTYPE html>
<html ng-app="app" ng-controller="mainCtrl">
<head >
<meta charset="UTF-8">
<title></title>
//動態(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:"藍色",
value:"blue"
},
{
name:"紅色",
value:"red"
}
];
//默認選擇第一個樣式
$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
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了AngularJS表格添加序號的方法,涉及AngularJS表格的遍歷及序號添加實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
使用過angular2人都應該知道，angular2提供的Angular CLI來快速搭建，快速生成serives、component、derective、modulet各種模板...下面這篇文章主要給大家介紹了關(guān)于Angular Cli打包的一些事，需要的朋友可以參考下。2017-09-09
Angular動畫實現(xiàn)的2種方式以及添加購物車動畫實例代碼
這篇文章主要給大家介紹了關(guān)于Angular動畫的2種方式以及添加購物車動畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-08-08
本篇文章主要介紹了Angular網(wǎng)絡請求的封裝方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
解決angular雙向綁定無效果,ng-model不能正常顯示的問題
今天小編就為大家分享一篇解決angular雙向綁定無效果,ng-model不能正常顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
總結(jié)AngularJS開發(fā)者最常犯的十個錯誤
AngularJS是如今最受歡迎的JS框架之一，簡化開發(fā)過程是它的目標之一，這使得它非常適合于元型較小的apps的開發(fā)，但也擴展到具有全部特征的客戶端應用的開發(fā)。下面給大家總結(jié)了AngularJS開發(fā)者最常犯的十個錯誤，有需要的可以參考學習下。2016-08-08
AngularJS實現(xiàn)樹形結(jié)構(gòu)(ztree)菜單示例代碼
這篇文章運用示例代碼給大家詳細介紹了利用AngularJS如何實現(xiàn)樹形結(jié)構(gòu)(ztree)菜單，文中僅用了幾行AngularJS代碼就是了這個功能，對大家日常開發(fā)很有幫助，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
不知道大家有沒有發(fā)現(xiàn)在用AngularJS作為前端搭建個人博客的時候，發(fā)現(xiàn)用AngularJs輸出html的時候，瀏覽器并不解析這些html標簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實現(xiàn)這種功能的通過這篇文章來看看吧。2016-09-09
這篇文章主要介紹了AngularJS實現(xiàn)Model緩存的方式，分享了多種AngularJS實現(xiàn)Model緩存的方法，感興趣的小伙伴們可以參考一下2016-02-02
簡單談談require模塊化jquery和angular的問題
下面小編就為大家?guī)硪黄唵握務剅equire模塊化jquery和angular的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06