Node.js Express使用EJS模板引擎时无法渲染的问题

Question

Node.js Express使用EJS模板引擎时无法渲染的问题

3

我将使用express ejs在我的node服务器上渲染多视图应用程序中的视图。在客户端，我使用Angularjs。初始视图是登录页面，当使用res.render('pages/login')时正确显示。我想在用户成功连接后呈现一个新视图，但对于下一个res.render('pages/home')，它仍停留在登录页面，尽管在客户端收到了正确的HTML。以下是我的相关代码：

部分文件结构：

   App
     public/js/Script.js
     views/pages
          login.ejs
          home.ejs
     server.js

server.js

...
app.get('/',function(req, res){
   res.render('pages/login'); //being displayed
});

app.get('/rest/home',function(req, res){
   res.render('pages/home'); //not being displayed
});
app.post('/login',function(req, res){
   //authentification
});
...

Script.js

.controller ('loginController', function ($scope, $http) {     
   $scope.authent = function(){
      $http({
         method: 'POST',
         url: '/login',
         data: $.param($scope.loginData),
         headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
      }).success(function(res){
         $scope.launch();
      });
   $scope.launch = function(){
      $http({
         method: 'GET',
         url: '/rest/home',
      }).success(function(res){
         alert(res); //Here, I am getting the content of home.ejs, but the view doesn't load in browser
      });     
   };      
})
.controller ('homeController', function () {
});

login.ejs

<html ng-app="App">
<head>
       ...
</head>
<body  ng-controller="loginController">
    <div id="loginView">
       <form name="login" id="login" ng-submit="authent()">
          <input id="login_id" name="login_id" type="text" ng-model="loginData.loginId"/> 
          <input id="password" name="password" type="password" ng-model="loginData.password"/>
          <input type="submit" class="submit" value="Login"/>
       </form>
    </div>
</body>
</html>

home.ejs

<html ng-app="App">
<head>
   ...
</head>
<body  ng-controller="homeController">
   <h1>Home</h1>
</body>
</html>

这是我第一次使用ejs和angularjs，对我的方法不是很确定，所以欢迎任何更好的方法建议。我已经尝试使用Route，但并不是很满意。希望我解释清楚了。

- yoogeeks

1

你应该更多地了解Angular中的路由和视图工作原理。请查看$routeProvider和ng-view。除非需要预渲染一些动态数据，否则你的Angular视图应该在public文件夹中。 - Molda

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yoogeeks · Accepted Answer

最后我使用了$routeProvider。以下是解决方案：

文件结构：

App
  /public/js/Script.js
  /views/
       layout.ejs
       /partials/
          login.ejs
          home.ejs
  /routes/
       index.js
  server.js

server.js

...
var engine = require('ejs-locals');
var routes = require('./routes');
app.engine('ejs', engine);

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');    
app.get('/partials/:name', routes.partials);
app.get('/', routes.index); //Important to place this last
...

index.js

exports.index = function(req, res){
   res.render('layout');
};

exports.partials = function (req, res) {
   var name = req.params.name;
   res.render('partials/' + name);
};

script.js

app.config(function ($routeProvider, $locationProvider) {
   $locationProvider.html5Mode(true);
   $routeProvider
      .when('/', {
         templateUrl : 'partials/login',
         controller  : 'loginController'
      })
      .when('/home', {
         templateUrl : 'partials/home',
         controller  : 'homeController'
      })
      .otherwise({redirectTo: "/"});
})
app.controller ('loginController', function ($scope, $http) {     
  ...
   $scope.launch = function(){
      $http({
         ...
      }).success(function(res){
         $location.path('/home');  
      });     
   };      
})

layout.ejs

...
<body>
   ...
   <div ng-view></div> <!-- This section will be replaced with rendered view -->
   ...
</body>
...