在我们浏览的页面中有大的网站,也有中小型网站,类型不同其中的页面也就不同,但是纵观大部分的网页是否有什么相同的地方呢?如果浏览的是一般的门户网站或者是什么小型的页面的话这种感觉就不是很明显,但是如果关注一些较为大型的点上网站的话,就会发现一个非常明显的特征,那就是每一个页面除了中间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浅析的更多相关文章

  1. [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 ...

  2. Angular template ng-template/container/content

    1. ng-template 形式:<ng-template>...</ng-template> 默认ng-template中的内容会隐藏; 可通过[ngIf]来控制内容显示隐 ...

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

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

  4. angular编译机制

    转载https://segmentfault.com/a/1190000011562077 Angular编译机制 前言 http://www.cnblogs.com/ztwBlog/p/620975 ...

  5. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...

  6. angular2 学习笔记 (Typescript)

    1.接口奇葩验证 interface Abc { name : string } function abc(obj : Abc) { } let ttc = { name: "adad&qu ...

  7. angular1.3 video

    video标签动态获取播放链接是出现 Error: $interpolate:interr Interpolation Error Error: $sce:insecurl Processing of ...

  8. angularjs 简单指令

    <!DOCTYPE html> <html data-ng-app="app"> <head> <title>angular js& ...

  9. [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 ...

随机推荐

  1. java String 去除空格

    1. java 去掉字符串的空格(中间空格,左右空格) 比如 时间字符串,去掉‘-’,‘:’,与空格 String x = "2008-09-08 11:12:23"; x=x.r ...

  2. Java 操作 EXCEL

    今天帮朋友写了一段用来处理EXCEL内容的程序,在这里记录下自己的学习过程.主要是对EXCEL表格中的内容做分类和统计,使用计算机来做这种重复的机械性地工作再好不过了.首先,我们需要下载一个java操 ...

  3. 深入分析Java的序列化与反序列化

    序列化是一种对象持久化的手段.普遍应用在网络传输.RMI等场景中.本文通过分析ArrayList的序列化来介绍Java序列化的相关内容.主要涉及到以下几个问题: 怎么实现Java的序列化 为什么实现了 ...

  4. 402. Remove K Digits

    (English version is after the code part) 这个题做起来比看起来容易,然后我也没仔细想,先速度刷完,以后再看有没有改进. 用这个来说: 1 2 4 3 2 2 1 ...

  5. mysql 统计 每天累计用户数

    需求: 查出 一段时间每天的累计用户, 数据库这么设计的, 只有一张用户表, 每个用户注册的时间, 每一天的数据是之前的天数累计 select count(id) from r_user where ...

  6. C:\WINDOWS\system32\drivers\etc\hosts host文件夹里面的内容是什么?

    这个文件是根据TCP/IP for Windows 的标准来工作的,它的作用是包含IP地址和Host name(主机名)的映射关系,是一个映射IP地址和Host name(主机名)的规定,规定要求每段 ...

  7. Android Layout布局文件里的android:layout_height等属性不起作用

    有的时候,我们配置好的布局文件,在加载完成添加到我们的Activity中后发现,并没有安装我们设置的属性 来布局,比为我们设置了android:layout_marginTop="100di ...

  8. C语言--函数

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenVveW91MTMxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  9. 基于xmpp openfire smack开发之smack类库介绍和使用[2]

    http://blog.csdn.net/shimiso/article/details/8816540 关于Smack编程库,前面我们提到,它是面向Java端的api,主要在PC上使用,利用它我们可 ...

  10. crontab 定时任务 每过多少分钟执行

    被下面的问题纠结了一会 记录一下以备提醒 每过5分钟执行 */ * * * * curl localhost/system/dns/dnns.php?ac=ToDNS 每小时的第五分钟执行 0 * * ...