zoukankan      html  css  js  c++  java
  • angular开发单页面应用--页面资源部分

    关于angular是什么,能够干什么就不在这里解释了,自行搜索了,或者等稍晚一点再解释。。。

      angular适合开发单页面应用,这句话在介绍angular的网站和博客里都可以提到。因为angular是一个MVC架构,熟悉asp.net的MVC框架的都见识过,一般会将相同的部分抽出来做成一个母版页面,每个页面都是通过拼接母版和内容区域然后一起发送到浏览器。

      本文所讲述的构建angular应用是完全脱离后台的页面开发,angular中文社区也是采用的这种开发模式,打开angular中文社区,查看源代码,除了头部和底部其他地方都看不到DOM结构

      angular在做单页面应用的时候也是这样,分为两个部分

    • 主体页面,主要放置页面的相同部分,比如头部,左侧导航,底部,还用来放置整个网站中用的资源,这些资源在加载的时候只会加载一次并且是一次性加载,在整个应用中都不会加载新的脚本和样式文件
    • 模块页面,在每次点击不同的路由或者页面的时候会加载这一部分
    <!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>
  • 相关阅读:
    RocketMQ源码 — 十、 RocketMQ顺序消息
    RocketMQ源码 — 九、 RocketMQ延时消息
    RocketMQ源码 — 八、 RocketMQ消息重试
    HDU3439 Sequence
    Cipolla算法学习小记
    BZOJ2286: [Sdoi2011]消耗战
    BZOJ4873 寿司餐厅
    BZOJ1718 [Usaco2006 Jan] Redundant Paths 分离的路径
    BZOJ1123 [POI2008]BLO
    BZOJ3996 TJOI2015线性代数
  • 原文地址:https://www.cnblogs.com/zhang-jian/p/6257149.html
Copyright © 2011-2022 走看看