Wie kombiniere ich angularjs und xhtml?

Hier ist ein Beispiel für ein minimales Beispiel für AngularJS, die beim Speichern als angular.html funktioniert:Wie kombiniere ich angularjs und xhtml?

<!DOCTYPE html> 
<html lang="en" xmlns:ng="http://angularjs.org" ng:app=""> 
<head> 
    <title>My HTML File</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> 
</head> 
<body> 

    <p>Nothing here {{'yet' + '!'}}</p> 

</body> 
</html>

Aber ich glaube stark in XML und Ich mag alle XML-konform meine HTML-Dokumente erstellen. Ich habe versucht, das Beispiel anpassen und speichern Sie es als angular.xhtml:

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng:app=""> 
<head> 
    <title>My HTML File</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" /> 
</head> 
<body> 

    <p>Nothing here {{'yet' + '!'}}</p> 

</body> 
</html>

Die großen Veränderungen sind die xhtml-Namespace und die Dateierweiterung „.xhtml“. Es gibt keinen Fehler oder irgendetwas. Es ist nur so, dass die Seite so angezeigt wird, als wäre eckig nicht vorhanden.

Wie bekomme ich angularjs mit einer XML-kompatiblen Datei arbeiten?

Quelle

2014-04-20 yankee

Sie sind Verwenden eines HTML5 statt eines [XHTML Doctype] (http://www.w3.org/QA/2002/04/valid-dtd-list.html). –

@ klingt.net: Nach meinem Wissen stimmt das mit der HTML-Spezifikation überein, die den empfohlenen Doctype definiert und erlaubt auch die Ausgabe von HTML5-Dokumenten mit dem Inhaltstyp application/xhtml + xml. – yankee

Ich fand eine Lösung mit manueller Einrichtung. Der Code sieht dann wie folgt aus:

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>My HTML File</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" /> 
    <script type="text/javascript"> 
     angular.module('myApp', []); 

    angular.element(document).ready(function() { 
     angular.bootstrap(document, ['myApp']); 
    }); 
    </script> 
</head> 
<body> 

    <p>Nothing here {{'yet' + '!'}}</p> 

</body> 
</html>

Während dies für jetzt eine geeignete Abhilfe scheint, würde ich noch gerne wissen, was das Problem ist ...

Quelle

2014-04-20 18:52:54 yankee

Eine der besten Möglichkeiten, dies zu tun ist die HTML/XHTML data- Attribute zu verwenden. Sie können gültigen HTML- und XHTML-Code schreiben, ohne einen eckigen Namespace einfügen zu müssen. Dies würde wie folgt aussehen:

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" data-ng-app=""> 
<head> 
    <title>My HTML File</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" /> 
</head> 
<body> 

    <p>Nothing here {{'yet' + '!'}}</p> 

</body> 
</html>

Dies ist auch von Vorteil, wenn es um alle anderen Winkel Erklärungen kommt, wie ng-repeat und ng-show usw.

<div ng-repeat="item in items">{{item.name}}</div> // This won't validate. 
<div data-ng-repeat="item in items">{{item.name}}</div> // This will validate.

Beachten Sie, dass Ihre Lösung mit der Winkel App Bootstrapping ist auch gültig - aber es ist nicht wirklich eine Lösung für das Problem, das Sie haben. (Es ist einfach eine andere Art und Weise Ihre Angular App zu laden, die für Ihre Situation passiert zu arbeiten, da Sie keine anderen ng- Richtlinien in Ihrem Markup hatte.)

Siehe eine ähnliche Frage und Antwort here.

Quelle

2014-11-02 14:40:43

Wie kombiniere ich angularjs und xhtml?

Antwort

Verwandte Themen