Struktura aplikacji emberowej
Ember-cli potrafi tworzyć szkielet aplikacji jak i nowe elementy aplikacji jak routery czy komponenty. Do tego dochodzi obsługa zależności deweloperskich i aplikacji przez npm i bowera. W tej części omówię co, gdzie i jak znajduje się w aplikacji emberowej.
Podręcznik ember-cli opisuje nam elementy składowe aplikacji emberowej. Oto przegląd plików i katalogów aplikacji emberowej, z których będziemy korzystać w trakcie tworzenia aplikacji:
- app/: tutaj znajduje się kod naszej aplikacji - szablony, komponenty, routes, modele itd. Domyślnie dla każdego elementu tworzony jest nowy plik lub zestaw plików. Nowy element tworzymy przez ember-cli a następnie modyfikujemy do naszych potrzeb.
- public/: zawartość katalogu public trafi do głównego katalogu aplikacji w trakcie jej budowania. Wrzucamy tutaj pliki statyczne jak grafiki, czy czcionki.
- bower_components/: katalog z zależnościami aplikacji (instalowanymi przez bowera)
- bower.json: plik z zależnościami aplikacji, na podstawie którego bower wszystko instaluje.
- node_modules/: pakiety zainstalowane przez npm (zależności deweloperskie)
- package.json: plik z zależnościami npm.
- vendor/: pozostałe zależności, nie zainstalowane za pomocą npm czy bowera
- ember-cli-build.js: instrukcje budowania projektu dla Broccoli. Tutaj rejestrujemy używane przez nas pliki JS/CSS z komponentów bowera.
- config/environment.js: konfiguracja aplikacji.
Serwer deweloperski kompiluje aplikację w locie. Produkcyjną wersję budujemy poleceniem:
Stworzy to katalog dist z całą aplikacją skompilowaną i gotową do wrzucenia na serwer
. Wystarczy otworzyć w przeglądarce plik index.html i gotowe. Aplikacja emberowa domyślnie zakłada że zostanie otwarta w domenenie (ścieżka /
). Jeżeli chcesz by aplikacja działała w podkatalogu to trzeba go podać w konfiguracji przed zbudowaniem aplikacji (config/environment.js):
if (environment === 'production') {
ENV.baseURL = '/ścieżka/względem/domeny/';
}
W katalogu app/ znajdziemy główny kod naszej emberowej aplikacji. Do generowania szkieletów używamy ember generate TYP NASZA_NAZWA, o czym niebawem. Generator poda gdzie i jakie pliki stworzył.
Wyświetlany na starcie tekst Welcome to Ember
znajdziemy w szablonie app/templates/application.hbs - szablonie htmlbars używanym w obrębie embera. Gdy zmienimy coś w szablonie i zapiszemy zmiany - otwarta strona w przeglądarce powinna sama się przeładować prezentując nasze zmiany.
Comment article