Verwenden von Express-Lenkern und Angular JS

Hintergrund

Ich bin zurzeit eine Webseite zu erstellen, die verwendet NodeJS für den server, Express-LENKER(Nur LENKER aber server-Seite) , und hoffentlich AngularJS für einige client-side-Zeugs.

 

Das Problem

AngularJS und LENKER verwenden die gleiche syntax für Template
{{foo}}
Dies führt zu einem problem, wo AngularJS-code interpretiert werden per Express-LENKER, der ersten, die dann einen Fehler auslösen, weil die Daten, die er versucht zu ziehen existiert nur in den Winkel-keine Knoten.

 

Die Frage

Gibt es eine Möglichkeit zu bekommen, AngularJS und Express-LENKER zusammen zu arbeiten?

 

Mögliche Lösungen

  • Ändern Sie die syntax von AngularJS
    • Ich mich mit BackboneJS und wie es aussieht ist es möglich, ändern Sie die syntax. Gibt es möglicherweise etwas ähnliches ist AngularJS.
  • Erstellen Sie eine ng Helfer im Express-LENKER.
    • Es würde nur wieder seine un-analysierten Inhalte. Aber ich konnte nicht herausfinden, wie dies zu tun.
Kommentar zu dem Problem
Warum sind Sie mit-LENKER auf der server-Seite eher als jade oder ejs? LENKER/Winkel sind am besten auf der client-Seite. Kommentarautor: jwimmer
@jwimmer was macht den LENKER besser auf client-Seite? es sei denn, etwas unverschämt, es bedeutet nicht, sollten nicht verwenden, LENKER-server-Seite Kommentarautor: Jake Berger

InformationsquelleAutor der Frage Noah Huppert | 2014-08-18

  1. 69

    Ihre erste Lösung möglich ist, AngularJS erlauben, ändern Sie die start/end-Symbole text-interpolation wie diese:

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

    Dann könnten Sie Sie in Ihre Vorlage ein:

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

    Siehe auch: $interpolateProvider Dokumentation

    Hoffe, das hilft.

    InformationsquelleAutor der Antwort runTarm

  2. 17

    Können Sie immer die ng-bind-syntax statt:

    <p ng-bind="user.profile.description"></p>

    Dies ist identisch

    <p>{{user.profile.description}}</p>

    Aus der Win-docs für ngBind:

    In der Regel, die Sie nicht verwenden ngBind direkt, sondern verwenden Sie die doppelten geschweiften markup wie {{ Ausdruck }}, die ist ähnlich, aber weniger ausführlich.

    Ist es besser, ngBind statt {{ Ausdruck }} ist eine Vorlage ist momentan vom browser angezeigt wird, im Rohzustand, bevor Eckige kompiliert. Da ngBind ist ein element, Attribut, es macht die Bindungen für den Benutzer unsichtbar, während die Seite geladen wird.

    InformationsquelleAutor der Antwort teleaziz

  3. 13

    Damit die AngularJS Stil, deine zweite Lösung besser ist, Erstellen Sie ein Helfer in der Express-LENKER.

    Verweise auf die LENKER-Website: http://handlebarsjs.com/block_helpers.html, registrieren Sie einen Helfer raw-helper

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

    und verwenden Sie es in Ihrem hbs-template, indem Sie es in eine vierfach-stash {{{{

    {{{{raw-helper}}}}
<div class="container" ng-controller="AppCtrl">
    Total Members: {{members.length}}
</div>
{{{{/raw-helper}}}}

    InformationsquelleAutor der Antwort Isaddo

  4. 11

    Es gibt einen besseren Weg: \{{foo}}.
    LENKER Inhalte können maskiert werden in einer von zwei Möglichkeiten, inline-entgeht-oder raw-block-Helfer. Inline entweicht erstellt, indem ein Schnurrbart block mit \ . Raw-Blöcke erzeugt werden, indem {{{{ Schnurrbart Klammern. Sie können sehen, diese http://handlebarsjs.com/expressions.html#helpers

    InformationsquelleAutor der Antwort Peyton Zhao

  5. 9

    Ich würde empfehlen, mit der AngularJS - data-binding-syntax (was so ähnlich aussieht LENKER) und haben Ihre NodeJS server einfach dienen die statischen AngularJS-source-code. Ich bevorzuge das verschieben der templates auf den client und somit weniger stress auf Ihre server, nicht zu erwähnen, dass AngularJS und anderen MVC-frameworks (mein Favorit ist EmberJS) sind ideal für die dynamische Aufbau der Webseite.

    Ich bin ein fan von Yeoman und hier ist ein generator für den Aufbau einer Eckigen Projekt diente von NodeJS: https://github.com/yeoman/generator-angular

    InformationsquelleAutor der Antwort Glavin001

Schreibe einen Kommentar