2013-07-17 10 views
5

Ich habe Schwierigkeiten, ein Projekt mit eckigen und Fundament 3 (Schienen im Backend) einzurichten. Also habe ich viel gesucht, aber es gibt nicht viele Ergebnisse.Angularjs + Zurb Foundation, spielen sie gut zusammen?

Ich diene Winkel von einem Unterordner (localhost: 3000/app), und begann mit der html so etwas wie diese

!!!5 
%html{ "ng-app" => "App" } 
    %head 
    -# I tried this for html5 url on angular, not so much help so far 
     %base{:href => "/app/"} 
    %title 
     NG APP 
     ... 
    %body 
    %header 
     ... 
    %main 
     = yield 
    %footer 
     ... 
    = javascript_include_tag "application" 
    = yield :javascripts 

Ein paar Blick gut funktionieren. Aber als ich versuchte, die Registerkarte "Grundlagen" zu verwenden, konnte ich Arbeit machen, weil eckig den Anker als eine URL passierte, die gegen $ routeProvider geprüft werden sollte.

Also, ich überprüfe hier einige Fragen, und ein Teil der Antworten gibt mir den Eindruck, dass die Grundlagen funktionieren gut HTML5-Modus in eckigen zu ermöglichen. (Was ich es schaffen könnte) und andere Antworten sagen, dass, um Arbeit mit eckigen Fundament zu machen, eine Direktive für jede Komponente auf Fundament schreiben sollte. Oder der letzte Fall bewegt sich auf Twitter Bootstrap.

So kann ich eine einheitliche Antwort finden, könnten Sie bitte, bestätigen, wenn ich jetzt Fundament mit Winkel direkt verwenden kann. Vielen Dank.

+0

Es hängt davon ab, wie genau Stiftung arbeitet, scheint es Sie in der Lage sein sollten, um möglicherweise nur Winkel Bootstrap manuell nach der Gründung ist es Updates beendet hat zu machen, ist es unter der Annahme, fügen Sie nicht weiter/DOM-Elemente entfernen und Sie nicht erwarten, zu sein Lage von innen Eckige zu den Dingen auf den Grund Kontrollen zu binden.Grundsätzlich ist das Problem, dass diese beiden Bibliotheken die Kontrolle über das DOM höchstwahrscheinlich übernehmen wollen und $ scope in Angular verwenden. Es muss sich der in Javascript gemachten Änderungen bewusst sein (wenn dies außerhalb einer Angular-Komponente geschieht, gilt dies nicht $ Uhren werden nicht aktualisiert). – shaunhusain

+0

Bisher funktioniert das Grid gut, funktioniert aber nicht gut die Komponenten der Foundation – raulricardo21

Antwort

4

Die beste Wahl wäre, die Foundation-Plugins in eckige Dienste zu verpacken oder nur CSS/SASS zu verwenden, das mit dem Framework bereitgestellt wird und das Verhalten von Grund auf neu erstellt. Konzentrieren Sie sich auf das Prototyping mit Markup + Stylesheets und erstellen Sie dann eine eckige Logik. Zumindest würde ich das tun, wenn ich Foundation brauche/hätte.

Twitter Bootstrap in ähnlicher Weise arbeitet, und der einzige Vorteil dieser Rahmen zu bewegen, ist die Tatsache, dass Sie viel Winkel modules/Richtlinien Einwickeln verfügbaren Plugins zu finden. In diesem Fall müssten Sie den gleichen Job nicht zweimal und gut machen.

  1. Werfen Sie einen Blick hier: http://mgcrea.github.io/angular-strap/ an erster Stelle.
  2. Dann suchen Sie nach Bootstrap-basierte Komponenten in Bower.io Components Directory

Auch, wie einige Leute in den Kommentaren erwähnt haben, Sie könnten Sie Anwendung Bootstrap manuell müssen, die so einfach ist, dass Sie app in einem Modul als Verpackung und Laufen:

angular.bootstrap(element[, modules]); 

// http://docs.angularjs.org/api/angular.bootstrap 

Wie gesagt, es ist normalerweise besser, das Rad nicht neu zu erfinden.

Edit:

Es ist eine interessante Diskussion über Google Groups zu diesem Thema (und wenig überraschend Benutzer Schlussfolgerungen sind sehr ähnlich): https://groups.google.com/d/msg/angular/Htkzt7Fsaog/TeFm5l4snTwJ

+1

Gut gesagt, und das wird für jeden Rahmen wahr. Angular behandelt von Natur aus DOM-Interaktionen und -Modifikationen, so dass jede Framework-Komponentenbibliothek Probleme haben wird. –

+1

Ja, aber der Punkt ist: Auch wenn Sie einige Sachen neu schreiben müssen, ist es in der Regel sauberer und viel weniger Zeit benötigt, wenn Sie es auf die eckige Weise tun. –

Verwandte Themen