2013-05-17 21 views
8

Derzeit versuche ich Angular JS zu lernen, aber zuerst möchte ich meine Umgebung mit Spring mvc einrichten.Spring MVC und Angularjs

Im Moment möchte ich nur mit Ruhe arbeiten, aber ich habe einen Zweifel für das, was ist der beste Weg, um das resoucres zu platzieren in Spring MVC

Meine einfachen applicaction hat diesen squeleton:

my-simple-app: 
src 
    main 
    java 
    resources 
    webapp 
    resources 
    WEB-INF 

Wenn ich den Ordner app von der angular-seed setzen möchte, was ist der beste Ort, um es zu setzen?

Ich habe versucht, src/webapp/resources/app zu setzen, aber dann muss ich die html Dateien zu WEB-INF verschieben?

Wie war dein Skelett in ear angle-js Federmvc-Anwendungen?

Was ist der beste Weg, um die Umleitung auf die app/index.html zu tun? in die Willkommensdatei und arbeiten dann nur mit angularjs$routeproviders?

Danke!

+1

Bitte akzeptieren Sie die Antwort oder vermittelt, was fehlt, so dass andere mit der Überzeugung in die Frage – Abilash

Antwort

8

Soweit ich verstehen kann, Ihre Front-End-Technologie ist Angualar JS und Ihre Back-End-Technologie ist Spring MVC.

Ich bin ein Front-End-Entwickler und daher kann ich Ihnen den Rat über die Struktur Ihres HTML, CSS und Javascript geben.

Hier sind meine Empfehlungen:

  1. Mittel der Kommunikation zwischen Front-End und Back End: Alle Ihre Front-End-Dateien sollten: JSON

  2. File Location (Sollte für MVC-Muster strikt eingehalten werden) werden in WEB-INF-Ordner mit dieser Struktur:

    • WEB-INF/Assets: Alle Ihre JavaScript-Dateien, JavaScript-Bibliotheken, Bilder , CSS usw. Sollte hier sein. Sie können einen separaten Ordner für jeden Ressourcentyp innerhalb von Assets öffnen

    • WEB-INF/JSP: Alle Ihre JSPs sollten hier platziert werden. Als Angular größte Stärke Einzelseite Anwendung ist, können Sie eine JSP pro Haupt-Seite erstellen und legen Sie sie hier

    • WEB-INF/HTML: Alle statischen Ressourcen, die in den JSPs injiziert werden würde mit <ng-view> oder <ng-include> hier platziert werden können

Hoffe, das hilft!

5

Der einfachste Weg ist, alle Dateien im Verzeichnis angular-seed/app aufzunehmen und in Ihr Verzeichnis src/main/webapp zu kopieren. Nach dem Kopieren dieser Dateien sollten Sie in der Lage sein, die App erneut bereitzustellen und über ein laufendes Beispiel zu verfügen.

Die meisten Servlet-Container enthalten index.html als Standard-Begrüßungsdatei. Wenn dies nicht der Fall ist, können Sie diese Konfiguration in web.xml <welcome-file-list> hinzufügen.

Das Verzeichnis WEB-INF ist für Webressourcen gedacht, die nicht direkt im Web verfügbar gemacht werden sollen. web.xml ist ein Beispiel für eine Datei, die keinen Remotebenutzern zur Verfügung gestellt werden sollte. In diesem Fall können Sie alle Ressourcen der App direkt im Web bereitstellen. Daher müssen Sie die Ressourcen nicht unter WEB-INF platzieren.

+2

beachten Sie, wenn er Feder MVC verwendet, und er hat die Feder -mvc Dispatcher-Servlet zugeordnet zu /, dies wird alle Anfragen übernehmen :) – JustDanyul

+0

Auch für eine sichere App nicht alle js und html, die Business-Validierungen und Front-End-Flows und Algorithmen auf der Welt haben offen legen wollen. Wenn unter web-inf dann nur eingeloggte/Benutzer mit entsprechenden Rollen werden diese Dateien geliefert – tgkprog

0

Ich empfehle diese Struktur für Ihr Projekt:

my-simple-app: 
    src 
     main 
      java 
       controller 
        MySpringCtr.java 
       models 
        Person.java 
        House.java 
        *.java 
     webapp 
      WEB-INF 
       resources 
        css 
         style.css 
         *.css 
        js 
         angularCtr.js 
         *.js 
       pages 
        index.jsp 
        *.jsp 
       mvc-dispatcher-servlet.xml 
       web.xml 

ich ein Tutorial für Anfänger gefunden, die Schritt für Schritt erklärt, wie SpringMVC und AngularJS zu kombinieren, können Sie das Tutorial und den vollständigen Code finden in this blog ich hoffe, dass es wird nützlich sein :)

2

In meinem ersten Schritt Angular + Frühling habe ich diese Liste von Tutorials:

https://www.youtube.com/watch?v=Sc2atFv_h_I

Es enthält 12 großartige Videos, die "How to" Schritt für Schritt erklären. Es enthält Informationen über Installation, Konfiguration, beste Architektur Praktiken, etc.