我们也有一个系统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页面到client，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还没有在client（浏览器里）运行。
然后浏览器解析到<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函数传递的模型。在client是把{{ }}替换成&scope上挂载的模型
server端传递变量
主要easy混淆的地方在于。假设想在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>里到处都须要这么处理，非常easy出错，定位起来也非常麻烦
所以最好是採用另外一种方式，还是把.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在
版权声明：本文博客原创文章，博客，未经同意，不得转载。