angular template浅析
在我们浏览的页面中有大的网站,也有中小型网站,类型不同其中的页面也就不同,但是纵观大部分的网页是否有什么相同的地方呢?如果浏览的是一般的门户网站或者是什么小型的页面的话这种感觉就不是很明显,但是如果关注一些较为大型的点上网站的话,就会发现一个非常明显的特征,那就是每一个页面除了中间body的内容有所变化之外,一个页面的header和footer的变化几乎是一模一样的,当然如果我们每一个页面都做header和footer的话也可以的,但是,如果还有一些div啊 什么section等等的如果在每一个页面都差不多的话,而且位置有不同的话,要每一个页面都写这样的小东西的话还是需要花费一些功夫的,但是在这里,如果借用我们的angular提供的一些模块化功能就可以完美的解决这一个问题,下面我将浅谈这个技术。
<div>
<div class="header"></div>------这里的header是属于class,还有element,attribute,和M
</div>
<div class="content"></div>
<div>
<div class="footer"></div>
</div>
以上的代码片段是一个基本的页面,包括header content footer三个部分组成,但是在这里我们的header和footer都是一样的,我们不需要再次去写,在这里我们就将使用angulars提供的模块化解决这一问题,
首先我们必须现在html中设置为全局的范围,ng-app=“main”,当然我们还是得在我们的文档中引用angular这个js文件,紧接着我们就要写js代码哦,这个js代码我们就没有必要把js代码写在外部js文件中。
var temp=angular.module('main',[]);---------------》main是我们在html标签之上设置的相当于全局变量,还有就是在这里完全体现了angular的模块化思想。
temp.directive('header',function(){----------》在这里出现就是我们下面要将到类名
return{
restrict:"C",----------------C代表class
templateUrl:"../temp/header.html",-----------我们需要替换的模板页面的相对路径。
replace:true,
link:function(scope,element,attr){----------------》成功之后的回调函数,在这里面我们可以看到引入的模板页面和为我们新引入的模板页面添加新的事件,
在这里需要注意的就是,如果我们要为引入的header或者是我们的footer添加jquery事件或者是我们原生的js事件的时候,不能在别的js代码文件唉中去进行添加,但是css除外,这个可以新建一个文件夹都可以进行编辑,但是在我们的添加事件就必须调用这里的element方法。
element.bind('click',function(){--------------为我们新增加的元素增加了新的事件,同时也可以增加一些特效。
alert('ok');
})
}
}
});
temp.directive('footer',function(){
return{
restrict:"C",----------------------------------这里如果是上面对应的什么就写什么,主要有AEMC分别表示属性,元素,解释,类。
templateUrl:"../temp/footer.html",
replace:true,
link:function(scope,element,attr){
element.bind('click',function(){
alert('well done')
})
}
}
});
当然我们引入的header和footer你也需要书写在别的地方,可以存放在我们这里将的template模板文件夹里面,方便以后需要的时候进行调用,同时进行样式分离,这样更好的便于我们代码以及页面的管理。
这种模板化的主要优势就是在于如果应用在那些比较大型的网站上的话,我们可以实现代码的循环利用,减少编码的工作量,同时也能保持页面风格的一致化,保持良好的交互性。也可以做到元素的随意移动性在这里还需要深入了解的就是我们css之中的定位,以及BFC的相关知识,将这些css知识结合起来的话,将会大大加强我们的编码效率。
angular template浅析的更多相关文章
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...
- Angular template ng-template/container/content
1. ng-template 形式:<ng-template>...</ng-template> 默认ng-template中的内容会隐藏; 可通过[ngIf]来控制内容显示隐 ...
- 基于angular的route实现单页面cnodejs
Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...
- angular编译机制
转载https://segmentfault.com/a/1190000011562077 Angular编译机制 前言 http://www.cnblogs.com/ztwBlog/p/620975 ...
- AngularJs学习笔记--Understanding Angular Templates
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...
- angular2 学习笔记 (Typescript)
1.接口奇葩验证 interface Abc { name : string } function abc(obj : Abc) { } let ttc = { name: "adad&qu ...
- angular1.3 video
video标签动态获取播放链接是出现 Error: $interpolate:interr Interpolation Error Error: $sce:insecurl Processing of ...
- angularjs 简单指令
<!DOCTYPE html> <html data-ng-app="app"> <head> <title>angular js& ...
- [Angular 2] Create template with Params
Angular 2 templates have a special let syntax that allows you to define and pass a context when they ...
随机推荐
- PL/SQL游标使用
游标是用来处理使用SELECT语句从数据库中检索到的多行记录的工具.借助游标的功能,数据库应用程序可以对一组记录逐个进行处理,每次处理一行. 游标是从数据表中提取出来的数据,以临时表的形式存放在内存中 ...
- 开源网络备份软件 bacula 的安装、配置和运行
安装bacula 1 bacula的几种网络备份拓扑 前面文章介绍了bacula有5个组成部分,在实际的应用中,没有必要将5个部分分别放在不同的服务器上,它们之间的某些部分是可以合并的,常见的bacu ...
- Linux学习笔记19——信号2
上一节中讲到了sigprocmask函数,它的作用是检查或修改它的进程信号掩码,这一节我们主要学习捕捉与忽略信号的函数sigaction和等待信号函数. 一 sigaction函数的作用 定义在接收 ...
- Win32中目录的操作
1 系统和当前目录 1.1 获取Windows目录 UINT GetWindowsDirectory( LPTSTR lpBuffer, //BUFF的地址 UINT uSize //BUFF ...
- Linux学习笔记5——虚拟内存
一.为什么要有虚拟内存 虚拟内存的提出,是为了禁止用户直接访问物理存储设备,有助于系统稳定. 二.为什么一个程序不能访问另外一个程序的地址指向的空间 1:每个程序的开始地址0x80084000 2:程 ...
- TSSAO Temporal Screen-Space Ambient Occlusion (Unity3d 5 示例实现)
前提 环境光(ambient occlusion)是一种GI,其简化形式SSAO可以用“微量高效”来形容,消耗得很少,得到的效果很好.环 境光遮蔽(ambient occlusion)的本质是计算在一 ...
- IE的表头固定/表头不动(使用expression)
本文主要介绍在IE浏览器中,实现表头固定的一种方法.这种方法使用到了 IE 浏览器特有的 expression 方法. 表头固定DEMO1 主要代码: <style type="tex ...
- HDOJ(HDU) 2520 我是菜鸟,我怕谁(等差数列)
Problem Description lin2144是一只小菜鸟,都是笨鸟先飞,lin2144想来个菜鸟先飞,他从0点出发 一开始的飞行速度为1m/s,每过一个单位时间lin2144的飞行速度比上一 ...
- 关于android 自己实现 back键 home键
今天在被问到一个问题的时候突然想要看看这些东西了.因为一直以来,我返回上个界面,和大家普遍的方法都是一样的. 1. finish()本页面. 2. intent 跳转到上个页面. 一 ,在 按下手机上 ...
- 异常Address already in use: JVM_Bind的处理
如题,Address already in use: JVM_Bind这个异常的意思就是说jvm被占用了 那么大家一般的解决情况都是重启一下eclipse , 结果还是不行,结果就只能重启电脑了. 对 ...