Wat is precies hoekig?

Angular is een JavaScript open-source front-end framework en maakt reactieve Single Page Applications (SPA's) en werd gebouwd door de ontwikkelaars van Google. Angular heeft wijdverspreide controle in Open Source JavaScript Frameworks bevestigd en het wordt opmerkelijk hoog gewaardeerd tussen ontwikkelaars en ondernemingen vanwege de geweldige werkingstechnieken. Angular een innovatief MVW-framework aan de clientzijde wordt momenteel zeer gebruikt voor de ontwikkeling van mobiele apps en web-apps. Het is geschreven in Typescript met ondersteuning van standaardisatie ES6 (ECMA Script 2015). Typescript ontwikkeld door Microsoft en het is een superset van JavaScript. Dit transpireert de code en converteert in JavaScript- of ES5-formaat. Het typoscript is een sterk getypeerd en het is toegestaan ​​om OOPS-functies zoals klasse-, interface- en module-instructies te schrijven, net als C # of Java, die de uitvoering verbeteren en de runtime-fouten verminderen.

Hieronder volgen de belangrijkste kenmerken van Angular 2

  • Componenten -

de vorige versie van Angular had de aandacht van controllers, maar veranderde nu volledig de focus in het werken met componenten boven de controllers. Componenten helpen de applicaties in verschillende modules te maken. Dit helpt bij het effectiever beheren van de applicatie in een bepaalde periode.

  • Module -

de module is vrij identiek aan een klasse. Een module wordt in het algemeen beschreven door een codeblok dat wordt gebruikt om een ​​bepaalde enkele taak uit te voeren. Angular heeft het vermogen van modulariteit, waarbij slechts één applicatie wordt gebouwd door deze in verschillende modules te scheiden. Export sleutelwoord wordt gebruikt om componentklasse vanuit een module te exporteren. Elke Angular-applicatie heeft volgens afspraak ten minste één Angular-module, app-module genaamd.

Bijvoorbeeld

  • Sjabloon -

De sjabloon is de sleutelrol die het bladeren door de component rechtvaardigt. Het zou kunnen worden verklaard dat de weergave van de component wordt geïdentificeerd met behulp van een sjabloon. Het is gemaakt met HTML, inclusief bindend en directief.

Bijvoorbeeld

  • Metadata -

Het is vooral nuttig om de efficiëntie van de klas uit te breiden. In Typescript wordt voor dit doel geïdentificeerd door klasse te versieren. Als u bijvoorbeeld een component in de toepassing Angular wilt opgeven, gebruikt u metagegevens van de klasse (d.w.z. @Component decorator).

Een decorateur is een functie die metadata aan een klasse toevoegt, het zijn leden of het zijn methodeargumenten.

  • Dataverbinding -

De meest effectieve functie, Data Binding, is de verbindingsbrug tussen Model en View. Het maakt automatisch gesynchroniseerd. Angular ondersteunt vier soorten binding - eigenschapbinding, gebeurtenisbinding, interpolatie en tweewegbinding.

  • Richtlijn -

Richtlijnen zijn op maat gemaakte HTML-attributen die nuttig zijn om de mogelijkheden van HTML te behouden. Om een ​​richtlijn te maken, wordt de decorateur @Directive gebruikt op verbonden metadata van de klasse. Drie soorten richtlijnen - component, decorateur en sjabloon.

  • Diensten -

Services worden gebruikt wanneer een enkele productiviteit normaal vereist is in verschillende modules van de applicatie. Fundamenteel wordt het gebruikt om de gegevens en het gedrag binnen de applicatie te delen. De service heeft geen basisklasse. Vaak gebruikte services zijn logging service, data service, massage service, etc.

  • Afhankelijkheid injectie -

Afhankelijkheid Injectie in hoekig. Dependency Injection (DI) is een basisconcept van Angular 2+ en stelt een klasse in staat afhankelijkheden van een andere klasse te verzamelen. Gewoonlijk wordt in Angular afhankelijkheidsinjectie uitgevoerd door een serviceklasse in een sectie- of moduleklasse te injecteren.

Bijvoorbeeld

Er zijn veel teksteditor die Typescript volledig ondersteunt. Hetzij uit de doos of met een plug-in, inclusief al deze zoals hieronder.

  1. Visuele studio.
  2. Visual Studio Code.
  3. Atoom.
  4. Verduistering.
  5. WebStorm.

Visual Studio Code is de beste keuze omdat het open source is en op Linux, Windows en MacOS draait. Het biedt geweldige functies die Typescript ondersteunen, waaronder

  • Auto-voltooiing
  • IntelliSense
  • Syntaxiscontrole
  • refactoring

Om Visual Studio-code te downloaden, bezoekt u de website op https://code.visualstudio.com/download.

Stappen om hoekig te installeren 2

Nu aan de slag met het proces om Angular 2 te installeren

Stap 1: Om Angular 2 te installeren, downloadt u eerst het pakket node.js van de https://nodejs.org/en/download/ site.

Installeer de gedownloade npm (Node Package Manager) repository in uw systeem.

  • Als u Windows-systeem gebruikt, installeert u het Windows-installatieprogramma.
  • Als u MacOS-systeem gebruikt, installeert u het MacOS-installatieprogramma.

Controleer uw systeem compatibele versies zoals 32 bit of 64 bit.

Stap 2: knooppunt installeren,

Dubbelklik nu op het gedownloade node-v10 15.3-x64.msi-bestand om het installatieprogramma uit te voeren en klik op de knop Volgende op het installatiescherm.

Stap 3: Klik nu op het selectievakje en accepteer de voorwaarden in de licentieovereenkomst . Klik vervolgens op de knop Volgende.

Stap 4: Wijzig op het volgende scherm indien nodig het installatiepad of klik op de knop Volgende.

Stap 5: Houd in het scherm Volgende functieselectie de standaardselectie behouden en klik op de knop Volgende.

Stap 6: Nu Node.js installeren Klik op de knop Installeren.

Stap 7: Wacht op het volgende scherm tot de installatie is voltooid.

Stap 8: Klik nu op de knop Voltooien.

Stap 9: Open de opdrachtprompt op uw machine en typ de volgende opdracht en controleer de nodejs-versie en de npm-versie:

c:/>node -v

c:/>npm -v.

Stap 10: Zodra de installatie is voltooid. Bezoek de site op https://cli.angular.io/ voor Angular CLI (Command Line Interface).

Stap 11: Open de opdrachtprompt op uw machine en typ de opdracht "npm install –g @ angular / cli" en druk op Enter om Angular 2 CLI (opdrachtregelinterface) te installeren.

Opmerking: als je MacOS / Linux gebruikt, plaats je sudo voor de npm, "sudo npm install –g @ angular / cli"

Stap 12: Typ "ng new first-app" en druk op enter om de First App te maken.

Stap 13: Wanneer u de Angular 2-app installeert, worden u enkele vragen gesteld door Angular CLI.

  • Wilt u hoekroutering toevoegen? (J / Nee) -> Nee
  • Welke style sheet standaard wil gebruiken? (Gebruik de pijltoetsen) -> CSS

Stap 14: Voeg in First App alle pakketten toe met Angular CLI

Nadat u alle pakketten hebt geïnstalleerd, betekent dit dat de app op de schijf is gemaakt.

Stap 15: Typ de opdracht "ng –version" in de opdrachtprompt en druk op enter om de hoekversie te achterhalen

Stap 16: Typ nu het commando "cd first-app" om naar de app-map of map te gaan.

Stap 17: Eindelijk wordt de hoekapp 'First App' gemaakt; typ nu het commando "ng serve".

Stap 18: Open nu de browser en typ http: // localhost: 4200 in de adresbalk en druk op enter om de app First Application Angular in de browser uit te voeren.

Aanbevolen artikelen

Dit is een gids geweest over Install Angular 2. Hier hebben we de belangrijkste functies van Angular 2 en de stappen voor het installeren van Angular 2 besproken. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. Cheatsheet hoekig 2
  2. Vragen tijdens solliciteren bij Angular 2
  3. Hoek 2 tegen Vue JS
  4. Hoekige opdrachten

Categorie:

Software ontwikkeling