[[oktatas:web:nodejs:yeoman|< Yeoman]]

====== Angular generátor Yeomannal ======

  * **Szerző:** Sallai András
  * Copyright (c) 2015, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== AngularJS generátor telepítése =====

Több [[http://yeoman.io/generators/|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.

<code>
     _-----_
    |       |    .--------------------------.
    |--(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) 
</code>

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:
<code>
? Would you like to include Bootstrap? (Y/n)
</code>
Ezt ajánlott.

<code>
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
</code>

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:

<code>
? Overwrite package.json? show the differences between the old and the new
</code>

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.

<code html 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>
</code>

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:


<code>
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
</code>


Mehet a szerver:
  grunt serve

A grunt beépíti a link elemet bootstrap#3.3.4 csomaggal, de az elavult.

===== Linkek =====

  * https://github.com/yeoman/generator-angular
  * https://dimitr.im/angularjs-applications-yeoman (2021)
  * https://www.npmjs.com/package/generator-angular (2021)