浅谈服务端模板到客户端模板
谈起客户端模板技术，要先从服务端MVC说起。
服务器端MVC
当客户通过浏览器访问URL，服务器端会获取到客户端传来的URL并通过路由(router)解析URL到不同的控制器(controller)，再通过模板技术将模板中渲染(render)成到页面(HTML)。
在开发过程中路由可能由服务器配置，可能自己手写，也可能由框架实现。路由通过获取URL，得知要执行哪个控制器，而控制器再去从模型(model)获取数据，模型在去从数据库(database)获取数据，数据库返回数据到模型，再返回至控制器。于是控制器在通过模板技术将从数据库获取的数据替换模板中预定义的内容。最后在返回给客户端浏览器。这是一个完整的前端交互到路由到MVC的流程。
而在模板引擎就是我们的视图(view)部分，接下来，我们来看模板视图。
服务器端模板技术
接下来我们先看一段服务器端的模板(handlebars)代码：
1 <h1>{{title}}</h1> 2 <ul> 3 {{#names}} 4 <li>{{name}}</li> 5 {{/names}} 6 </ul>
以上是一段handlebars的代码，
控制器去从模型中获取以下数据：
1 var data = { 2 "title": "Story", 3 "names": [ 4 {"name": "Tarzan"}, 5 {"name": "Jane"} 6 ] 7 }
本文中不谈及数据是如何获取的。在这里获取到数据后，我们可以通过模板引擎将上面的模板解析成如下的HTML代码：
1 <h1>Story</h1> 2 <ul> 3 <li>Tarzan</li> 4 <li>Jane</ul> 5 </ul>
而后只需要将此代码以HTML的格式返回给客户端即能正常显示。
这样看来没什么问题，但服务器端模板技术实际上是依赖于控制器，也就是控制器中必须要有访问模板的方法，换句话说，要在客户端浏览器上展示这个渲染出来的页面，需要在服务器端的控制器上去写代码。而且，模板引擎还是后端定的，在后端渲染解析，而维护模板有时还需要前后端共同参与 。因此后端模板在web开发领域中一直是一个前后化分不清的地位。
因此，衍生出了试图前端模板技术，试图将前后端的分工化分的更明细。
客户端(浏览器)端模板技术
1、为了更好的化分出前后端开发领域，让HTML完全由前端处理。后端只处理数据及业务逻辑。
2、随着前端交互的复杂性不断提升，无刷新页面数据传输与渲染越发地频繁化，我们发现传统的前端开发方式在ajax数据渲染等方面存在着一个主要问题：繁琐的数据渲染。当前端从后台通过ajax等方式或许到数据后，如果要将这个数据渲染到指定的dom元素中，则需要进行各种字符串拼接工作或者一系列创建元素的工作，还不论细节的问题（单引号双引号问题等），不管是哪一种形式，都是繁琐且费时的。同时，在可读性与维护性上也存在问题。试想，各种循环操作的字符串拼接，元素创建插入，在需要修改时，都需要重新花费不少时间与精力。
就此衍生出了前端模板技术。
浏览器端的模板技术与服务器端的模板技术实现上大体相同，以服务器端上的模板技术的代码为例，如果在客户端使用模板技术，只需要引入模板引擎对应的handlebars.js模板即可使用，而此处的数据，则由前端通过ajax向后端发起请求。而仅仅是这么一点功能，解决了后端渲染模板，前端ajax拼接生成dom的问题。并且ajax是可以缓存的，这在很大程度上减轻了服务器端的压力。但这同时也对前端的技术要求增加。
展望未来(AngularJs)
未来的发展趋势是前端后端只靠json数据来进行通信：后端只处理和发送一段Json数据到前端，然后计算和模板渲染都在前端进行。而前端的改动后，形成json数据然后传回到后端。未来趋势就是：后台程序再也不做模板的任何处理。
AngularJS 的作用简单说就是就是把后台的Json值直接用html进行渲染，然后html的操作又直接在形成json传回后台。未来的后台MVC，视图不再是模板了，而是一段结构整齐标准的JSON，而这个JSON作为前台的model直接在AngularJS直接使用。或者说后台的视图是前台的模型，而整个前台就是后台的视图。后台程序再也不做模板的任何处理了。并且AngularJS可以实现双向数据绑定、依赖注入、指令、MVC、模板、模块化开发，使得更像是写后台代码、更规范、更结构化、更可控。
但是，使用AngularJS的话，数据全是通过JSON来进行前后台传输，到了浏览器端才进行数据渲染， 对于SEO，这是一个严重的问题，并且对于庞大的JS库，首次加载时间将更长。对此可以用NodeJS作为一个中转首次加载，模板渲染在NodeJS上实现，之后，由前端实现模板渲染。而这又使前端不得不学习NodeJS。
前端在web开发领域担任的职责将越来越重要，前后端的分工也越来越明细。
引用：
http://blog.fens.me/angularjs-route-template/、
http://kb.cnblogs.com/page/210862/
http://zhidao.baidu.com/link?url=w21FVvMy7By69ylyW3-vLVAdBDBwthHZ8qhSjj67nKE5_h8coDGefDNqUlTwAka8CfY3_LijH_S8EdmNj5h9dYBfuzyp9FfbV5gLm49D9O7&qq-pf-to=pcqq.c2c
http://blog.jobbole.com/65534/
