Struktura aplikacji emberowej

Przegląd plików i katalogów tworzących aplikację ember.js 2.X

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:

ember build --environment="production"

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.

blog comments powered by Disqus

Kategorie

Strony