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>