Korzystanie z ekspresowych kierownic i kątowych JS

Tło

Obecnie buduję stronę internetową, która używa NodeJSdla serwera, Express Handlebars (tylko Handlebarsale po stronie serwera), i miejmy nadzieję AngularJS dla niektórych rzeczy po stronie klienta.


Problem

AngularJS i kierownica używają tej samej składni do tworzenia szablonów
{{foo}}
Powoduje to problem, w którym Kod AngularJS zostanie najpierw zinterpretowany przez Express Handlebars, co spowoduje wyświetlenie błędu ponieważ dane, które próbuje wyciągnąć, istnieją tylko w Angular, a nie Node.


Pytanie

Czy istnieje sposób na to, aby AngularJS i Express Kierownica współpracowały ze sobą?


Możliwe Rozwiązania

  • Zmień składnię AngularJS
    • patrzyłem na BackboneJS i wygląda na to, że można zmienić składnię. Może być coś podobnego jest AngularJS.
  • Utwórz ng pomocnik w ekspresowych kierownicach.
    • po prostu zwróci swoją nieprzetworzoną zawartość. Jednak nie mogłem wymyślić, jak to zrobić.
Author: Noah Huppert, 2014-08-18
Source

5 answers

Twoje pierwsze rozwiązanie jest możliwe, AngularJS pozwalają zmienić symbole początku / końca interpolacji tekstu w następujący sposób: 

appModule.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

Wtedy możesz użyć go w szablonie: 

<div>{[{message}]}</div>

Zobacz też: $ interpolateProvider documentation

Mam nadzieję, że to pomoże.
 69
Author: runTarm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-18 15:10:41

Możesz zawsze użyć składni ng-bind zamiast:

<p ng-bind="user.profile.description"></p>
Jest to identyczne z
<p>{{user.profile.description}}</p>

From the Angular docs for ngBind :

Zazwyczaj nie używasz ngBind bezpośrednio, ale zamiast tego używasz podwójnych, kręconych znaczników, takich jak {{expression }}, które są podobne, ale mniej wyraziste.

Zaleca się użycie ngBind zamiast {{ expression}}, jeśli szablon jest chwilowo wyświetlany przez przeglądarkę w stanie surowym przed Angular / align = "left" / Ponieważ ngBind jest atrybutem elementu, sprawia, że powiązania są niewidoczne dla użytkownika podczas ładowania strony.

 17
Author: teleaziz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-28 07:01:12

Aby zachować styl AngularJS, twoje drugie rozwiązanie jest lepsze, Stwórz pomocnika w kierownicy Express.

Odniesienia do strony internetowej kierownicy: http://handlebarsjs.com/block_helpers.html , możesz zarejestrować pomocnika raw-helper 

Handlebars.registerHelper('raw-helper', function(options) {
    return options.fn();
});

I użyj go w szablonie hbs, umieszczając go w poczwórnym schowku {{{{

{{{{raw-helper}}}}
<div class="container" ng-controller="AppCtrl">
    Total Members: {{members.length}}
</div>
{{{{/raw-helper}}}}
 13
Author: Isaddo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-01 04:43:52

Jest lepszy sposób: \{{foo}}. Zawartość kierownicy może być unikana na dwa sposoby, inline escapes lub raw Block helpers. Inline escapes utworzone przez prefiks bloku wąsów za pomocą \ . Surowe bloki tworzone są za pomocą {{{{{{{{{}}}}} You can see this http://handlebarsjs.com/expressions.html#helpers

 11
Author: Peyton Zhao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-29 08:24:13

Zalecałbym użycie składni wiązania danych AngularJS (co wygląda podobnie do kierownicy) i aby twój serwer NodeJS po prostu obsługiwał statyczny kod źródłowy AngularJS. Wolę przenieść szablon na klienta i w związku z tym mniej obciążać serwer, nie wspominając o tym, że AngularJS i inne frameworki MVC (mój ulubiony to EmberJS) świetnie nadają się do dynamicznego budowania Strony.

Jestem fanem Yeoman A oto generator do budowania kąta projekt obsługiwany przez NodeJS: https://github.com/yeoman/generator-angular

 9
Author: Glavin001,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-18 15:11:23