关于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. mysql benchmark基准测试

    git项目地址: https://github.com/akopytov/sysbench 利用sysbench很容易对mysql做性能基准测试(当然这个工具很强大,除了测试主流数据库性能,还能测试其 ...

  2. 怎样简单灵活地将DataTable中的数据赋值给model

    最近在做的一个项目中,有13个方法都需要用到同一种处理方式:通过SQL语句从数据库获取一条指定的数据,并将该数据中的每个值都赋值给一个model,再将这个model中的数据通过微信发送出去.每个方法都 ...

  3. IT培训行业揭秘(五)

    前面说了一大堆,简单揭露了一些目前培训行业鱼龙混在的情况,那么今天我就站在一个即将毕业的大学生角度来谈谈如何选择一个靠谱的培训机构. 你即将大学毕业了,在大学里面浑浑噩噩的混了几年,马上就要离开校园, ...

  4. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  5. 基本组件的使用——UITabBarController

    和UINavigationController的作用差不多,UITabBarController也可以在多个UIViewController中切换 这个控件的使用相对简单,只需要为该控件的viewCo ...

  6. Android国际化--I18N

    在res下创建对应国家的环境的目录如:values-zh,values-en,然后在对应的目录下将对应的字符串翻译成对应国家的语言即可.

  7. Android零碎知识

    1.当启动一个APP时按下后退键会调用onBackPressed方法. 如果想要屏蔽后退键只需要重写onBackPressed方法如下即可: @Override public void onBackP ...

  8. 使用ARP欺骗, 截取局域网中任意一台机器的网页请求,破解用户名密码等信息

    ARP欺骗的作用 当你在网吧玩,发现有人玩LOL大吵大闹, 用ARP欺骗把他踢下线吧 当你在咖啡厅看上某一个看书的妹纸,又不好意思开口要微信号, 用arp欺骗,不知不觉获取到她的微信号和聊天记录,吓一 ...

  9. 常用js归纳

    一.获取地址栏参数 /*根据name获取URL参数*/ function getQueryString(name) { var reg = new RegExp("(^|&)&quo ...

  10. Nginx相关集合

    http://www.cnblogs.com/kamil/p/5163182.html LNMP搭建(yum) Nginx基本使用 http://www.cnblogs.com/kamil/p/516 ...