window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', versjon: 2, } ;(function () { var w = vindu if (w.LeadBooster) { console.warn('LeadBooster finnes allerede') } 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 }) }, } } })() Sammenligningen av mesterne: Angular vs Vue - The Codest
The Codest
  • Om oss
  • Tjenester
    • Programvareutvikling
      • Frontend-utvikling
      • Backend-utvikling
    • Staff Augmentation
      • Frontend-utviklere
      • Backend-utviklere
      • Dataingeniører
      • Ingeniører i skyen
      • QA-ingeniører
      • Annet
    • Det rådgivende
      • Revisjon og rådgivning
  • Industrier
    • Fintech og bankvirksomhet
    • E-commerce
    • Adtech
    • Helseteknologi
    • Produksjon
    • Logistikk
    • Bilindustrien
    • IOT
  • Verdi for
    • ADMINISTRERENDE DIREKTØR
    • CTO
    • Leveransesjef
  • Vårt team
  • Casestudier
  • Vet hvordan
    • Blogg
    • Møter
    • Webinarer
    • Ressurser
Karriere Ta kontakt med oss
  • Om oss
  • Tjenester
    • Programvareutvikling
      • Frontend-utvikling
      • Backend-utvikling
    • Staff Augmentation
      • Frontend-utviklere
      • Backend-utviklere
      • Dataingeniører
      • Ingeniører i skyen
      • QA-ingeniører
      • Annet
    • Det rådgivende
      • Revisjon og rådgivning
  • Verdi for
    • ADMINISTRERENDE DIREKTØR
    • CTO
    • Leveransesjef
  • Vårt team
  • Casestudier
  • Vet hvordan
    • Blogg
    • Møter
    • Webinarer
    • Ressurser
Karriere Ta kontakt med oss
Pil tilbake GÅ TILBAKE
2021-12-22
Programvareutvikling

Sammenligningen av The Champions: Angular vs Vue

Oliwia Oremek

For tiden er det noen få frontend-rammeverk som brukes ofte og stadig utvikles av skaperne, hver litt annerledes enn den andre. Og likevel kan de ha noe til felles. Her er en sammenligning basert på utviklingsprosessen - Googles Angular vs. åpen kildekode Vue.js:

Sette opp et prosjekt

Den raskeste måten å starte en prosjekt er ved å bruke CLI levert av rammeverkenes forfattere. Begge kommer med ganske god service; det er imidlertid noen få forskjeller, f.eks, Vue kommer med flere alternativer, og du kan derfor skreddersy et prosjekt etter dine behov helt fra starten av. Du kan velge Vue-versjon, enten du trenger å bruke ruting. Typescript, CSS-preprosessorer eller sette opp en linter rett i forkant. Du kan også bestemme om du vil sette opp tester (unit eller E2E).

Vue CLI

Angular leveres med en generator som lar deg opprette komponenter, tjenester, grensesnitt og direktiver direkte fra konsollen, noe som etter min erfaring er veldig praktisk, ettersom det ikke er behov for å manuelt sette opp mapper, filer og overflødige kode for hånd, spesielt når du bruker f.eks. MVC-mønsteret. Typescript kommer ut av esken med Angular og presser deg til å bruke det. Hvis du ikke har gjort det ennå, kan du ta en titt på denne praktiske introduksjonen til hvorfor du bør prøve det ut her.

I begynnelsen, Angulars CLI spør deg kun om ruting eller foretrukne CSS-preprosessorer, noe som, sammenlignet med Vuegir deg ikke mye rom for å bestemme strukturen og stilen på applikasjonen din. Men hvis du skal følge konvensjonen den ber deg om å bruke, kommer CLI til å lede deg hele veien.

Angular CLI

Prosjektstruktur

Vue bruker SFC (Single File Components), noe som gjør det ganske enkelt for en ny utvikler å begynne å bruke et rammeverk og finne seg til rette i koden.

Direktiver

Vue leveres også med direktiver som `v-if, v-for`, som er veldig intuitivt å bruke, siden det nesten er en kopi av Angular de. Vue bruker samme konvensjon for toveis databinding (bare ved å sette v- i `v-model` foran) og legge til @/v-on for å indikere at vi reagerer på noe. Angular skiller dette ved å indikere hvilken vei vi går ved å bruke parenteser for hendelsesbinding og hakeparenteser for egenskapsbinding, f.eks.

I Vueer selve strukturen enkel, det er ikke nødvendig å lage separate filer for stilark og logikk, så alt er organisert og oversiktlig. Selvfølgelig, selvfølgelig, Vue leveres med en stilguide der du kan finne anbefalte regler du bør følge når du oppretter et prosjekt, men det er bare noen få som er obligatoriske. 

Hendelser

I dette tilfellet, Vue kommer igjen med en mer praktisk løsning; for å sende en hendelse fra den underordnede komponenten til den overordnede er alt du trenger å gjøre (ved hjelp av Vue 3 Sammensetning API ) tar en metode fra kontekstobjektet i oppsettet og sender ganske enkelt ut det du trenger for øyeblikket:

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

Du kan også gjøre det direkte i malen som en respons på en annen hendelse.

I Angularmå du først definere en EventEmitter på følgende måte:

@Output() customNameForYourEmitter = new EventEmitter();

Deretter må du kalle en emit-metode på EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Spilleautomater/innholdsprojeksjon

I begge rammeverkene kan du enkelt flytte innhold (enkelt eller flere) fra den overordnede komponenten til den underordnede komponenten ved å legge til ekstra html i de underordnede taggene, men med små forskjeller:

Vue:

``` 

Angular:

Standard:
    

Navngitt spor:
<p yourname>
   Dette er et navngitt spor
  </p>
  <p>Dette er et standardspor</p>

Men hvis du ønsker å gjengi enkelte deler av applikasjonen din på betingede vilkår, Vue er mer intuitivt enn Angular og lar deg gjøre det raskere ved å legge til v-if direktivet til din taggen, slik at du bare kan gjengi de delene som er nødvendige for øyeblikket.

 </template
 </template

   </template

Mens ng-innhold alltid blir gjengitt, må du i dette tilfellet bruke ng-malog senere lage ditt eget egendefinerte direktiv:

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

og på grunn av navnet du gir til din ng-mal attributtet, vil Angular vite hva som skal gjengis:

 <!

I komponenten vil du også projisere malen som skal brukes i @ContentChild for å få riktig mal:

@ContentChild(CustomDirective) content!: CustomDirective;

Service vs butikk

Angular oppfordrer deg til å bruke MVC-designmønsteret, der du kan bruke tjenester for modellen. Derfor må du lære deg avhengighetsinjeksjonsmønsteret for å kunne operere data fritt i applikasjonen din. Det lar deg skille ut sideeffekter av API-kall og bruke den samme logikken i hele prosjektet ved å injisere de delene du trenger for øyeblikket, noe som også gjør det til en modulær tilnærming.

Angular leveres også med Ngrx/store-rammeverket basert på Redux-mønsteret, i tilfelle du ønsker å bruke en mer reaktiv tilnærming med RxJs-observabler. RxJ leveres med Actions som brukes til å sende unike hendelser fra komponenter og/eller tjenester, Effects som håndterer sideeffekter eller asynkrone handlinger du ønsker å utføre, og Reducers som muterer tilstanden din.

I VueDen populære tilnærmingen er å bruke Vuex-biblioteket for tilstandshåndtering, som også kommer med verktøy som Actions, Mutations og Getters, akkurat som Ngrx/store, for å hjelpe deg med å administrere og organisere tilstanden til applikasjonen din. Du kan modularisere det ved å angi forskjellige butikker for visningene dine, f.eks. en brukerbutikk eller en handlekurvbutikk, men det kan føre til problemer med navneavstand, med mindre du bruker namespaced: true egenskapen i butikkdeklarasjonen din.

Her er en sammenligning av den tjenestebaserte tilnærmingen og Vuex når oppgaven er å hente noen produkt data for butikken din:

@Injectable() // dekorator for å indikere at vi ønsker å bruke den i DI senere
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      // gjør hva du vil med produktene dine
    });
    returnere this.products;
  }
}

Deretter injiserer vi tjenesten som skal brukes, i komponenten:
constructor(private service: HeroService) { }

I Vuesender vi ganske enkelt en handling som gjør et backend-anrop for oss:

store.dispatch(getAllProducts)

og i actions.ts filen definerer vi en handling:

handlinger: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // hent data og legg resultatene i butikken
}}

Henter data

Med Vuekan du bruke Axios/Fetch eller hvilket bibliotek du vil, det er veldig enkelt - du håndterer bare asynkrone kall med promises eller den tilnærmingen som passer deg best.

prøv {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('gjør det som trengs'))
} catch (e) {
    //håndter feil
}

Angular kommer med HttpClient-biblioteket som bruker observables, noe som fører deg til en annen fordel - for å bruke det riktig og/eller manipulere data, må du lære deg RxJs. Igjen, det kan være ganske overveldende å bli fortrolig med denne abstrakte konstruksjonen helt i begynnelsen.

Du kan bruke Axios hvis det er det du ønsker å gjøre, men som det står på Axios GitHub-side: "Axios er sterkt inspirert av $http-tjenesten som tilbys i Angular'

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

.pipe(
plukk('resultater'),
tap(console.log('gjør hvilken som helst sideeffekt du vil bruke her')
catchError((feil) => {
        //håndter feil
})
)
.subscribe((resultat: ResultType[])
    //sluttoperasjon på gitt output
)
}

Oppsummering

Vue | Angular | Angular | Angular
| ———– | ———– |
| Krever ikke at du følger veldig strenge regler | Krever bruk av Typescript, klassebaserte komponenter/tjenester | Forutsetter
| Flat læringskurve, lett å komme i gang med | Høy læringskurve (Typescript, RxJs, Dependency Injection) | Høy læringskurve (Typescript, RxJs, Dependency Injection)
| Mye å konfigurere under prosjektoppsettet Ikke mye å sette opp på forhånd, men det lar deg generere prosjektstruktur via konsollen
| Fellesskapsdrevet rammeverk basert på både Angular og React | Opprettet og vedlikeholdt av Google
| Ikke mye er inkludert, du må installere eksterne biblioteker. State management, HttpClient er inkludert i rammeverket.

Les mer om dette:

JavaScript er helt død. En fyr på Internett

Distribuere GraphQL/MongoDB API ved hjelp av Netlify-funksjoner

Slik dreper du et prosjekt med dårlig kodingspraksis

Relaterte artikler

Programvareutvikling

Bygg fremtidssikre webapper: Innsikt fra The Codests ekspertteam

Oppdag hvordan The Codest utmerker seg når det gjelder å skape skalerbare, interaktive webapplikasjoner med banebrytende teknologi som gir sømløse brukeropplevelser på tvers av alle plattformer. Finn ut hvordan ekspertisen vår driver digital transformasjon og...

THECODEST
Programvareutvikling

Topp 10 Latvia-baserte programvareutviklingsselskaper

I vår nyeste artikkel kan du lese mer om Latvias beste programvareutviklingsselskaper og deres innovative løsninger. Oppdag hvordan disse teknologilederne kan bidra til å løfte virksomheten din.

thecodest
Løsninger for bedrifter og oppskalering

Grunnleggende om Java-programvareutvikling: En guide til vellykket outsourcing

Utforsk denne viktige veiledningen om vellykket outsourcing av Java-programvareutvikling for å øke effektiviteten, få tilgang til ekspertise og drive frem prosjektsuksess med The Codest.

thecodest
Programvareutvikling

Den ultimate guiden til outsourcing i Polen

Den kraftige økningen i outsourcing i Polen er drevet av økonomiske, utdanningsmessige og teknologiske fremskritt, noe som fremmer IT-vekst og et forretningsvennlig klima.

TheCodest
Løsninger for bedrifter og oppskalering

Den komplette guiden til verktøy og teknikker for IT-revisjon

IT-revisjoner sørger for sikre, effektive og kompatible systemer. Les hele artikkelen for å lære mer om viktigheten av dem.

The Codest
Jakub Jakubowicz CTO og medgrunnlegger

Abonner på vår kunnskapsbase og hold deg oppdatert på ekspertisen fra IT-sektoren.

    Om oss

    The Codest - Internasjonalt programvareutviklingsselskap med teknologisentre i Polen.

    Storbritannia - Hovedkvarter

    • Kontor 303B, 182-184 High Street North E6 2JA
      London, England

    Polen - Lokale teknologisentre

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Kraków
    • Brain Embassy, Konstruktorska
      11, 02-673 Warszawa, Polen

      The Codest

    • Hjem
    • Om oss
    • Tjenester
    • Casestudier
    • Vet hvordan
    • Karriere
    • Ordbok

      Tjenester

    • Det rådgivende
    • Programvareutvikling
    • Backend-utvikling
    • Frontend-utvikling
    • Staff Augmentation
    • Backend-utviklere
    • Ingeniører i skyen
    • Dataingeniører
    • Annet
    • QA-ingeniører

      Ressurser

    • Fakta og myter om samarbeid med en ekstern programvareutviklingspartner
    • Fra USA til Europa: Hvorfor velger amerikanske oppstartsbedrifter å flytte til Europa?
    • Sammenligning av Tech Offshore Development Hubs: Tech Offshore Europa (Polen), ASEAN (Filippinene), Eurasia (Tyrkia)
    • Hva er de største utfordringene for CTO-er og CIO-er?
    • The Codest
    • The Codest
    • The Codest
    • Retningslinjer for personver
    • Vilkår for bruk av nettstedet

    Opphavsrett © 2025 av The Codest. Alle rettigheter forbeholdt.

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