1. Zuhause
  2. Frage und Antwort
  3. Mehrere Script-Links in index.html

Mehrere Script-Links in index.html

2015-03-16 6 views
9

Ich habe ein kleines Projekt in Angular bekommt. Ich versuche, alles in der Single-Verantwortung-Weise zu halten und Ich bin ziemlich glücklich mit mir App-Struktur. Das einzige was ich denke ist nicht sehr gut aussieht ist index.html. Alle js Dateien sind unter am Ende der Datei enthalten und ich mag das Aussehen nicht. Ich füge mehr Dateien hinzu (Controller, Dienste, etc.), während ich gehe und die Liste könnte ziemlich lang werden.Mehrere Script-Links in index.html

Also meine Frage ist: Ist es normal, dass die Indexdatei alle diese enthält oder gibt es Möglichkeiten, all diese in einer einzigen Datei zu verschieben und verweisen Sie auf die index.html?

<html> 
<head> 
    ... 
</head> 
<body> 
    ... 

    ... 


<script src="assets/js/angular.js"></script> 
<script src="assets/js/angular-route.js"></script> 
<script src="assets/js/angular-touch.js"></script> 
<script src="assets/js/angular-sanitize.js"></script> 
<script src="assets/js/angular-animate.min.js"></script> 
<script src="assets/js/jquery-2.1.3.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 

<script src="app/app.js"></script> 
<script src="app/app.routes.js"></script> 
<script src="controllers/controllerOne.js"></script> 
<script src="controllers/controllerTwo.js"></script> 
<script src="controllers/controllerThree.js"></script> 
<script src="directives/directiveOne.js"></script> 
<script src="directives/directiveTwo.js"></script> 
<script src="services/serviceOne.js"></script> 
<script src="services/serviceTwo.js"></script> 
<script src="services/serviceThree.js"></script> 

</body> 
</html>

aktualisieren 07/04/2015

Ich habe mit Gulp enden. Für alle, die hier ein wenig Hilfe suchen, habe ich dieses kleine Tutorial verfolgt: https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917

Quelle

2015-03-16 vidriduch

+0

vidriduch, hat meine Antwort Ihr Problem gelöst? –

+0

Ich werde es als Hinweis verwenden ... Ich werde die Frage für eine Weile offen lassen. Ich möchte Grunt, Gulp und requiry.js ein bisschen mehr erforschen, ihnen einen Versuch geben und werde dies entsprechend aktualisieren. – vidriduch

+0

Sicher, Sie sind willkommen, Ihre Schlussfolgerungen nach Ihrer Forschung zu posten. Viel Glück! –

Antwort

7

Es gibt einige mögliche Lösungen, die ich weiß, dass automatisch Ihre Script-Tags für index.html injizieren:

  1. Verwenden Gulp - Task/Runner erstellen. können Sie Gulp-Inject verwenden, das ist: -:

    ein Stylesheet, JavaScript und webcomponent Referenz Injektion Plugin für schluck

  2. Grunt JavaScript Task-Runner Sie Grunt-Injector für verwenden können

    Verweisen Sie Verweise auf Dateien in andere Dateien (denken Sie Skripte und Stylesheets in eine HTML-Datei)

  3. Eine andere Option, die ich nicht verwendet habe, ist RequireJS. See - http://www.startersquad.com/blog/angularjs-requirejs/

Sie viele Diskussionen über Gulp vs Grunt finden können, Beide werden Ihnen das Leben leichter und lösen Ihr Problem machen.

See:

Grunt vs Gulp

Another Grunt vs Gulp

Quelle

2015-03-16 16:00:33

1

Dieser Ansatz ist völlig normal für eine Entwicklungsstufe, da es das Debuggen erleichtert. Sie sollten sich keine Sorgen machen, wie es aussieht.

jedoch, wenn die Anwendung auf die Produktion Freigabe sollten Sie alle Skripte in einer einzigen Datei verketten, da dies deutlich der Bootstrap Zeit steigern werde. Es gibt verschiedene Möglichkeiten, dieses Ziel zu erreichen, und in der Regel werden Front-Side-Build-Tools wie Grunt oder Gulp verwendet. Es liegt an Ihnen, zu entscheiden, welches Tool am besten für Sie funktioniert.

Darüber hinaus hat require.js integrierte Modularität mit einem einfach zu bedienenden Werkzeug für die Verkettung, obwohl es argumentiert, dass Angular profitiert davon, es als Angular zu verwenden, hat es eigene Modularität. Der Hauptvorteil von require.js besteht darin, dass Sie nicht auf die Reihenfolge achten müssen, in der Ihre Dateien verkettet werden, da sie für das Tool zuständig ist. Leider kostet es eine Menge Standardcode.

Quelle

2015-03-16 15:55:23

2

Was würde ich vorschlagen, ist eine Aufgabe Läufer irgendeine Art mit all Ihren Dateien verketten, und sie wie eine einzige ‚app.js‘ Datei in etwas aufzubauen.

Meine persönliche Vorliebe ist Schluck, aber eine andere populäre Alternative ist Grunzen. Here ist eine nette Einführung in die Verwendung von Schluck mit eckigen, die ich vorschlagen, auschecken.

Quelle

2015-03-16 15:56:38

1

Mit require.js, kann u alle Tags in einer Zeile verwalten

Quelle

2015-03-16 15:58:18

1

Als einfache Lösung, in HTML5 können Sie das tun

<link rel="import" href="header.html">

und legen Sie alle Ihre

<script src="libs/....js"></script> 
<script src="libs/....js"></script> 
<script src="libs/....js"></script>

in der header.html

Quelle

2016-02-18 10:55:12 jimver04

+0

Was ist, wenn der Browser html5 nicht unterstützt? – niyasc

Verwandte Themen

 Verwandte Themen