Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:yeoman:angular_generalas

< Yeoman

Angular generátor Yeomannal

  • Szerző: Sallai András
  • Copyright © Sallai András, 2015, 2016
  • Licenc: GNU Free Documentation License 1.3

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@0.11.1

Projekt készítése

mkdir projekt1 && cd projekt1
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

Ismert hiba

Az angular generátor kihagy egy sort. Pótoljuk:

mcedit bower_components/bootstrap/bower.json

Keressük meg a „main” részt és javítsuk így:

  "main": [
    "less/bootstrap.less",
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js"
  ],

E nélkül, az elkészült weboldal kinézete kissé pur.

Megtekintés

Nézzük meg a projektünket böngészőben:

grunt serve

A localhost:9000 porton megnyílik automatikusan a weboldal.

A weblap csak localhoston tekinthető meg. Ha nem localhoston fut a weblap, egy ssh parancs segíthet Linux alatt:

Tegyük fel, hogy a távoli gép IP címe: 192.168.5.102. A távolig gépen van egy joska nevű felhasználó. Ekkor:

ssh -l joska -L 9000:localhost:9000 192.168.5.102

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

Linkek

oktatas/web/yeoman/angular_generalas.txt · Utolsó módosítás: 2019/08/22 20:50 szerkesztette: admin