Integra AngularJS nel progetto e scrivi hello world application
In questo articolo, inizieremo un programma Hello world con angularJS
Mục lục
Scarica AngualarJS
Vai alla home page di AngularJS, fai clic su SCARICA ANGULARJS e scarica il framework:
Visita: https://angularjs.org e scarica il framework AngularJS:
Esegui impostazioni dell'ambiente (facoltativo)
Per iniziare con Angular, è completamente possibile inserire la directory del progetto HTML ed eseguirlo, tuttavia, se utilizzato con questa soluzione, quando si utilizza il modello in angular verrà visualizzato un errore, quindi si consiglia di installare l'ambiente host locale del server come XAMPP o NodeJS come ambiente di runtime. Puoi vedere l'articolo su come installare localhost usando xampp
Inizia a scrivere il programma Helloworld
Poiché per iniziare con angularJS è necessaria una combinazione di modello, vista, controller e proprietà del framework, per questo motivo prima di comprendere il problema, eseguiamo prima questo codice sorgente di esempio e poi Ulteriori informazioni sul problema negli articoli seguenti.
Passaggio 1: crea una directory di progetto, inizializza il file index.html e importa la libreria Angular come segue (con il modo seguente utilizzo CDN):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> </body> </html>Passaggio 2: avviare la struttura del codice come segue:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="toanngo92App"> <div ng-controller="toanngo92Controller"> <h1>Hello {{name}}</h1> <p>You are {{age}} years old, your score is {{score}}</p> <input type="text" ng-model="name"> </div> </div> <script> var app = angular.module('toanngo92App', []); app.controller('toanngo92Controller', function($scope) { $scope.name = 'Toanngo92'; $scope.age = 18; $scope.score = 9.5; }); </script> </body> </html>Risultati durante l'esecuzione del codice nel browser:
Analizza il codice appena scritto in sequenza:
- Integrare il framework Angular nel progetto sulla linea 8
- Riga 11: <div ng-app="Toanngo92App"> Informa angular che gli elementi frammento(i) Angular possono comprendere e comunicare tramite l'attributo ng-app , il valore "toanngo92App" è il nome dell'applicazione, può essere impostato arbitrariamente. Quando si utilizza l'attributo nella struttura HTML, ha senso che solo gli elementi del tag contenente l'attributo agli elementi all'interno possano essere interrogati da angular. Prendi nota di questo!
- Riga 19: inizializza l'oggetto angolare tramite la funzione angular.module('toanngo92App',[]), con il primo parametro che è il nome dell'applicazione, il parametro successivo è l'array vuoto, che sarà menzionato più avanti negli articoli seguenti. .
- Riga 20: chiamata metodo controller , all'interno ci sono 2 parametri, il primo parametro è una stringa che definisce il nome del controller 'toanngo92Controller', il secondo parametro è una funzione anonima con parametro che è una variabile incorporata ($ scope), all'interno di questa funzione, definire 3 proprietà per $ nome variabile scope, età, punteggio, questo è il modello
- Righe 12 – 16: all'interno della struttura del tag ng-app, c'è una struttura del tag con l'attributo ng-controller="toanngo92Controller", qui abbiamo la comprensione che questa è la vista restituita dal controllore denominata "tonngo92Controller", i dati in il controller passerà attraverso la vista attraverso la variabile $scope
Quindi, proviamo a inserire più dati nella casella di input che mostra i dati tonngo92, vedremo che i dati sul tag h1 dopo la parola ciao vengono aggiornati in base ai dati inseriti senza scrivere righe aggiuntive di codice js, questi sono i dati – meccanismo di binding e la potenza di angularJS , con javascript puro o Jquery, i passaggi sequenziali dovrebbero essere: catturare l'evento onkeyup dell'utente, ottenere i dati dall'input a fuoco, quindi aggiornarlo sul tag <h1>.
Ecco un codice di esempio di una semplice applicazione di fatturazione con angularJS:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="calculateApp" ng-controller="calculateController"> <label>Quantity:</label> <input type="number" min="1" max="10" ng-model="qty" /> <label>Price</label> <input type="number" min="0" max="5000" ng-model="price" /> <div>Total: {{total | currency: '$ '}}</div> <button ng-click="calculate()">Calculate</button> </div> <script> var app = angular.module('calculateApp', []); app.controller('calculateController',function($scope){ $scope.qty = 0; $scope.price = 0; $scope.total = 0; $scope.calculate = function(){ this.total = this.qty * this.price; } }); </script> </body> </html>Risultato durante l'esecuzione del test sul browser:
Nell'esempio sopra c'è una combinazione di alcuni concetti di angularJS tra cui:
- ng-app, ng-controller, ng-model, ng-click all'interno della struttura html sono attributi di tag, riconosciuti e usati da angularJS, chiamati direttive
- {{totale | valuta: '$ '}} Questo concetto è chiamato filtri predefiniti di angularJS (rifiltrando il valore per il modello quando visualizzato)
- $scope è una variabile incorporata di angularjs, utilizzata per comunicare dati comuni tra il controller e la vista
- angular.module() , app.controller() , questi sono i metodi integrati nella struttura angularJS che verranno affrontati nei seguenti articoli
Per questo articolo, scrivi il tuo primo programma helloworld, prima di immergerti nei concetti teorici negli articoli successivi.
