我们另一个系统是把angular用在单页面应用里,对angular做了一些定制,集成了seajs,没有用angular自己的模块管理。不过angular单独使用也是可以的,新开发的一个较小的系统,就没有使用前端js的模块管理,而是简单集成了ejs和angular,本文是一个简单的demo
流程
首先是express的一个服务,用于跳转到ejs。该服务类似于struts2里的action类:
function myAccount(req, res, next){
res.render("binding_list", {layout:"storeadmin_layout", menu:"myAccount"});
}
通过http client发送GET请求到地址/svc/weixin/myAccount,就会调用该服务,该服务在服务端准备数据之后,调用express的render函数,跳转到ejs,下面是ejs的代码。.ejs相当于jsp文件,都是一个服务端模板
<%- Loader().js('/weixin/weixin.js').done(config) %>
<div ng-controller="WeixinController">
<span ng-if="hasBinding">已绑定</span>
<span ng-if="!hasBinding">未绑定</span>
</div>
在.ejs里可以写javascript代码,经过ejs引擎渲染之后,生成html页面到客户端,response body是:
<script src="/weixin/weixin.js?v=1407754967801"></script>
<div ng-controller="WeixinController">
<span ng-if="hasBinding">已绑定</span>
<span ng-if="!hasBinding">未绑定</span>
</div>
上面这段html片段,里面已经包含了angular标签,但是angular还没有在客户端(浏览器里)执行。然后浏览器解析到<script>标签,又去请求加载weixin.js文件,这个文件里放的才是angular的代码:
function WeixinController($scope){
$scope.name = "kyfxbl";
$.get("/svc/weixin/checkBinding", function(res){
$scope.hasBinding = res.flag;
$scope.$digest();
});
}
这时候,浏览器已经加载了angular.js和weixin.js,这2个文件里的代码,都是在浏览器里执行的,和服务端的express和ejs已经没有关系了 。后面就是angular在起作用,对html文件再次编译,得到的就是最终呈现给用户的界面
这个过程分为2个阶段,第一个阶段跑在node里,主要是ejs引擎起作用,把.ejs文件渲染成html文件,发响应给回浏览器。第二个阶段跑在浏览器里,主要是angular起作用,把html里的变量,替换为$scope中的模型。所以这里有2次变量替换的过程,在服务端是把<%= %>替换成render函数传递的模型;在客户端是把{{ }}替换成&scope上挂载的模型
server端传递变量
主要容易混淆的地方在于,如果想在server端把值写到weixin.js里该怎么做
比如说,在.ejs里有这么一个表达式:
{{ name }}
name是在浏览器里由angular编译替换的,所以weixin.js里,就需要有这样的代码:
$scope.name = "kyfxbl";
但是如果name是需要node从数据库中读出来的,那么就有2种做法:
一种是把js嵌入到.ejs中(就不需要单独的weixin.js了):
<script>
function WeixinController($scope){
$scope.name = "<%= name %>";
}
</script>
<div ng-controller="WeixinController">
{{ name }}
</div>
但是这种方式我并不推荐,主要是有2个问题:
1、把js代码直接嵌在html里,这种做法很不好。因为复杂一点的页面,<script>里的内容会变得很长,很难维护。而且js压缩工具,也不好处理这种情况。最佳实践是把js和html分离开
2、render传过来的name变量,还需要手工地加上"",否则的话就会报错。<script>里到处都需要这么处理,非常容易出错,定位起来也很麻烦
所以最好是采用第二种方式,还是把.ejs和weixin.js分离开,weixin.js里初始化angular controller的时候,再次去服务端请求需要的变量:
function WeixinController($scope){
$scope.name = "kyfxbl";
$.get("/svc/weixin/checkBinding", function(res){
$scope.hasBinding = res.flag;
$scope.$digest();
});
}
这样做的坏处是http的请求数会变得比较多(第一种方式可以在接受请求的时候,把需要的变量都准备好写到.ejs里),不过可以通过合并接口等方式,减少http请求的次数。我认为也好过把js代码嵌在html里
分享到:
相关推荐
角节点ejs 基于Angular-Node-ejs教程修改以在Azure上部署
express ejs模板引擎
EJS 使用说明,ejs工具包,并将ejs的具体使用在一个例子中简单明了的体现
孟邦斯 运行 MongoDB、Express (EJS)、Angular、Node、Gulp、BootStrap3 和 SASS Stack 的锅炉板
SailsJS 和 AngularJS 集成 这是我第一次尝试使用 SailsJS 并将其与 AngularJS 集成。 这是一个非常小的可调整大小的应用程序,它加载三个标签,从 Yahoo News Rss 服务加载新闻。 使用的技术: 风帆.JS Angular....
nodejs+mysql+ejs完成的博客,可以登录注册,查看别人的博客,个人中心,发布编辑删除博客,留言等等
嵌入式arm常用芯片arm926ejs的datasheet,可供参考。
这是实验性Angular SSR,将用作 Web框架以及车把,ejs和胡须的渲染器。 如何使用 deno run --importmap=importmap.json --location=https://jspm.dev --allow-read main.ts 声明角部 importmap.json: { " ...
ejs前端框架,实用,类jsp代码,书写简单
前端开源库-ejs-lintEJS lint,linter/用于EJS模板的语法检查器
前端开源库-express-ejs-layoutsExpress EJS布局,Express中EJS的布局支持。
并没有使用express等框架,而是用node原生api编写,涵盖如何加载ejs 和如何使用jquerymobile的控件等,和node的常规操作,可以在手机浏览器上浏览。 里面还有在0test文件夹下的测试程序。 程序只用来参考,如果想...
本源码项目是基于EJS和Express的MySQL数据库后台管理系统设计,包含44个文件,主要使用JavaScript和CSS编程语言。该系统实现了基本的CRUD后台管理应用,包括用户界面和数据操作功能,适用于快速搭建后台管理系统的...
一个nodejs的express框架+ejs的开发步骤,适合入门。
Express中使用ejs新建项目以及ejs中实现传参、局部视图include、循环列表数据的使用示例代码
12-ejs网址:httpsejs.bootcss.com
EJS TreeGrid,非常强大的WEB前端表格JS控件,纯JS实现,可以显示甘特图
前端开源库-ejs-mateEJS Mate,Express 4.x局部布局,局部。
验证经营理念 作为有经营理念的用户 ...ES6/Angular2(可选) 有角度的前端 将后端转换为 JSON 以供 AJAX 使用(继续使用 Mongo,但您需要添加到模式中) Bootstrap 或 Materialise 或 Foundation
移植到ARM9 ARM926EJS架构的FreeRTOS, 包含KEIL GCC, 测试通过