关于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>

angular开发单页面应用--页面资源部分的更多相关文章

  1. EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本

    为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

  2. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载

    为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

  3. HTML页面处理以及资源文件的加载

    Javascript 异步加载详解 这篇文章很详细的介绍了HTML的页面处理以及资源文件的加载. 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading ...

  4. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  5. 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明 ...

  6. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  7. node.js入门学习（二）MIME模块，request和response对象，demo之不同url请求不同html页面，页面包含图片、样式css等静态资源

    一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...

  8. Laravel 5.5 + Vue 开发单页应用

    上次我用 laravel5.3 + Vue 开发了一个简单的单页应用,这次我打算将其升级到 laravel5.5,在升级的过程中,做一下记录,其源码放在 github 上面,源码地址   开发环境 软 ...

  9. Web设计中打开新页面或页面跳转的方法 js跳转页面

    Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...

随机推荐

  1. servlet过滤器使用

    servlet的过滤器夹在用户和servlet之间,可以截获并预处理或者打断{用户到servlet的请求或servlet到用户的响应},但本身并不能处理和响应用户请求. filter类必须实现Filt ...

  2. [LeetCode] Bitwise AND of Numbers Range 数字范围位相与

    Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all numbers ...

  3. CF719E（线段树+矩阵快速幂）

    题意:给你一个数列a,a[i]表示斐波那契数列的下标为a[i],求区间对应斐波那契数列数字的和,还要求能够维护对区间内所有下标加d的操作 分析:线段树 线段树的每个节点表示(f[i],f[i-1])这 ...

  4. Linux的Shell

    Shell是命令行解释和执行器,是介于使用者和操作系统内核(Kernel)之间的一个接口: Bash (Bourne Again shell) 是Linux系统下经典的Shell;

  5. JavaScript简单对象的定义方法

    工厂模式: 初级开发者可能会这样定义对象: var obj = new Object(); obj.name = "hero"; obj.showName=function (){ ...

  6. Android Studio 常见异常解决办法

    Error:Failed to crunch file D:\Englis_installation_directory\AndroidStudio\AndroidWorkSpace\YoukAndr ...

  7. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  8. 【BZOJ-4197】寿司晚宴 状压DP

    4197: [Noi2015]寿司晚宴 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 694  Solved: 440[Submit][Status] ...

  9. 【POJ-1390】Blocks 区间DP

    Blocks Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 5252   Accepted: 2165 Descriptio ...

  10. 认真研究一下Gradients css3(无聊笔记)(原)

    渐变(gradients)分为2种: 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义 红色框表示可重 ...