Web library létrehozása, Angular 4

Fejlesztés, programozás
, , , ,
1

Web fejlesztésben nem vagyok mélyen jártas. Viszont most szeretnék készíteni egy olyan library-t, amit több projektnél is felhasználnék. Tehát lenne egy php egy js és egy css mappa. A kérdésem az, hogy hogyan szokták létrehozni a mappa struktúrát ilyen esetekben és hogyan oldják meg a linkelést?
Tehát a mostani elképzelésem:
index.html (vagy php)
settings.php
settings.js
src/css
src/js
src/php
src/img

Az index oldal és persze az src alatt az összes fájl közös lenne minden projektben, tehát ezekbe projektenként nem akarok bele nyúlni. A két settings fájl lenne, ami projekt specifikus változókat tartalmazna.

A gondom a linkeléssel van. Még php esetében tudom is, hogy hogyan oldjam meg, de js és css (vagy mondjuk html img src tagnél) nem feltétlenül tudom, hogy hogyan oldjam meg, hogy bármilyen almappából működjön és ne mondjuk a fentebb írt src nevű mappából. Vagy minden html fájl helyett legyen php és a settings.php-ba mentsem el az útvonalat?
Ezt hogyan szokták megvalósítani?

2

Nem biztos, hogy jol ertem, elore is bocs.

A kozos cuccokat elmented egy mittomen src/shared mappaba.

A src/index.html head reszeben meg abszolut hivatkozassal hivod be a cuccot

<link rel="stylesheet" href="/shared/css/my-shared.css">

3

Ha a webrooton belül van az src mappa és azon belül van a shared. Akkor így jó lesz a link? Nem a /src/shared… kellene a hrefhez?
Egyébként azt akartam, hogy ne az src-ben legyen az index, hanem azon kívül. Tehát mondjuk az
site1.example.com és a site2.examle.com index.html is a “library”-ből jönne, (tehát ha mondjuk az a /srv/www/htdocs mappa, akkor ott nyomnék egy git pull-t… és természetesen a két settings fájlt meg gitignoreba tenném…).
És a kérdés az, hogy akkor is jól működnének a linkek, ha mondjuk a site3.example.com/almappa -ban csinálnék git pullt, de a webroot az ugyanúgy site2.example.com lenne és nem az almappa (és ilyenkor persze a site3.example.com/almappa/index.html lenne az alap oldal).

4

Bocs, en /src alatt a webrootot ertettem.

Egyebkent php-val csinalnek egy header.inc.php-t, amit inculdeolnek az index.php-ban, valahogy igy:

valahol a config fileban:

$siteUrl = ‘http://site2.example.com’;
$siteTitle = ‘My site 2’;

header.php

<html> 
<header>
<title><?php print $siteTitle; ?></title>
<link href="<?php print $siteUrl; ?>/shared/css/my.css">
<script type="text/javascript" src="<?php print $siteUrl;?>/shared/js/my.js"></script>
</header>
5

Köszönöm. És egyébként erre még mindig nincs megoldás php nélkül? Persze most ebben az eseteben mehet phpvel.
Nézegettem githubon forrásokat. pl a videojs már javascript osztályokat használ és ott az osztályokat importálja be fájlokból. Ott ./ vagy …/ formában használja. Szóval van egy video.js fájl és abban importok vannak (az előnézet nem jeleníti meg az egész fájlt).


Ahogy nézegettem a kódokat, úgy találtam az url.js fájlt:

Szerintem valami ilyesmi módon lehetne javascript segítségével kicserélgetni html tagek href vagy src linkjeit…
Egyébként úgy is valószínűéeg phpval csinálom meg, mert amúgy is kell php adatbázis miatt. Csak kíváncsi lettem volna, hogy mi a módja manapság ennek :D

6

Manapság a frontend javascripttel készül, a két legnagyobb versenyző a Facebook React-ja és a Google Angular 4-e. A backend általában egy sima api. Routingot, includeokat, minden túrót a javascript csinál. Pont most volt egy olyan nálunk, hogy az egyik projekthez írtam egy csomó cuccot, amit a másik projektben fel tudtunk használni. A közös cuccoknak csináltunk egy külön repot, az új projekt package.jsonjaba meg beleírtuk, hogy amikor npm installt futtatunk, szedje le ezt a repot @akarmi/core neven. Az új ts fileokba meg csak ennyit írunk:

Import { ApiService } from @akarmi/core;

Ott tartunk, hogy TypeScriptben programozni már teljesen értelmes módon lehet. Múlt héten írtam abstract classt is. Szuper érzés volt :D

Szerk: Az Angular 4 egy teljes framework, és iszonyat gyorsan lehet vele haladni.

https://angular.io

Az angular cli meg minden feltelepít, beállít, routinggal, teszt szerverrel, mindennel.

https://cli.angular.io

2 kedvelés
7

Köszönöm!
Egyébként angulárral tervezem csinálni az egészet. Persze az angulárhoz sem értek, csak néztem, hogy mire jó. És tetszett az, hogy ha elég adatot veszek ki az adatbázisból, akkor oldal újratöltés és újabb adatbázis kapcsolat nélkül is lehet dolgozni. Szóval köszönöm, lesz mit olvasnom, mert így legalább tudom, hogy merre induljak el!

8

Az angular.io oldalon a Get Started tutoriált végignyomtam. Persze beletelt pár órába, + volt jónéhány apróbb változás, amit elfelejtettek tükrözni a tutorialban. Az egyik legdurvább, amikor elfelejtették közölni, hogy az egyik komponens működéséhez npm telepítés is szükséges…
Mindegy. Végignyomtam és megérte. Totál ezt kerestem!!! Köszönöm még egyszer!

Egyébként úgy érzem, hogy néha a szintaktika nehéz, de sokkal átláthatóbb, mint volt kb 2 évvel ezelőtt. Még van hova fejlődni, de látom, hogy sokkal, de sokkal jobban átláthatóbb programot lehet vele írni, mint ha natívan nekiállnék és js/html/css kombóval csinálnék mindent. Tetszik az, hogy jól átláthatóvá teszik az egész projektet, hogy más is könnyebben olvasni tudja később.
Egyébként a tutorial végére az app könyvtárban keletkezett 22 fájlt. Érdemes ezeket rendszerezni komponens nevenként vagy valahogy máshogy?

9

Én májusban kezdtem el Angular 4-ezni, előtte hét hónap React, azelőtt két és fél év Angular 1. Messze ez a legjobb a három közül. Most egy elég nagy projektnél használjuk, és teljesen bevált az, amit az Angular javasolt, tehát az app folderben egy components folder, azon belül az egyes komponensek a saját foldereikben.

/
 src
   app
     components
       valami
           valami.component.ts
           valami.component.html
           valami.component.spec.ts
       masvalami
           masvalami.component.ts
           masvalami.component.html
           masvalami.component.spec.ts
     services
           valami.service.ts
     interfaces
           valami.interface.ts

Volt egy kis agyalás, hogy a service-ek és az interface-ek külön mappába menjenek, vagy annak a komponensnek a mappájába, amelyik domainjébe tartoznak, de egy servicet vagy egy interface-t több komponens is használhat, úgyhogy ez a jobb megközelítés.

1 kedvelés
10

Ha egy komponens nagyon általános logikát fed le, pl pagination, vagy sorting, akkor csinálunk neki egy dedikált modult, és így a pagination modult minden modulba be tudjuk húzni, ahol van lapozás.

11

Nem tudom, hogy a backendet mivel szeretnéd csinálni, de van egy totál jó projekt, Laravel 5 / Angular 4 projektekhez.

1 kedvelés
12

Köszönöm! Ez nagy segítség!
Érdekes, hogy a tutorial alatt fontosnak tartották megemlíteni a fájlok elnevezéseit, de a mappastruktúrát már nem említették így.

13

Van styleguide, ami már önmagában is hatalmas segítség.

https://angular.io/guide/styleguide

14

Javaslom, hogy nézd meg az angular cli-t is. Jó cucc.

15

Igen, most épp a helpjét nézem, de olyan hosszú, hogy az elejét nem mutatja az iTerm :)
Persze ami kellett az megvan. Még aminek nagyon utána kell néznem, hogy tesztet hogyan lehet írni.
Egyébként nagy vonalakban mire jó az angular-cli? Mármint ha jól sejtem, akkor azzal indítom el most is a projektet, ami segít frissíteni a weboldalt, ha változtatok a kódban. Például lehet vele lekérdezéseket csinálni? Mondjuk egy komponens egy változójának értékét vagy hasonlók?

16

Nem emlékeztem rá, hogy már a tutorial is angular cli-t hasznal.

https://angular.io/guide/quickstart

Amikor először néztem meg, még az egész nagyon beta volt, kézzel kellett létrehozni a fileokat. Az angular cli meg létrehozza a megfelelő mappaszerkezetet, alap routinggal, package-ekkel, mindennel.

17

Igen, épp egy meglévő projektemhez akartam hozzáadni. És nem akartam, hogy az ng new létrehozzon már a projekten belül még egy mappát. És emiatt nézegettem a cli helpet. És persze sikerült is a root mappában létrehozni a projektet és beraktam a --routes true paramétert, de még csak idáig jutottam el, nem néztem meg mi van a routesban :)

18

Az Angular alapból a Karmat használja, ami egy hulladék. Egyrészt mindig buildel egyet tesztelés előtt, másrészt indít egy Chrome browsert, harmadrészt minden tesztet lefuttat. Ha van ötszáz teszt, kimehetsz cigizni.
Ellenben a Facbooknak van egy Jest nevű cucca.

https://facebook.github.io/jest/

Ez képes watch módban futni, csak egy filet, egy foldert, egy regexpre matchelő nevű teszteket futtani, nem indít semmilyen browsert, terminalban fut, nem buildel semmit indulás előtt. Istenkirály. Bele lehet hackelni az angularba, ha kell segítség, írj rám.

Terminix- Default_016.png1366×741 243 KB

19

Lehet, hogy idáig egy jó darabig még nem fogok eljutni, de köszi! :)
Viszont még egy kicsit gondban vagyok, mert másként kell gondolkodni, mint azelőtt.
Konkrétan van egy javascript fájlom, amit az index.php utolsó sorában lefuttattam. Ez beállított alapértékeket. Nos azzal kell kezdenem, hogy ezt singletonra alakíton, ugyanis ebből tényleg csak egy példányra lesz szükségem.
Szóval a jelenlegi projektemben (amit nemrég kezdtem el írni) van egy css 4 sorral, egy js vagy 170 sorral egy index.htm vagy 20 sorral és két külső js. Szóval eddig az egész lényegét a js adta. Ezt kell most átalakítanom angular formátumra, ami nem biztos, hogy elsőre egyszerű lesz :D

Szóval most még azzal is gondban vagyok, hogy a fő modult hogyan fogom használni angularban.
Egyébknét ez a cytoscape http://js.cytoscape.org
npm-mel már sikerült hozzáadnom a projekthez, de még nem tudom, hogy hogyan csinálok belőle singletont. :)

20

A js-ből csinálj egy servicet. (Hozzá kell majd adni az app.module.ts providers tömbjéhez)

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
//ide a functionjaid
}

Ha egy component constructor functionjaba teszed be parameterkent ezt a service-t, singleton lesz belole.

 import { Component } from '@angular/core';
 import { MyService } from '../../services/my-service';

 @Component({
    selector: 'my-component';
    templateUrl: './my-component.html'
 })
 export class MyComponent {
    constructor(private myService: MyService ) {}
 }

Szerk: A cytoscape-rol ezt talaltam: https://www.npmjs.com/package/ng2-cytoscape