angular開發單頁面應用--頁面資源部分

時間 2019-11-17

原文原文鏈接

關於angular是什麼，可以幹什麼就不在這裏解釋了，自行搜索了，或者等稍晚一點再解釋。。。javascript

　　angular適合開發單頁面應用，這句話在介紹angular的網站和博客裏均可以提到。由於angular是一個MVC架構，熟悉asp.net的MVC框架的都見識過，通常會將相同的部分抽出來作成一個母版頁面，每一個頁面都是經過拼接母版和內容區域而後一塊兒發送到瀏覽器。css

　　本文所講述的構建angular應用是徹底脫離後臺的頁面開發，angular中文社區也是採用的這種開發模式，打開angular中文社區，查看源代碼，除了頭部和底部其餘地方都看不到DOM結構html

　　angular在作單頁面應用的時候也是這樣，分爲兩個部分java

主體頁面，主要放置頁面的相同部分，好比頭部，左側導航，底部，還用來放置整個網站中用的資源，這些資源在加載的時候只會加載一次而且是一次性加載，在整個應用中都不會加載新的腳本和樣式文件
模塊頁面，在每次點擊不一樣的路由或者頁面的時候會加載這一部分

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta content="viewport">
    <title>Angular</title>
    <!-- 加載全部的樣式文件 -->
    <link rel="stylesheet" href="one.css">
    <link rel="stylesheet" href="two.css">
    <!-- 加載全部的樣式文件 -->
</head>
<body>
    <div ui-view>加載全部的模塊頁面</div>
</body>
<!-- 加載全部的腳本文件 -->
<script type="text/javascript" src="one.js"></script>
<script type="text/javascript" src="two.js"></script>
<!-- 加載全部的腳本文件 -->
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。