此前已经写过两篇关于Jade Template的文章了。AngularJs也在最近的实践当中，当然也少不了希望在AngularJS上面尝试Jade Template。为什么这么说呢，在Angular、 Backbone、 CanJS和 Ember还有其他的一些框架里面，从复杂度，上手速度，以及代码维护量来说，比较可控的是AngularJS是比较优秀的。尤其是使用过Backbone的同学就会知道，有很多的依赖要安装。
当然，各个框架都有自己优秀的地方，我们应该多尝试，多吸收这些框架给我们开发带来的好处。好，言归正传。这次说是初探，我也纯粹是希望在这里展示一下简单的Demo，让大家理解好模板的概念。其实此前有在客户端以及服务端同时使用Jade的话，这次使用AngularJs应该来说是一点难度都没有的，相对来说还更简单一点。而且AngularJs还提供了更多强大的功能，例如常用的：双向绑定。
先上会遇到的代码目录，我是在Express.js，Node.js，Jade下使用AngularJs的。
routes.js（路由配置）
-application/
angular/
app.js（应用程序）resource/
- js/
angular_demo.js
-lib/
angular.js（angularJs的库）
-views
index.jade
这里是route.js的配置
/ 这里是routes.js的配置 /
var angularjs = require(‘./application/angular/app.js’);
app.get(‘/angular_demo’, angularjs._RENDER );
这里是app.js
exports._RENDER = function ( req , res ){
var phones_object = {
‘series’ : ‘iPhone’ ,
‘array’ : [
{
‘name’ : ‘iphone 3gs’ ,
‘price’ : ‘1000’
},
{
‘name’ : ‘iphone 4’ ,
‘price’ : ‘2000’
},
{
‘name’ : ‘iphone 4s’ ,
‘price’ : ‘3000’
}]
};
console.log( phones_object );
res.render(“angularjs/index”, {
layout : false ,
locals : { phones : phones_object }
});
}
这里是angular_demo.js
/ angular js test /
‘use strict’;
/ Controllers /
function PhoneListCtrl($scope) {
$scope.phones = [
{“name”: “Nexus S”,
“snippet”: “Fast just got faster with Nexus S.”},
{“name”: “Motorola XOOM™ with Wi-Fi”,
“snippet”: “The Next, Next Generation tablet.”},
{“name”: “MOTOROLA XOOM™”,
“snippet”: “The Next, Next Generation tablet.”}
];
}
这里是index.jade
!!!5
html( ng-app )//定义好这是angular的app
head
meta(http-equiv="content-type", content="text/html; charset=UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0")
meta(name="apple-mobile-web-app-capable", content="yes")
meta(name="description", content="CashLee Homepage")
meta(name="author", content="CashLee")
meta(name="keywords",content="李秉骏,CashLee,HTML,CSS,XML,XHTML,JavaScript")
title CashLee Personal Website - 李秉骏的个人网站 & Lab • 個人のホームページ
link(rel='stylesheet', href='/css/app.css')
script( src='lib/angular.js' )
script( src='js/application/angular/index.js' )
body( ng-controller=”PhoneListCtrl” )//定义好controller
ul.angular-demo
li( ng-repeat=”phone in phones” )//执行angular模板
p
ul.cashlee-demo
- console.log( 'phones 数组 长度 : ' , phones.array.length );//横杠标示，定义jade模板引擎执行代码
- for( var i in phones.array ){
li
a #{ phones.array[i].name }
p #{ phones.array[i].price }
- }</pre>
到这里你就已经体验完AngularJs和Jade模板引擎结合后的快感了！其实同时使用并无冲突，而且语法上非常好理解。对于此后的话，我会介绍一些更复杂的场景，例如此前提及到的，在客户端上面，使用Jade模板引擎进行单页面应用的开发，减少界面复杂度。相信，结合AngularJs后，单页面应用会做得更加轻松。好好体验吧！