Nodejs快速渲染不與ejs合作

我在我的節點服務器上使用快速ejs渲染多視圖應用中的視圖。在客戶端，我使用Angularjs。初始視圖是一個登錄頁面，使用res.render('pages/login')時正確顯示。我想在用戶成功連接時呈現新視圖，但對於下一個res.render('pages/home')，它仍停留在登錄頁面上，儘管我在客戶端接收到正確的HTML。這裏是我的親戚代碼：Nodejs快速渲染不與ejs合作

部分文件結構：

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我第一次和我不是很肯定我的方法，所以對ab有任何建議etter的方法也受到歡迎。我嘗試過使用Route，但不是很滿意。我希望我的解釋清楚。

來源

2015-04-27 yoogeeks

你應該學會一點有關路由和如何視圖的角度工作。檢查$ routeProvider和ng-view。除非您需要預渲染一些動態數據，否則您的角度視圖應該位於公共文件夾中。 – Molda

最後我用$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> 
...

來源

2015-05-04 08:13:22 yoogeeks

Nodejs快速渲染不與ejs合作

回答

相關問題