MEAN.JS - Componenti angolari in App
In questo capitolo, aggiungeremo componenti angolari a un'applicazione. Si tratta di un framework JavaScript di front-end web, che consente di creare applicazioni dinamiche a pagina singola utilizzando il pattern MVC (Model View Controller). Nel capitolo sull'architettura MEAN.JS , hai visto come AngularJS elaborerà la richiesta del client e otterrà il risultato dal database.
Conoscere AngularJS
AngularJS è un framework per applicazioni web open source che utilizza HTML come linguaggio per modelli ed estende la sintassi dell'HTML per esprimere chiaramente i componenti dell'applicazione. AngularJS fornisce alcune funzionalità di base, come l'associazione dati, il modello, vista, controller, servizi, ecc Per maggiori informazioni su AngularJS, fare riferimento a questo collegamento .
Puoi rendere la pagina un'applicazione angolare aggiungendo Angular nella pagina. Può essere aggiunto semplicemente utilizzando un file JavaScript esterno, che può essere scaricato o può essere referenziato direttamente con una versione CDN.
Considera di aver scaricato il file e di averlo fatto riferimento localmente aggiungendo alla pagina come segue:
<script src="angular.min.js"></script>Ora, dobbiamo dire ad Angular che questa pagina è un'applicazione Angular. Pertanto, possiamo farlo aggiungendo un attributo, ng-app al tag <html> o <body> come mostrato di seguito -
<html ng-app>
or
<body ng-app>L'app ng può essere aggiunta a qualsiasi elemento della pagina, ma spesso viene inserita nel tag <html> o <body> in modo che Angular possa funzionare ovunque all'interno della pagina.
Applicazione angolare come modulo
Per lavorare con un'applicazione Angular, dobbiamo definire un modulo. È un luogo in cui è possibile raggruppare i componenti, le direttive, i servizi, ecc. Relativi all'applicazione. Il nome del modulo è referenziato dall'attributo ng-app nell'HTML. Ad esempio, diremo il nome del modulo dell'applicazione angolare come miaApp e può essere specificato nel tag <html> come mostrato di seguito -
<html ng-app="myApp">Possiamo creare una definizione per l'applicazione utilizzando la seguente dichiarazione in un file JavaScript esterno -
angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definitionDefinizione del controller
L'applicazione AngularJS si basa sui controller per controllare il flusso di dati nell'applicazione. Un controller viene definito utilizzando la direttiva ng-controller .
Ad esempio, collegheremo il controller al corpo utilizzando la direttiva ng-controller, insieme al nome del controller che desideri utilizzare. Nella riga sottostante, stiamo usando il nome del controller come "myController".
<body ng-controller="myController">È possibile collegare un controller (myController) a un modulo angolare (myApp) come mostrato di seguito -
angular
.module('myApp')
.controller('myController', function() {
// controller code here
});È preferibile utilizzare una funzione denominata invece di una funzione anonima per leggibilità, riutilizzabilità e testabilità. Nel codice seguente, stiamo usando la nuova funzione denominata "myController" per contenere il codice del controller -
var myController = function() {
// controller code here
};
angular
.module('myApp')
.controller('myController', myController);Per ulteriori informazioni sui controller, fare riferimento a questo collegamento .
Definizione dell'ambito
Scope è uno speciale oggetto JavaScript che collega il controller con le viste e contiene i dati del modello. Nei controller, si accede ai dati del modello tramite l'oggetto $ scope. La funzione controller accetta il parametro $ scope che è stato creato da Angular e dà accesso diretto al modello.
Lo snippet di codice seguente specifica come aggiornare la funzione del controller per ricevere il parametro $ scope e imposta il valore predefinito -
var myController = function($scope) {
$scope.message = "Hello World...";
};Per ulteriori informazioni sui controller, fare riferimento a questo collegamento . Nel prossimo capitolo, inizieremo a creare un'applicazione a pagina singola utilizzando Angular.