登录
注册
node.js 学习社区
AngularJs与Jade Template混合使用

眉间雀

2014-12-08 23:12

此前已经写过两篇关于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模板
        {{phone.name}}
        p{{phone.snippet}}

    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 }
      - }

到这里你就已经体验完AngularJs和Jade模板引擎结合后的快感了!其实同时使用并无冲突,而且语法上非常好理解。对于此后的话,我会介绍一些更复杂的场景,例如此前提及到的,在客户端上面,使用Jade模板引擎进行单页面应用的开发,减少界面复杂度。相信,结合AngularJs后,单页面应用会做得更加轻松。好好体验吧!

原文引自:http://www.html-js.com/article/1545

回复 · 0

发表回复

你可以在回复中 @ 其他人