Introduzione all'applicazione JS angolare

Angular JS è un'applicazione open source. È stato scritto in JavaScript. Angular JS è stato sviluppato nel 2010 da Google. L'applicazione JS angolare fornisce un riferimento dinamico anche alle applicazioni e alle pagine Web. Angular JS ti consente di estendere il vocabolario HTML per la tua applicazione. JS angolare viene utilizzato perché l'HTML vacilla quando viene tentato di utilizzarlo per dichiarare le visualizzazioni dinamiche nelle applicazioni Web. Angular JS è indicato come il set di strumenti per la creazione del Framework più adatto allo sviluppo dell'applicazione.

Le funzioni del framework JS angolare possono essere modificate o sostituite, riutilizzate per adattarsi maggiormente o in modo univoco al flusso di lavoro e per riferimento futuro. È completamente estensibile e funziona anche con altre librerie. Il codice dell'applicazione AngularJS è semplice nei vecchi oggetti javascript. Rende il codice da testare, mantenere, riutilizzare. In JS angolare, non è necessario ereditare da tipi proprietari al fine di avvolgere i modelli in metodi di accesso come dobbiamo fare in altri. Angular JS ha seguito gli ultimi concetti per lo sviluppo.

Concetti dell'applicazione angolare JS

I concetti dell'applicazione Angular JS con i loro esempi sono i seguenti:

  • Direttive per estendere gli attributi HTML

La direttiva sulle caratteristiche è unica e disponibile in altri framework. Le direttive sono scritte facilmente e possono essere anche generiche in quanto possono essere scritte una volta e riutilizzate più volte. Le direttive sono davvero utili e ci sono molte ragioni per usarle come quando hai esigenze particolari come la griglia personalizzata o altre funzionalità, la direttiva che desideri davvero non esiste ancora. La direttiva sull'applicazione JS angolare inizia con 'ng-' come ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src, ecc.

Esempio:

Ciclo continuo con ng-repeat:

    (( X ))

  • Scopo

Viene utilizzato per la comunicazione tra controller e vista. Associa una vista al modello di vista e alle funzioni definite nell'applicazione JS angolare del controller supporta ambiti nidificati o gerarchici. È un'origine dati per Angular JS Application e può aggiungere o rimuovere proprietà quando richiesto. Tutta la manipolazione e l'assegnazione dei dati avviene attraverso l'oggetto scope quando eseguire un'operazione CRUD.

  • Controller

Questi sono usati per definire l'ambito per le viste e l'ambito può essere considerato come variabili e funzioni che la vista può usare un po 'di associazione.

Esempio:




First Name:

Last Name:


Full Name: ((firstName + " " + lastName))

var app = angular.module('myApp', ());
app.controller('myCtrl', function ($scope) (
$scope.firstName = "James";
$scope.lastName = "Anderson";
));

  • Associazione dati

Sincronizza i dati tra il modello e la vista. Significa che la modifica nel modello aggiornerà la vista. La direttiva ng-model viene utilizzata per l'associazione dati bidirezionale.

Esempio:
Quando l'utente digita nella casella di testo il valore modificato viene visualizzato in maiuscolo e minuscolo in un'etichetta che è un'associazione di dati bidirezionale.

  • Servizi

Viene utilizzato quando lo stato è stato condiviso nell'applicazione e necessita di una soluzione per l'archiviazione dei dati. Può essere un singleton e può essere utilizzato da altri componenti come direttive, controller e altri servizi. I servizi utilizzati sono $ http, $ location, $ log, $ route, $ filter, $ document, $ timeout, $ exceptionHandler.

  • Routing

Aiuta a dividere l'app in più viste e associare più viste ai controller. Divide la SPA in più viste per dividere logicamente l'app e renderla più gestibile.

Esempio: percorso predefinito

App.config(('$routeProvider',
function($routeProvider)
(
$routeProvider.
when('/List',
(
templateUrl: 'Views/list.html',
controller: 'ListController'
)).
when('/Add',
(
templateUrl: 'Views/add.html',
controller: 'AddController'
).
otherwise((
redirectTo: '/List'
));
)));

  • filtri

Vengono utilizzati per estendere il comportamento dell'espressione e della direttiva vincolanti. Consente la formattazione dei dati e la formattazione dei valori o l'applicazione di determinate condizioni. I filtri vengono richiamati in HTML con la pipe all'interno delle espressioni.

Esempio:

< html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

 html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

Filtro di input:

    (((x.name | maiuscolo) + ', ' + x.age + ', ' + x.city))

  • espressioni

Le espressioni (()) sono il modo dichiarativo di specificare la posizione di associazione dei dati in HTML e di utilizzare un'espressione per l'associazione dei dati. Può essere aggiunto nei modelli HTML e non supporta le istruzioni del flusso di controllo ma supporta i filtri per formattare i dati prima di visualizzarli.

Esempio:

Inserisci qualcosa nella casella di input:

Nome:

Hai scritto: ((firstName))

  • moduli

    Il modulo è il contenitore di un'applicazione e i controller dell'applicazione appartengono al modulo. È una raccolta di funzioni e divide l'applicazione nel componente funzionale piccolo e riutilizzabile. Un modulo può essere identificato con un nome univoco e può dipendere da altri moduli.

Esempio:



//Referring module name myApp
(( firstName + " " + lastName ))


  • analisi

Per testare il codice dell'applicazione JS angolare, i framework di test sono ampiamente utilizzati come Jasmine e karma. Questi framework di test supportano principalmente derisione e altamente configurabili utilizzando un file JSON con l'aiuto di vari plug-in Angular JS Application.

Conclusione - Applicazione angolare JS

Angular JS fornisce il framework che ha direttive uniche e potenti funzionalità. Le direttive ci aiutano a costruire la nuova sintassi HTML, che è principalmente specifica per un'applicazione. Viene utilizzato come componenti riutilizzabili. Il componente consente di nascondere la struttura complessa e altri comportamenti. L'attenzione si concentrerebbe solo su ciò che l'applicazione fa e su come l'applicazione appare separatamente. Al giorno d'oggi l'applicazione JS angolare sta diventando popolare poiché è facile da imparare e sviluppare l'applicazione. Ci sono molte opportunità sul mercato per lo sviluppatore front-end. Se sei bravo con JavaScript, Angular JS non sarà difficile da imparare e aggiornare le tue abilità con questa tecnologia sarebbe un'ottima idea.

Articoli consigliati

Questo articolo è stato una guida all'applicazione JS angolare. Qui abbiamo discusso i concetti dell'applicazione angolare JS con alcuni esempi per capire meglio. Puoi anche leggere il seguente articolo per saperne di più.

  1. Differenze di Angolare 5 e Angolare 4
  2. Che cos'è l'apprendimento automatico?
  3. Differenze tra JSON e BSON
  4. Che cos'è Laravel Framework?
  5. Che cos'è Testing Frameworks per Java?

Categoria:

Sviluppo software