Tartalomjegyzék
Angular generátor Yeomannal
- Szerző: Sallai András
- Copyright © 2015, Sallai András
- Licenc: CC BY-SA 4.0
- Web: https://szit.hu
AngularJS generátor telepítése
Több ezer generátor érhető el a yeoman webhelyén.
Telepítsük az AngularJS generátort.
npm install --global generator-angular
Projekt készítése
mkdir projekt01 cd projekt01 yo angular
A generátort konfigurálni szükséges.
_-----_
| | .--------------------------.
|--(o)--| | Welcome to Yeoman, |
`---------´ | ladies and gentlemen! |
( _´U`_ ) '--------------------------'
/___A___\
| ~ |
__'.___.'__
´ ` |° ´ Y `
Out of the box I include Bootstrap and some AngularJS recommended modules.
? Would you like to use Sass (with Compass)? (Y/n)
Az első kérdés, szeretnénk-e az Sass CSS nyelvet használni. Válasszuk a nemet, ha nem tudjuk miről van szó.
Következő kérdés:
? Would you like to include Bootstrap? (Y/n)
Ezt ajánlott.
Which modules would you like to include? (Press <space> to select) ❯◉ angular-animate.js ◯ angular-aria.js ◉ angular-cookies.js ◉ angular-resource.js ◯ angular-messages.js ◉ angular-route.js ◉ angular-sanitize.js ◉ angular-touch.js
Hagyjuk alapértelmezetten. Egy Enter után indul a projekt létrehozása.
A generátor egy hosszabb idő után egyszer leáll. A fel, le billentyűkkel újabb kérdést tudunk előhozni:
? Overwrite package.json? show the differences between the old and the new
Lehet: y
Az elkészült alkalmazáshoz kapcsolva vannak a következő JavaScript könyvtárak:
- jquery.js
- angular.js
- bootstrap.js
- angular-animate.js
- angular-cookies.js
- angular-resource.js
- angular-route.js
- angular-sanitize.js
- angular-touch.js
Menü
Keressük meg a következő sort:
<li><a ng-href="#/about">About</a></li>
Tegyünk a # után egy ! jelet. Így működni fog.
- index.html
... <ul class="nav navbar-nav"> <li class="active"><a href="#/">Home</a></li> <li><a ng-href="#!/about">About</a></li> <li><a ng-href="#/">Contact</a></li> </ul>
Ide létrehozhatjuk saját menüpontjainkat.
Megtekintés
Nézzük meg a projektünket böngészőben:
grunt serve
A localhost:9000 porton megnyílik automatikusan a weboldal.
Kiadás készítése
$ cd projekt1 $ grunt
Létrejön egy dist könyvtár, amelyben megtaláljuk a telepíthető webhelyet.
Generátorok
- angular (vagy angular:app)
- angular:controller
- angular:directive
- angular:filter
- angular:route
- angular:service
- angular:provider
- angular:factory
- angular:value
- angular:constant
- angular:decorator
- angular:view
Például egy route generálása:
yo angular:route negyedik
Létrejönnek a következő állományok:
- app/views/negyedik.html
- app/controllers/negyedik.js
A következő állományban lesz egy bejegyzés a routinghez:
- app/scripts/app.js
Így elérhető egy ilyen lap is:
localhost:9000/#negyedik
Új lap
Szeretnénk új lapot generálni, nézettel, kontrollerrel és routing bejegyzéssel. Legyen a lap neve „list”:
yo angular:route list
Vegyük fel a menüpontok közzé.
Bower
A Bowerrel telepíthetjük az alkalmazásunk függőségeit.
A telepített függőségek megtekintése:
bower list
Bootstrap utólag
bower install --save bootstrap
Utólag nem írja be az index.html fájlba a link elemet, ezért nekünk kell megtenni.
Az app/index.html fájlban megadjuk az útvonalat:
<!-- bower:css --> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> <!-- endbower -->
Mehet a szerver:
grunt serve
A grunt beépíti a link elemet bootstrap#3.3.4 csomaggal, de az elavult.