Integrated Ejs and angular

Our other system is to use angular in a single page application, to angular do some customization, integration of SEAJS, not with the angular own module management. But angular alone is also possible, a new development of a smaller system, there is no use of the front-end JS module management, but simple integration of ejs and angular, this article is a simple demo

Process

The first is a service for express, used to jump to Ejs. The service is similar to the action class in STRUTS2:

function MyAccount (req, res, next) {    Res.render ("Binding_list", {layout: "Storeadmin_layout", Menu: "MyAccount"});

Send a GET request to address/svc/weixin/myaccount through the HTTP client, the service is invoked after the server prepares the data, calls the Express's render function, jumps to Ejs, and the following is Ejs code: Ejs equivalent to a JSP file, which is a server-side template

<%-Loader (). JS ('/weixin/weixin.js '). Done (config)%><div ng-controller= "Weixincontroller" >    < Span ng-if= "hasbinding" > Bound </span>    <span ng-if= "!hasbinding" > Unbound </span></div>

In. Ejs can write JavaScript code, after the Ejs engine rendering, generate HTML page to the client, response body is:

<script src= "/weixin/weixin.js?v=1407754967801" ></script><div ng-controller= "WeixinController" >    <span ng-if= "hasbinding" > Bound </span>    <span ng-if= "!hasbinding" > Unbound </span> </div>

The above HTML fragment contains the angular tag, but angular has not yet been executed in the client (browser). then the browser resolves to the <script> tag, and the request to load the Weixin.js file, the file is the angular code:

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 2 files in the code, are executed in the browser, and the service side of Express and Ejs have no relationship. The next is angular in action, the HTML file is compiled again, get the final display to the user interface

This process is divided into 2 stages, the first stage running in node, mainly the Ejs engine works, the. ejs file is rendered as an HTML file, and a response is sent back to the browser. The second stage runs in the browser, mostly angular, replacing the variables in the HTML with the models in the $scope. So there are 2 variables to replace the process, on the server side is to replace the <%=%> with the render function to pass the model; On the client side is to replace {{}} with the model mounted on &scope

Server-side pass-through variables

The main thing to confuse is what to do if you want to write values to weixin.js on the server side.

For example, there is an expression in the. Ejs:

{{Name}}

Name is replaced in the browser by the angular compiler, so in weixin.js, you need to have this code:

$scope. Name = "KYFXBL";

But if name requires node to be read from the database, there are 2 ways to do it:

One is to embed JS into the. Ejs (there is no need for a separate weixin.js):

<script>    function Weixincontroller ($scope) {        $scope. Name = "<%= name%>";    } </script><div ng-controller= "Weixincontroller" >    {{name}}</div>

But this way I do not recommend, mainly there are 2 questions:

1, the JS code directly embedded in the HTML, this practice is very bad. Because the complexity of the page,<script> content will become very long, difficult to maintain. And JS compression tools, it is not good to handle this situation. Best practice is to leave JS and HTML separated

2, render the name of the variable, but also need to manually add "", otherwise it will error. <script> needs to be handled all over the place, very prone to error, and difficult to locate.

So it's best to use the second way, or to leave the. Ejs and Weixin.js away, weixin.js to initialize the angular controller, go to the server again to request the required variables:

function Weixincontroller ($scope) {    $scope. Name = "KYFXBL";    $.get ("/svc/weixin/checkbinding", function (res) {        $scope. hasbinding = Res.flag;        $scope. $digest ();    });

The downside to this is that the number of HTTP requests becomes much more (the first way to get the required variables ready to be written to. Ejs in the case of accepting requests), but you can reduce the number of HTTP requests by merging the interfaces. I think it's better to embed the JS code in the HTML.