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知识结合起来的话，将会大大加强我们的编码效率。

原文：http://www.cnblogs.com/lanveer/p/4090804.html