Cosa è esattamente angolare?

Angular è un framework front-end open source JavaScript e crea reattive Single Page Applications (SPA) ed è stato realizzato dagli sviluppatori di Google. Angular ha attestato un controllo diffuso nei framework JavaScript open source ed è molto apprezzato tra sviluppatori e aziende per le sue eccellenti tecniche di funzionamento. Angolare un framework MVW innovativo lato client è attualmente molto utilizzato per lo sviluppo di app mobili e web app. È stato scritto in dattiloscritto con supporto ES6 (ECMA Script 2015) standardizzazione. Dattiloscritto sviluppato da Microsoft ed è un superset di JavaScript. In questo modo il codice verrà convertito e convertito in formato JavaScript o ES5. Typescript è fortemente tipizzato ed è consentito scrivere funzioni OOPS come istruzioni di classe, interfaccia e modulo proprio come C # o Java che aumentano l'esecuzione e riducono gli errori di runtime.

Di seguito sono riportate le principali funzionalità di Angular 2

  • Componenti -

la versione precedente di Angular aveva attirato l'attenzione dei controller, ma ora ha completamente cambiato l'attenzione nel lavorare con i componenti rispetto ai controller. I componenti aiutano a creare le applicazioni in diversi moduli. Questo aiuta a gestire in modo più efficace l'applicazione in un periodo di tempo.

  • Modulo -

il modulo è abbastanza identico a una classe. Un modulo è generalmente descritto da un blocco di codice che viene utilizzato per eseguire una determinata singola attività. Angular ha la capacità di modularità, in cui viene creata una sola applicazione separandola in più moduli. La parola chiave export viene utilizzata per esportare la classe di componenti da un modulo. Ogni applicazione angolare ha almeno un modulo angolare per convenzione chiamato modulo app.

Per esempio

  • Modello -

Il modello è il ruolo chiave che giustifica l'esplorazione del componente. Potrebbe essere dichiarato che la vista del componente viene identificata mediante un modello. È creato con HTML, include associazione e direttiva.

Per esempio

  • Metadati -

È di grande aiuto estendere l'efficienza della classe. In Typescript, a questo scopo è identificato dalla classe di decorazione. Ad esempio, per specificare qualsiasi componente nell'applicazione Angolare, utilizzare i metadati della classe (es. Decoratore @Component).

Un decoratore è una funzione che inserisce metadati in una classe, sono membri o sono argomenti di metodo.

  • Associazione dati -

La funzionalità più efficace, Data Binding, è il bridge di collegamento tra Model e View. Si sincronizza automaticamente. Angular supporta quattro tipi di rilegatura: rilegatura proprietà, rilegatura evento, interpolazione e rilegatura bidirezionale.

  • Direttiva -

Le direttive sono attributi HTML personalizzati che aiutano a mantenere la capacità dell'HTML. Per creare una direttiva, il decoratore @Directive viene utilizzato sui metadati della classe collegati. Tre tipi di direttive: Componente, Decoratore e Modello.

  • Servizi -

I servizi vengono utilizzati ogni volta che è richiesta una singola produttività normalmente in diversi moduli dell'applicazione. Fondamentalmente, viene utilizzato per condividere i dati e il comportamento all'interno dell'applicazione. Il servizio non ha una classe base. Spesso i servizi utilizzati sono il servizio di registrazione, il servizio dati, il servizio massaggi, ecc.

  • Iniezione di dipendenza -

Iniezione delle dipendenze in angolare. Dependency Injection (DI) è un concetto di base di Angular 2+ e consente a una classe di raccogliere dipendenze da un'altra classe. Solitamente in Angolare, l'iniezione di dipendenza viene eseguita iniettando una classe di servizio in una sezione o classe del modulo.

Per esempio

Esistono molti editor di testo che supporta completamente Typescript. O fuori dalla scatola o con un plugin, compresi tutti questi come di seguito.

  1. Visual Studio.
  2. Codice di Visual Studio.
  3. Atomo.
  4. Eclisse.
  5. WebStorm.

Visual Studio Code è la scelta migliore perché è open source e funziona su Linux, Windows e MacOS. Fornisce ottime funzionalità che supportano Typescript, incluso

  • Completamento automatico
  • IntelliSense
  • Verifica della sintassi
  • refactoring

Per scaricare il codice di Visual Studio, visitare il sito Web all'indirizzo https://code.visualstudio.com/download.

Passaggi per installare Angular 2

Ora, Introduzione al processo di installazione di Angular 2

Passaggio 1: per installare Angular 2, scaricare innanzitutto il pacchetto node.js dal sito https://nodejs.org/en/download/.

Installa il repository npm (Node Package Manager) scaricato nel tuo sistema.

  • Se si utilizza il sistema Windows, installare il programma di installazione di Windows.
  • Se si utilizza il sistema MacOS, installare il programma di installazione di MacOS.

Controlla le versioni compatibili del tuo sistema come 32 bit o 64 bit.

Passaggio 2: installazione del nodo,

Ora , fai doppio clic sul file scaricato node-v10 15.3-x64.msi per eseguire il programma di installazione e fai clic sul pulsante Avanti nella schermata di installazione.

Passaggio 3: Ora, fai clic sulla casella selezionata e accetta i termini nel Contratto di licenza . Quindi fare clic sul pulsante Avanti.

Passaggio 4: nella schermata successiva, modificare il percorso di installazione se necessario o fare clic sul pulsante Avanti.

Passaggio 5: nella schermata Selezione funzionalità successiva, mantieni la selezione predefinita e fai clic sul pulsante Avanti.

Passaggio 6: ora, per installare Node.js Fare clic sul pulsante Installa.

Passaggio 7: nella schermata successiva, attendere il completamento dell'installazione.

Passaggio 8: ora, fai clic sul pulsante Fine.

Passaggio 9: Apri il prompt dei comandi sul tuo computer e digita il comando seguente e verifica la versione di nodejs e npm:

c:/>node -v

c:/>npm -v.

Passaggio 10: al termine dell'installazione. Visitare il sito all'indirizzo https://cli.angular.io/ per Angular CLI (Command Line Interface).

Passaggio 11: Apri il prompt dei comandi sul tuo computer e digita il comando "npm install –g @ angular / cli" e premi Invio per installare Angular 2 CLI (Command Line Interface).

Nota: se usi MacOS / Linux metti sudo prima di npm, "sudo npm install –g @ angular / cli"

Passaggio 12: digitare "ng nuova prima app" e premere invio per creare la prima app.

Passaggio 13: quando installi l'app Angular 2 ti verranno poste alcune domande dalla CLI Angular.

  • Desideri aggiungere il routing angolare? (S / No) -> No
  • Quale foglio di stile standard vuole usare? (Usa i tasti freccia) -> CSS

Passaggio 14: nella prima app aggiungere tutti i pacchetti utilizzando l'interfaccia della riga di comando angolare

Una volta installati tutti i pacchetti significa che l'app viene creata sul disco.

Step 15: Digita il comando "ng –version" nel prompt dei comandi e premi invio per scoprire la versione angolare

Passo 16: Ora, digita il comando "cd first-app" per accedere alla directory o alla cartella dell'app.

Step 17: Infine, viene creata l'app angolare “First App”; ora digita il comando "ng serve".

Passo 18: Ora, apri il browser e digita http: // localhost: 4200 nella barra degli indirizzi e premi invio per eseguire la prima applicazione angolare dell'applicazione nel browser.

Articoli consigliati

Questa è stata una guida su Installa Angular 2. Qui abbiamo discusso le principali caratteristiche di Angular 2 e i passaggi per installare Angular 2. Puoi anche leggere i seguenti articoli per saperne di più -

  1. Angolare 2 cheat sheet
  2. Angular 2 Interview Questions
  3. Angular 2 vs Vue JS
  4. Comandi angolari

Categoria:

Sviluppo software