window.pipedriveLeadboosterConfig = { base: pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster on jo olemassa') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() Mestareiden vertailu: Angular vs. Vue - The Codest
Codest
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Toimialat
    • Fintech & pankkitoiminta
    • E-commerce
    • Adtech
    • Terveysteknologia
    • Valmistus
    • Logistiikka
    • Autoteollisuus
    • IOT
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
Takaisin nuoli PALAA TAAKSE
2021-12-22
Ohjelmistokehitys

Mestareiden vertailu: Angular vs Vue

Oliwia Oremek

Tällä hetkellä on olemassa muutamia yleisesti käytettyjä ja jatkuvasti kehitettyjä frontend-kehyksiä, joista kukin eroaa hieman toisistaan. Silti niillä saattaa olla jotain yhteistä. Tässä vertailu kehitysprosessin perusteella - Googlen Angular vs. avoimen lähdekoodin Vue.js:

Projektin perustaminen

Nopein tapa käynnistää projekti on käyttämällä Kehysten laatijoiden tarjoama CLI.. Molemmissa on melko hyvä palvelu, mutta on kuitenkin muutamia eroja, kuten, Vue on enemmän vaihtoehtoja, joten voit räätälöidä projektin tarpeittesi mukaan heti alusta alkaen. Voit valita Vue-versio, onko sinun käytettävä reititystä. Typescript, CSS-esiprosessorit tai perustaa linterin suoraan eteenpäin. Voit myös päättää, haluatko tehdä testejä (yksikkö- tai E2E-testejä).

Vue CLI

Angular mukana tulee generaattori, jonka avulla voit luoda komponentteja, palveluita, rajapintoja ja direktiivejä suoraan konsolista, mikä on kokemukseni mukaan erittäin kätevää, koska ei tarvitse manuaalisesti asettaa kansioita, tiedostoja ja turhia työkaluja. koodi käsin, varsinkin kun käytät esimerkiksi MVC-mallia. Typescriptin mukana tulee Angular ja tavallaan painostaa sinua käyttämään sitä. Jos et ole vielä tehnyt sitä, tässä on kätevä esittely, miksi sinun pitäisi kokeilla sitä - voit tutustua siihen osoitteessa täällä.

Alussa, Angular:n CLI kysyy vain reitityksestä tai halutuista CSS-esiprosessoreista, mikä verrattuna esim. Vue, ei jätä sinulle paljon tilaa päättää sovelluksesi rakenteesta ja tyylistä. Mutta jos aiot noudattaa sen pyytämiä konventioita, CLI opastaa sinua koko ajan.

Angular CLI

Hankkeen rakenne

Vue käyttää SFC:tä (Single File Components), jonka ansiosta uuden kehittäjän on melko helppo aloittaa kehyksen käyttö ja löytää jalat koodin pariin.

Direktiivit

Vue on myös valmiiksi varustettu direktiiveillä, kuten `v-if, v-for`, joita on hyvin intuitiivinen käyttää, koska se on lähes kopio ohjelmasta Angular niitä. Vue käyttää samaa konventiota kaksisuuntaiseen datan sitomiseen (vain lisäämällä etuliitteen, esim. v- sanassa `v-model`) ja lisäämällä @/v-on, joka osoittaa, että reagoimme johonkin. Angular erottaa tämän osoittamalla, mihin suuntaan olemme menossa käyttämällä sulkuja tapahtumien sitomiselle ja hakasulkeita ominaisuuksien sitomiselle, eli ,`(muutos), [ngStyle], [(ngModel)]`.

Osoitteessa Vue, rakenne itsessään on yksinkertainen, eikä tyylilomakkeita ja logiikkaa varten tarvitse tehdä erillisiä tiedostoja, joten kaikki on järjestetty ja helposti lähestyttävä. Tietenkin, Vue on mukana tyyliopas, jossa on suositeltuja sääntöjä, joita kannattaa noudattaa projektia luotaessa, mutta vain muutama sääntö on pakollinen. 

Tapahtumat

Tässä tapauksessa, Vue tulee jälleen kätevämpi ratkaisu; nimittäin, lähettääksesi tapahtuman lapsikomponentilta vanhemmalleen sinun tarvitsee vain (käyttämällä komentoa Vue 3 Koostumus API ) ottaa metodin kontekstiobjektin asetuksista ja yksinkertaisesti lähettää sen, mitä sillä hetkellä tarvitset:

setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit('customNameOfYourEvent', dataYouWantToPass); } }

Voit tehdä sen myös suoraan mallissa vastauksena johonkin muuhun tapahtumaan.

Osoitteessa Angular, sinun on ensin määriteltävä EventEmitter seuraavasti:

@Output() customNameForYourEmitter = new EventEmitter();

Sitten sinun on kutsuttava EventEmitterin emit-metodia:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Korttipaikat/sisältöprojektio

Molemmissa kehyksissä voit helposti siirtää sisällön (yksittäisen ja useamman) vanhemmasta komponentista lapsikomponenttiin vain lisäämällä ylimääräistä html:ää lapsitunnisteiden sisälle, pienin eroin:

Vue:

`<`` 

Angular:

Oletusarvo:
    

Nimetty aukko:
<p yourname>
   Tämä on nimetty korttipaikka
  </p>
  <p>Tämä on oletusarvoinen korttipaikka</p>

Jos kuitenkin haluat renderöidä ehdollisesti joitakin sovelluksen osia, Vue on intuitiivisempi kuin Angular ja voit tehdä sen nopeammin lisäämällä v-if direktiiviin tag, jonka avulla voit renderöidä vain ne osat, joita juuri nyt tarvitaan.




  

Vaikka ng-content renderöidään aina, sinun täytyy käyttää tässä tapauksessa komentoa ng-templateja myöhemmin luoda oma mukautettu direktiivi:

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>
@Directive({
  selector: '[customDirectiveName]'
})
export class CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

ja koska nimi, jonka annat ng-template attribuutin avulla Angular tietää, mitä pitäisi renderöidä:

Lisäksi haluat komponentin sisällä projektoida mallin käytettäväksi komponentissa @ContentChild saadaksesi oikean mallin:

@ContentChild(CustomDirective) content!.: CustomDirective;

Palvelu vs. myymälä

Angular kannustaa sinua käyttämään MVC-suunnittelumallia, jossa voit käyttää palveluja mallissa. Tämän vuoksi sinun on opeteltava riippuvuusinjektiomalli, jotta voit käyttää tietoja sovelluksessasi vapaasti. Sen avulla voit erottaa sivuvaikutukset eli API-kutsut toisistaan ja käyttää samaa logiikkaa koko projektissa injektoimalla juuri sillä hetkellä tarvitsemasi osat, mikä tekee siitä myös modulaarisen lähestymistavan.

Angular sisältää myös Redux-malliin perustuvan Ngrx/store-kehyksen, jos haluat käyttää reaktiivisempaa lähestymistapaa RxJs-havainnoitavien avulla. Se sisältää Actions-toimintoja, joita käytetään komponenttien ja/tai palveluiden ainutlaatuisten tapahtumien lähettämiseen, Effects-toimintoja, jotka käsittelevät sivuvaikutuksia tai asynkronisia toimintoja, jotka haluat suorittaa, ja Reducers-toimintoja, jotka mutatoivat tilaasi.

Osoitteessa Vue, suosittu lähestymistapa on käyttää Vuex-kirjastoa tilanhallintaan, joka sisältää myös työkaluja, kuten Actions (toiminnot), Mutations (muunnokset) ja Getters (hakijat), aivan kuten Ngrx/store, jotka auttavat sinua hallitsemaan ja järjestämään sovelluksesi tilaa. Voit modulaarisoida sitä asettamalla näkymiäsi varten eri varastoja, esimerkiksi käyttäjä- tai ostoskorivaraston, mutta se voi johtaa nimien välisiin ongelmiin, ellet käytä apuna työkalua namespaced: true ominaisuutta myymäläilmoituksessasi.

Seuraavassa vertaillaan palvelupohjaista lähestymistapaa ja Vuex-lähestymistapaa, kun tehtävänä on hakea joitakin tietoja. tuote tietoja myymälääsi varten:

@Injectable() // koriste, joka osoittaa, että haluamme käyttää sitä DI:ssä myöhemmin.
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //tehdä tuotteille mitä haluat
    });
    return this.products;
  }
}

Sitten komponenttiin pistetään käytettävä palvelu:
constructor(private service: HeroService) { }

Osoitteessa Vue, lähetämme yksinkertaisesti toiminnon, joka tekee backend-kutsun puolestamme:

store.dispatch(getAllProducts)

ja actions.ts tiedostossa määrittelemme toiminnon:

toimet: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts(););); // noutaa tiedot ja laittaa tulokset varastoon.
}}

Tietojen hakeminen

Osoitteessa Vue, voit käyttää Axios/Fetchiä tai mitä tahansa kirjastoa, jota haluat käyttää, se on todella suoraviivaista - käsittelet vain asynkronisia kutsuja lupauksilla tai millä tahansa lähestymistavalla, joka sopii sinulle parhaiten.

try {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('do whatever is needed')))
} catch (e) {
    //handle error
}

Angular mukana tulee HttpClient-kirjasto, joka käyttää observableja, mikä johtaa toiseen etuun - käyttääksesi sitä kunnolla ja/tai käsitelläksesi dataa sinun on opittava RxJs. Jälleen kerran voi olla melko ylivoimaista päästä sujuvaksi ja tuntea itsensä tutuksi tämän abstraktin rakenteen kanssa heti alussa.

Voit käyttää Axiosia, jos haluat tehdä niin, mutta kuten Axiosin GitHub-sivulla sanotaan: "Axios on saanut vaikutteita $http-palvelusta, joka on tarjottu osoitteessa Angular'

private getAllItems(): void {
this.http
.get('https://url.to.fetch.data')

.pipe(
pluck('results'),
tap(console.log('tee mitä tahansa sivuvaikutusta haluat käyttää tässä')
catchError((error) => {
        //käsittele virhe
})
)
.subscribe((result: ResultType[])
    //lopputoiminto annetulle tulokselle
)
}

Yhteenveto

| Vue | Angular | Angular |
| ———– | ———– |
| Ei pakota noudattamaan kovin tiukkoja sääntöjä | Vaatii Typescriptin käyttöä, luokkapohjaisia komponentteja/palveluita |
| Tasainen oppimiskäyrä, helppo aloittaa | Korkea oppimiskäyrä (Typescript, RxJs, Dependency Injection) |
| Paljon konfiguroitavia asioita projektin asennuksen aikana| Ei paljon asetuksia etukäteen, mutta sen avulla voit luoda projektin rakenteen konsolin kautta |
| Yhteisölähtöinen kehys, joka perustuu sekä Angular:hen että React:hen | Googlen luoma ja ylläpitämä |
| Ei ole paljon mukana, täytyy asentaa ulkoisia kirjastoja| Tilanhallinta, HttpClient sisältyy kehykseen |

Lue lisää:

JavaScript on täysin kuollut. Joku kaveri internetissä

GraphQL/MongoDB API:n käyttöönotto Netlify-toimintojen avulla

Miten tappaa projekti huonoilla koodauskäytännöillä?

Aiheeseen liittyvät artikkelit

Ohjelmistokehitys

Tulevaisuuden web-sovellusten rakentaminen: The Codest:n asiantuntijatiimin näkemyksiä

Tutustu siihen, miten The Codest loistaa skaalautuvien, interaktiivisten verkkosovellusten luomisessa huipputeknologian avulla ja tarjoaa saumattomia käyttäjäkokemuksia kaikilla alustoilla. Lue, miten asiantuntemuksemme edistää digitaalista muutosta ja liiketoimintaa...

THECODEST
Ohjelmistokehitys

Top 10 Latviassa toimivaa ohjelmistokehitysyritystä

Tutustu Latvian parhaisiin ohjelmistokehitysyrityksiin ja niiden innovatiivisiin ratkaisuihin uusimmassa artikkelissamme. Tutustu siihen, miten nämä teknologiajohtajat voivat auttaa nostamaan liiketoimintaasi.

thecodest
Yritys- ja skaalausratkaisut

Java-ohjelmistokehityksen perusteet: A Guide to Outsourcing Successfully

Tutustu tähän keskeiseen oppaaseen Java-ohjelmistokehityksen onnistuneesta ulkoistamisesta tehokkuuden parantamiseksi, asiantuntemuksen saamiseksi ja projektin onnistumiseksi The Codestin avulla.

thecodest
Ohjelmistokehitys

Perimmäinen opas ulkoistamiseen Puolassa

Ulkoistamisen lisääntyminen Puolassa johtuu taloudellisesta, koulutuksellisesta ja teknologisesta kehityksestä, joka edistää tietotekniikan kasvua ja yritysystävällistä ilmapiiriä.

TheCodest
Yritys- ja skaalausratkaisut

Täydellinen opas IT-tarkastustyökaluihin ja -tekniikoihin

Tietotekniikan tarkastuksilla varmistetaan turvalliset, tehokkaat ja vaatimustenmukaiset järjestelmät. Lue lisää niiden merkityksestä lukemalla koko artikkeli.

Codest
Jakub Jakubowicz teknologiajohtaja ja toinen perustaja

Tilaa tietopankkimme ja pysy ajan tasalla IT-alan asiantuntemuksesta.

    Tietoa meistä

    The Codest - Kansainvälinen ohjelmistokehitysyritys, jolla on teknologiakeskuksia Puolassa.

    Yhdistynyt kuningaskunta - pääkonttori

    • Toimisto 303B, 182-184 High Street North E6 2JA
      Lontoo, Englanti

    Puola - Paikalliset teknologiakeskukset

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Krakova
    • Brain Embassy, Konstruktorska
      11, 02-673 Varsova, Puola

      Codest

    • Etusivu
    • Tietoa meistä
    • Palvelut
    • Tapaustutkimukset
    • Tiedä miten
    • Työurat
    • Sanakirja

      Palvelut

    • Se neuvoa-antava
    • Ohjelmistokehitys
    • Backend-kehitys
    • Frontend-kehitys
    • Staff Augmentation
    • Backend-kehittäjät
    • Pilvi-insinöörit
    • Tietoinsinöörit
    • Muut
    • QA insinöörit

      Resurssit

    • Faktoja ja myyttejä yhteistyöstä ulkoisen ohjelmistokehityskumppanin kanssa
    • Yhdysvalloista Eurooppaan: Miksi amerikkalaiset startup-yritykset päättävät muuttaa Eurooppaan?
    • Tech Offshore -kehityskeskusten vertailu: Tech Offshore Eurooppa (Puola), ASEAN (Filippiinit), Euraasia (Turkki).
    • Mitkä ovat teknologiajohtajien ja tietohallintojohtajien tärkeimmät haasteet?
    • Codest
    • Codest
    • Codest
    • Privacy policy
    • Verkkosivuston käyttöehdot

    Tekijänoikeus © 2025 by The Codest. Kaikki oikeudet pidätetään.

    fiFinnish
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek fiFinnish