Integrate ejs and angular

Integrate ejs and angular

Our other system is to use angular in a single page application. We have made some customization for angular, integrated seajs, and did not use angular's own module management. However, angular can be used independently. The newly developed small system does not use frontend js module management, but simply integrates ejs and angular. This is a simple demo.

Process

First, express is a service used to jump to ejs. This service is similar to the action class in struts2:

function myAccount(req, res, next){    res.render("binding_list", {layout:"storeadmin_layout", menu:"myAccount"});}

When an http client sends a GET request to the address/svc/weixin/myAccount, the service is called. After the server prepares data, the service calls the express render function to jump to ejs, the following is the ejs code .. Ejs is equivalent to jsp files and is a server template.

<%-Loader (). js ('/weixin. js'). done (config) %> unbound

You can write javascript code in. ejs. After being rendered by the ejs engine, the html page is generated to the client. The response body is:

<Script src = "/weixin. js? V = 1407754967801 "> </script> bound and not bound

The preceding html snippet contains the angular tag, but angular is not executed on the client (in the browser. Then the browser parses the <script> tag and requests to load the weixin. js file. The angular code is put in this file:

function WeixinController($scope){    $scope.name = "kyfxbl";    $.get("/svc/weixin/checkBinding", function(res){        $scope.hasBinding = res.flag;        $scope.$digest();    });}

At this time, the browser has loaded angular. js and weixin. js. The code in these two files is executed in the browser and has nothing to do with express and ejs on the server. Angular is working, and the html file is re-compiled to get the final display interface for the user.

This process is divided into two stages. The first stage runs in node, mainly because the ejs engine works, rendering the. ejs file into an html file and sending a response to the browser. The second stage runs in the browser, mainly because angular works and replaces the variable in html with the model in $ scope. Therefore, there are two variable substitution procedures. on the server side, replace <% = %> with the model passed by the render function; on the client, replace {} with the model mounted on & scope.

Transfer variables on the server

The main obfuscation is how to write values to weixin. js on the server side.

For example, there is such an expression in. ejs:

{{ name }}

Name is replaced by angular compilation in the browser. Therefore, this code is required in weixin. js:

$scope.name = "kyfxbl";

However, if the name needs to be read by node from the database, there are two methods:

One is to embed js into. ejs (separate weixin. js is not required ):

<script>    function WeixinController($scope){        $scope.name = "<%= name %>";    }</script>    {{ name }}

However, I do not recommend this method, mainly because there are two problems:

1. Embed js Code directly in html. This approach is not good. Because of the complexity of the page, the content in <script> will become very long and difficult to maintain. In addition, js compression tools cannot handle this situation. The best practice is to split JavaScript and html

2. manually add "" to the name variable passed by render; otherwise, an error is reported. <Script> this process is required everywhere, which is very error-prone and difficult to locate.

So it is best to use the second method, or separate. ejs and weixin. js. When angular controller is initialized in weixin. js, go to the server again to request the required variable:

function WeixinController($scope){    $scope.name = "kyfxbl";    $.get("/svc/weixin/checkBinding", function(res){        $scope.hasBinding = res.flag;        $scope.$digest();    });}

The disadvantage of doing so is that the number of http requests will become relatively large (the first method is to prepare all the required variables when accepting requests. but you can reduce the number of http requests by merging interfaces. I think it's better to embed js Code in html.