集成ejs和angular

我们另一个系统是把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,布布扣,bubuko.com

时间: 2024-10-11 13:17:53

集成ejs和angular的相关文章

手把手教你用ngrx管理Angular状态

本文将与你一起探讨如何用不可变数据储存的方式进行Angular应用的状态管理 :ngrx/store--Angular的响应式Redux.本文将会完成一个小型简单的Angular应用,最终代码可以在这里下载. Angular应用中的状态管理 近几年,大型复杂Angular/AngularJS项目的状态管理一直是个让人头疼的问题.在AngularJS(1.x版本)中,状态管理通常由服务,事件,$rootScope混合处理.在Angular中(2+版本),组件通信让状态管理变得清晰一些,但还是有点复

Angular Prerender SEO实践

前导0 angular.js好用, 但是有一点不好的就是, 对于SEO不友好, 因为angular更适合于SPA单页面应用. 这样的话, 所有的html都是使用angular动态生成的. 因此搜索引擎就没有办法对整个网站进行索引. 对于这个问题, 我看了一篇文章javascript SEO. 看了这篇文章后, 对于使用angular的SEO, 有了一个简单的了解. 并且看到了线上已经在运行的一个网站http://answers.gethuman.com/, 知道按照文章中说的是完全可以既对搜索引

构建自己的AngularJS,第一部分:作用域和digest 转摘:http://www.ituring.com.cn/article/39865

构建自己的AngularJS,第一部分:Scope和Digest 原文链接:http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html Angular是一个成熟和强大的JavaScript框架.它也是一个比较庞大的框架,在熟练掌握之前,需要领会它提出的很多新概念.很多Web开发人员涌向Angular,有不少人面临同样的障碍.Digest到底是怎么做的?定义一个指令(directive

angularjs脏检查机制

很久没有写点东西了,从今天起,在博客园对自己过往的工作,学习和生活做一些梳理,总结和温故.今天窗外的阳光不那么任性,天空白云点点,蝉鸣依旧嘹亮,安静地坐在阳台上,吹着风,敲击着键盘.于我而言,这就是幸福生活. 转入正题,对angularjs脏检查机制做了个回顾和总结如下: 参考文章:  http://teropa.info/build-your-own-angular/ http://www.cnblogs.com/likeFlyingFish/p/6183630.html http://www

赵教授的课程

课程名称 课程内容 课程时间 课程时长 需提前学习的知识 JavaScript基础课程1 js 语法,变量,对象,函数,作用域 4/12/2018 1 javascript 基础知识 JavaScript基础课程2 js 正则表达式, 原型设计,严格模式,等等 4/13/2018 1 javascript 基础知识 jQuery基础课程1 语法,选择器,事件 4/26/2018 1 jquery基础知识 jQuery基础课程2 函数,ajax,等等 4/27/2018 1 jquery基础知识

Angular团队发布路线图,并演示如何与React Native集成

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧金山举行的Angular U大会上,Brad Green.Igor Minar与Misko Hevery共同发表了演讲,重新阐述了年初在ng-conf大会的声明,并给出了2015年下半年关于Angular的路线图. Minar展示了3月份以来Angular所取得的一些新进展.值得注意的是,这些都是一

Angular团队公布路线图,并演示怎样与React Native集成

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 前不久在旧金山举行的Angular U大会上,Brad Green.Igor Minar与Misko Hevery共同发表了演讲,又一次阐述了年初在ng-conf大会的声明,并给出了2015年下半年关于Angular的路线图. Minar展示了3月份以来Angular所取得的一些新进展.值得注意的是,这些都是

前端架构:Angular与requirejs集成实践

这几天angular与requirejs.browserify的集成弄的博主头好晕,今天终于成功集成了requirejs,现写些心得体会在这里. 核心思想:angular加载时有一定的顺序,必须依次加载(按照先后顺序)angular,angular-route,module模块,service模块,controller模块,而且requirejs里面的define([......],function(){})加载顺序就很没谱了(毕竟requirejs是异步加载),因此要思路是: 1.先建个ang

Angular集成Spring Boot,Spring Security,JWT和CORS

本文介绍了Spring Boot的基本配置,Angular集成Spring Boot.Spring Security的方法.当前流行的JWT更适合与Angular集成,优于Spring Secuity提供的CSRF.另外引入了springfox-swagger和spring-boot-starter-actuator,演示了如何利用Swagger生成JSON API文档,如何利用Actuator监控应用. 本文前端基于Angular官方样例Tour of Heroes,请先到官网下载. 技术堆栈