2015-03-15 1 views
0

Я использую механизм шаблонов Hogan в приложении Node-Express-Anuglar. Поскольку я использую Anguar в шаблонах Hogan Я изменил разделители Хогана:AngularJS при включенной маршрутизации не может разрешить параметр вида из Express render()

app.js

app.locals.delimiters = '{% %}'; 
app.set('view engine', 'hjs'); 

Таким образом, я могу показать параметры обзора, как это (Угловая идет как общее):

index.hjs

<!DOCTYPE html> 
<html data-ng-app="app"> 
<head> 
    <title>{% title %}</title> 
</head> 
<body ng-controller="TestController"> 
    From Angular model: {{model.testProperty}} 

прохожу параметры в визуализации функции:

index.js в каталоге маршрутов:

router.get('/', function(req, res, next) { 
    res.render('index', { title: 'Example title' }); 
}); 

В этом случае все работает хорошо, поэтому {% title %} решает Example title и {{model.testProperty}} решает правильное значение из моего контроллера.

Проблема occours при добавлении маршрутизации в угловой стороне:

module.config(['$routeProvider', '$locationProvider', 
    function ($routeProvider, $locationProvider) { 
     $locationProvider.html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 

     $routeProvider. 
      when('/', { 
       templateUrl: '../diary/diary.html', 
       controller: 'TestController' 
      }). 
      when('/promoted', { 
       templateUrl: '..diary/promoted-diary.html', 
       controller: 'PromotedController' 
      }). 
      otherwise({ 
       redirectTo: '/' 
      });   
    }] 
); 

, потому что переменной {% title %} отображаются как {% title %} (так что он не был evaluted). Цельный Угловой материал, например. {{ model.testProperty }} работает так же, как и раньше, поэтому он правильно разрешен для вычисления с контроллера.

ответ

1

Я думаю, что вам здесь не хватает трюка. Если вы посмотрите на некоторые из популярных проектов семян MEAN, таких как MEAN.io или MEAN.JS, Express используется как механизм REST, который предоставляет API для AngularJS при визуализации, маршрутизации, привязке к интерфейсу.

Так я предлагаю вам посылать данные в формате JSON из внутреннего интерфейса:

router.get('/', function(req, res, next) { 
    res.json('index', { title: 'Example title' }); 
}); 

Использования углового ngResource потреблять данные из API, и вы получили маршрутизатор в любом случае в передней части, который будет обрабатывать аутентификации вида и авторизацию, отображая логика. У AngularJS есть богатая функция рендеринга и двухсторонней привязки, попробуйте использовать ее. Дайте мне знать, если вам нужен более подробный ответ.

Примечание: вы можете даже сделать это с помощью простого HTML, без использования каких-либо движков шаблонов для них. Для простой реализации, пожалуйста, смотрите here

+0

Это очень полезное сообщение для меня, поэтому я проголосовал и решил изменить архитектуру приложения. Но до сих пор не знаю, как решить проблему описанным образом. – mklimek

+0

Говоря честно, я не эксперт, я тоже учусь. Но то, что я прочитал и понял до сих пор, AngularJS предназначен для приложений с одной страницей, и он эффективно выполняет эту работу. Просто подумайте о том, где вы делаете свои взгляды от ExpressJS, так что, по вашему мнению, даже требуется идти на тяжелую инфраструктуру переднего конца, такую ​​как AngularJS, для легкой работы с небольшими задачами, такими как JQuery, будет служить вашим потребностям или даже простому ванильному Javascript. В то время как AngularJS разработан для решения различных задач. Поэтому по делам понимайте, почему и когда и какие рамки вам нужно. – NarendraSoni