Yeoman wewnątrz ExpressJS

Question

Nadal chciałbym spróbować uzyskać przykład w/Yeoman i Express.

Próbowałem następujących rzeczy i działało "w porządku", ale utknąłem w łączeniu tras. (Ponad uproszczone dla czytelności)

mkdir test 
cd test 
express 
mkdir app 
cd app 
mkdir js 
cd js 
yeoman angular 

Potem zmienił „wyjściowy: dist” na „wyjście: ../../ publicznego” w Gruntfile.js

Teraz oba serwery uruchomić porządku na ich własne (np. serwer pocztowy i plik app.js). Mogę także uruchomić "build yoman", aby wyprowadzić miniony JS do/public w aplikacji ekspresowej.

Jestem trochę rozmyta na temat tego, jak trasy mogą się łączyć? Chciałbym/podciągnąć trasę Angular, a nie trasę ekspresową, itd. Przykłady ziarnistości z ekspresją kątową na githubie wyglądają dobrze, ale nadal chciałbym, żeby Yeoman został włączony do projektu.

Wszelkie sugestie będą mile widziane.

Answer 1

Polecam tę strukturę szlachciura + expressjs:

mkdir app 
cd app 
yeoman angular 
express . 

Więc drzewo reż powinna wyglądać następująco:

. 
├── app 
│   ├── 404.html 
│   ├── favicon.ico 
│   ├── index.html 
│   ├── robots.txt 
│   ├── scripts 
│   │   ├── controllers 
│   │   │   └── main.js 
│   │   ├── vendor 
│   │   │   ├── angular.js 
│   │   │   ├── angular.min.js 
│   │   │   ├── es5-shim.min.js 
│   │   │   └── json3.min.js 
│   │   └── yeoman-test.js 
│   ├── styles 
│   │   └── main.css 
│   └── views 
│    └── main.html 
├── app.js 
├── Gruntfile.js 
├── package.json 
├── public 
│   ├── images 
│   ├── javascripts 
│   └── stylesheets 
│    └── style.css 
├── routes 
│   ├── index.js 
│   └── user.js 
├── test 
│   ├── lib 
│   │   └── angular-mocks.js 
│   └── spec 
│    └── controllers 
│     └── main.js 
├── testacular.conf.js 
└── views 
    ├── index.jade 
    └── layout.jade 

można usunąć obecnie zbędne public katalog (jedziemy do serwowania od app):

rm -rf public 

An d teraz w app.js, musisz zmienić katalog, z którego chcesz wyświetlać pliki statyczne. Zmień tę linię:

app.use(express.static(path.join(__dirname, 'public'))); 

do tego:

app.use(express.static(path.join(__dirname, 'app'))); 

I to powinno być o nim. Jest jedno, że masz teraz dwa pliki "indeksu" - jeden w views/index.jade, a drugi w app/index.html. Usunięcie app/index.html obecnie łamie damy, więc radzę, aby pozbyć się trasy dla app/index.jade i po prostu wprowadzić zmiany na index.html.

Mam nadzieję, że to pomoże!

Answer 2

Oto kolejny nieco inna konfiguracja

yo angular 

aktualizacja Gruntfile.js zmienić config od 'app' do 'publicznego'.

następnie do

express . 

otwarte app.js oraz zapewnienie nie mapowania trasy jak to app.get ('/' routes.index); Jest tak, że serwer węzłowy faktycznie wyświetliłby index.html, ten sam plik, który ładuje się podczas działania "pomruk serwera".

Teraz śmiało usunąć katalogu publicznym, a następnie przejść do katalogu aplikacji publicznych

rm -rf public 
mv app public 

Answer 3

Mam kłopoty z tego rozwiązania: wyraźnej nadal próbować załadować index.jade zamiast index.html, ale jeśli wpisuję localhost: 3000/index.html prawidłowo renderuj wyrażenie. I rozwiązać usuwając tę ​​linię od app.js:

//app.get('/', routes.index); 

nadzieję, że to pomaga. Dzięki za udostępnianie D.

Answer 4

chciałbym komentować odpowiedzi @btford „s gdybym miał reputację -

prostu chciałem dodać, że po zainstalowaniu express .yo angular nadpisuje plik package.json grunt utworzony które pęknie, jak donosi @jjperezaguinaga.

Przed zainstalowaniem express . należy zapisać kopię pliku package.json. Następnie dodać następujące zależności do pierwotnego package.json:

"dependencies" : { 
    "express": "3.3.4", 
    "jade": "*" 
} 

Answer 5

Oto kompilacja krokach Inni sugerowali wcześniej, ale wszystko w jednym, w ponumerowanych kroków. Oparte jest na wersjach: Yeoman 1.0.4 & Express 3.3.8.

1) Tworzenie katalogu projektu i cd na to

2) Zainstaluj kątowa:

yo angular 

(będzie trzeba uruchomić kolejne dwie linie, jeśli nie jesteś zalogowany jako SU)

bower install 
sudo npm install 

3) Zmiana nazwy package.json do package_yo.json (więc nie jest zastępowane przez ekspresowej wersją package.json)

4) Zainstaluj Express express -c less -Hs. (lub innego ekspresowych opcje pożądania)

sudo npm install 

5) usunąć katalog publiczny & zmianę 'EKSPRES publicznego' do 'aplikacji' dla ścieżek w Express' app.js: app.use (require (” less-middleware ') ({src: _ dirname +'/app '})); app.use (express.static (path.join ( _nazwa, "aplikacja")));

6) Usuń ekspresową "domyślną trasę (app.get ("/", trasy.indeks);) (teraz wyrazić użyje tras określone w kątowym użytkownika/app folderze zamiast

7) Uruchom serwer npm zaczynają

(Następnie powinieneś zobaczyć stronę powitalną Yeoman pod adresem: localhost: 3000 /)

Answer 6

Ten projekt wydaje się obejmować wszystkie wymogi (a nawet ma opcjonalną obsługę MongoDB): https://github.com/DaftMonk/generator-angular-fullstack

właśnie próbował go lokalnie i to działa:

npm install -g generator-angular-fullstack 

yo angular-fullstack [appname] 

Zobacz stronę GitHub, aby uzyskać więcej informacji.