Tartalomjegyzék

Angular generátor Yeomannal

Angular generátor Yeomannal

Szerző: Sallai András
Copyright © Sallai András, 2015, 2016, 2021
Licenc: GNU Free Documentation License 1.3
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.

szit

Felhasználói eszközök

Eszközök a webhelyen