2016-08-08 26 views
0

Ich versuche eine Webseite mit angular2, Firebase 3 SDK und angularfire2 zu erstellen. Ich bin kürzlich zu all diesen Frameworks oder SDKs gekommen. Also habe ich einige Schwierigkeiten, alle Funktionen in Dateien wie systemjs.config, typings.json, tsconfig.json, packages.json und etc. zu verstehen. Ich denke, für jetzt habe ich etwas Verständnis über diese Dateien, aber ich bin nicht zuversichtlich genug Konfigurieren Sie alle für mein Projekt. Ich folgte dem angular2 Tour of Heroes tutorial erfolgreich und jetzt versuche ich, diese angular2 Tour of Heroes Webseite zu meiner eigenen Webseite umzuwandeln. Momentan versuche ich Firebase 3.0 sdk anstelle von liteserver und in-memory-data.service zu verwenden, also habe ich mich dazu entschieden, in angularfire2 zu schauen, um mit Firebase einfacher zu arbeiten. Ich habe mehrere Youtube-Videos (zum Beispiel und 2nd) über angularfire2 angesehen und auch die setup guide für angularfire2 auf github gelesen und festgestellt, dass alle die angle-cli-build.js-Datei erwähnen, wenn sie ihre Projekte einrichten. Ich habe meine Dateien durchgesehen und kann sie hier nicht finden. meine Datei-Struktur sieht wie folgt ausWarum fehlt mir angular-cli-build.js? Muss ich es benutzen?

project 
|-app 
| |-html 
| | |-. 
| | |-all html files(templates) 
| | |-. 
| |-js 
| | |-. 
| | |-all js and map files(generated by typescript) 
| | |-. 
| |-css 
| | |-. 
| | |-all css files for templates 
| | |-. 
| |-. 
| |-all ts files 
| |-. 
|-node_modules 
|-typings 
|-gitignore 
|-index.html 
|-package.json 
|-README.json 
|-styles.css 
|-systemjs.config.js 
|-tsconfig.js 
|-typings.js 

Meine Frage ist, sollte ich Winkel-cli-build verwenden? und wenn ja, warum vermisse ich diese Datei, obwohl ich das offizielle Tutorial befolgt habe? (erster Link)

Vielen Dank! Wenn mehr Informationen für eine Antwort benötigt werden, stelle ich es Ihnen gerne zur Verfügung.

P.S. Ich bin auch glücklich, irgendwelche Ratschläge zu nehmen, die angle2 und firebase 3.0 sdk betrachten.

Antwort

0

Zuerst musste ich mich an die Bedeutung von CLI erinnern. CLI wird für die Befehlszeilenschnittstelle ausgeführt. In meinen Worten ist angular-cli nur eine Ansammlung von Befehlen, die Sie bei der Entwicklung von Tests, der Umstellung auf die Produktion, der Erstellung von Routen und Komponenten und der Organisation Ihrer Anwendung unterstützen. Angular-CLI funktioniert mit Webpack anstelle von Broccoli, die Ihnen helfen, Ihren Code zu organisieren.

Ich fand eine gute Erklärung für das Motiv der Verwendung des Webpacks oder anderer Modulbündler. Dies ist von der Webpack-Webseite.

Heute Websites entwickeln sich in Web-Anwendungen:

Immer mehr JavaScript verwendet wird. Moderne Browser bieten eine breitere Palette von Schnittstellen. Weniger vollständige Seite neu geladen → noch mehr Code in eine Seite. Daher gibt es eine Menge Code auf der Client-Seite!

Eine große Codebasis muss organisiert werden. Modulsysteme bieten die Option , um Ihre Codebasis in Module aufzuteilen.

Nachdem ich all dies gelesen hatte, entschied ich, dass ich angle-CLI auch versuchen sollte. Da ich bereits ein Projekt erstellt hatte, bevor ich diese Entscheidung traf, musste ich ein wenig mehr suchen, um alles richtig zu konfigurieren. Ich habe die Lösung dazu github post gefunden.

Also, wenn Sie angular-cli-build.js (dh angle-cli) zu bereits bestehenden Projekt hinzufügen möchten. Sie sollten diese Befehle ausführen.

cd yourproject 
npm install angular-cli 
ng init --source-dir app 

sagen --source-dir sagen Sie Winkel-cli, wo für die Quellcode-Dateien zu suchen. Ich denke, angular-cli arbeitet mit systemjs zusammen, weil ich nicht angeben musste, wo meine js-, html- und css-Dateien sind, da ich es in systemjs gemacht habe, bevor ich angle-cli benutzt habe.Sie müssen also nur angeben, wo Sie Ihre TypeScript-Dateien finden.

3

Ich habe nicht den Ruf, Ihre Antwort zu kommentieren, aber ich dachte, dass angular-cli-build.js nicht mehr verwendet wird, da Angular-CLI jetzt WebPack anstelle von Broccoli verwendet. (Ich bin auch noch ziemlich neu dazu, ich habe Angular-CLI zu Beginn dieser Woche einfach abgeholt)

+0

Ich habe meine Arbeit jetzt auf eckig eingestellt. Ich arbeite jetzt an Uni-Mitarbeitern, ich stelle sicher, dass ich das überprüfen werde, sobald ich zurückkomme. Danke für den Kommentar! – Vato