使用Express來渲染AngularJS的.ejs模板，並使用AngularJS $範圍

我希望我能有這個第一個問題我張貼在堆棧溢出解釋一下里面的數據。

我正在用MEAN堆棧構建一個小測試應用程序。

中的應用接收基於我已經創建了一個快速路線從貓鼬變量數據。

例如，網址是：本地主機：3000 /城市/測試/巴黎

基礎上的城市名稱的響應給我的城市和描述的名稱。我知道如何在.ejs模板中獲取這些數據。但那不是我想要的。我想在ngRepeat中使用這些數據。

也許這是不正確的做法，但也許你可以幫我想出解決辦法。

我想這樣做的原因是因爲我不想要一個頁面應用程序，而是一個可以反覆用於每個城市的Angular模板，並且只使用從貓鼬find（）返回的數據。結果並不是整個城市陣列。

app.js：

var cityRoutes = require('./routes/cities'); 
app.use('/cities', cityRoutes); 
app.set('views', './views'); // specify the views directory 
app.set('view engine', 'ejs'); // register the template engine

./routes/cities/cities.js：

var express = require('express'); 
var citiesList = require('../server/controllers/cities-controller'); 

var bodyParser = require('body-parser'); 
var urlencode = bodyParser.urlencoded({ extended: false }); 

var router = express.Router(); 

// because this file is a fallback for the route /cities inside app.js 
// the route will become localhost:3000/cities/test/:name 
// not to be confused by its name in this file. 
router.route('/test/:name') 
    .get(citiesList.viewTest) 

module.exports = router;

../server/controllers/cities-controller.js：

var City = require('../models/cities'); 

module.exports.viewTest = function(request, responce){ 
City.find({ stad: request.params.name }, function(err, results){ 

    if (err) return console.error(err); 
     if (!results.length) { 
      responce.json("404"); 
    } else { 
     responce.render('angular.ejs', { messages:results }); 
     // through this point everything works fine 
     // the angular.ejs template gets rendered correctly 
     // Now my problem is how tho get the results from the 
     // response.render inside the Angular directive 
     // so I can use the data in a $scope 
    } 
    }); 
};

../models/cities.js

var mongoose = require('mongoose'); 

module.exports = mongoose.model('City', { 
    stad: { type: String, required: true }, 
    omschrijving: String 
});

個

AngularJS指令：

// This is where I would like to use the messages result data 
// so I can create a $scope that handles data that can be different 
// for each url 
// so basically I am using this directive as a template 

app.directive('bestelFormulier', function() { 
return { 
    restrict: 'E', 
    templateUrl: '/partials/bestel-formulier.html', 
    controller: ['$scope', '$http', '$resource', '$cookieStore', 
function($scope, $http, $resource, $cookieStore){ 


    // at this point it would be nice that the $scope gets the 
    // url based results. But I don't now how to do that.. 
    // at this point the var "Cities" gets the REST API with 
    // all the cities... 

    var Cities = $resource('/cities'); 

     // get cities from mongodb 
     Cities.query(function(results){ 
      $scope.cities = results; 
      //console.log($scope.products); 
     }); 

     $scope.cities = {}; 

    }], 
    controllerAs: 'productsCtrl' 
} 

});

數據庫存儲這樣的：

[ 
    { 
     stad: 'Paris', 
     omschrijving: 'description Paris', 
    }, 
    { 
     stad: 'Amsterdam', 
     omschrijving: 'description Amsterdam', 
    } 
]

我希望包括有助於解釋我的問題，這些文件。

預先感謝幫助我

來源

2015-06-11 Seabass

我想出了一個辦法做到這一點......

我的代碼以下更改固定我的問題。

在app.js

var cityRoutes = require('./routes/cities'); 
app.use('/', cityRoutes); 
// removed the name cities

./routes/cities/cities.js

：

router.route('/cities/test/:name') 

    .get(citiesList.viewTest) 

// added this route to use as an API 
router.route('/api/cities/test/:name') 

    .get(citiesList.viewStad)

../server/controllers/cities-controller。JS：

// added this callback so that a request to this url 
// only responses with the data I need 
module.exports.viewStad = function(request, responce){ 
    City.find({ stad: request.params.name }, function(err, results){ 

     if (err) return console.error(err); 
     if (!results.length) { 
      responce.json("404"); 
     } else { 
      responce.json(results); 
     } 
    }); 
};

在我AngularJS應用

我增加了$ locationDirective和改變了我的角指令下到：

var url = $location.url(); 
var Cities = $resource('/api' + url); 
// now when my .ejs template gets loaded the Angular part looks at 
// the current url puts /api in front of it and uses it to get the 
// correct resource

這就是我可以在我的$範圍和使用的使用方式人可愛的角功能:-)

希望我能幫助其他人這... ...最後，它是一個簡單的解決方案，也許還有人在那裏認識尤爲明顯的方式來做到這一點。對我來說現在起作用了。

來源

2015-06-11 13:44:25 Seabass

使用Express來渲染AngularJS的.ejs模板，並使用AngularJS $範圍

回答

相關問題