Tartalomjegyzék

< Yeoman

Angular generátor Yeomannal

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:

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

Például egy route generálása: 

yo angular:route negyedik

Létrejönnek a következő állományok:

A következő állományban lesz egy bejegyzés a routinghez:

Í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.

Linkek