Direttiva in angularJS e l'elenco delle direttive
Come ci siamo avvicinati, angularJS è noto come un framework utilizzato per creare applicazioni Web, ovvero dotato di una serie di strutture precostruite che ci aiutano a sviluppare applicazioni in modo semplice e coerente. angularJS, aiutandoci a ereditare elementi HTML di base, rendendo i modelli di interfaccia html riutilizzabili, facili da testare.
Mục lục
Concetti delle Direttive AngularJS
Direttive (direttive) è un comportamento che verrà attivato quando viene rilevato un costrutto specifico durante la compilazione di AngularJS. Leggi ulteriori approfondimenti sul compilatore HTML angularJS qui: https://docs.angularjs.org/guide/compiler
L'esempio seguente mostra 2 modi per utilizzare la direttiva ng-bind tramite attributo o classe:
<!DOCTYPE html> <html lang="en" ng-app="exampleviewApp"> <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>Example View AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-controller="mainController"> <h2>Hello {{name}}</h2> <input type="text" ng-model="name" ng-change="change()" /> <span class="ng-bind: name;"></span> </body> <script> var exampleviewApp = angular.module('exampleviewApp', []); exampleviewApp.controller('mainController', function($scope) { $scope.name = ''; $scope.length = 0; }); </script> </html>Le direttive integrate sono solitamente strutturate come un attributo di HTML, (può essere scritto in classe o in stile tag), angular riconosce questi attributi speciali e possiamo immaginarlo come una direttiva display quando si usano questi attributi, quindi è necessario rispettare Le caratteristiche proprie di Angular e il suo principio per cui la lettera iniziale è sempre il carattere ng, seguendo la struttura di esempio ng-directivename, dove directivename è il nome della direttiva che utilizziamo. Come negli esempi precedenti, per inizializzare l'applicazione, per dichiararla come Controller Direttiva, dichiariamo ng-controller, dichiariamo un modello di direttiva dichiariamo ng-model, o lasciamo che il data binding usiamo ng-bind…
Alcune note:
- ng-app deve sempre essere definito e, per le versioni successive a legacy, deve sempre nominare ng-app e dichiararlo esplicitamente.
- Nella struttura html c'è sempre solo 1 ng-app, ci possono essere molte altre direttive ng.
- Documentazione dell'elenco delle direttive: https://docs.angularjs.org/api/ng/directive
Direttive di abbinamento (direttive di abbinamento)
Elenco delle direttive AngularJS popolari
ng-app
Documenti: https://docs.angularjs.org/api/ng/directive/ngApp
Quando dichiariamo una direttiva ng-app, AngularJS capirà che avviando un'applicazione Angular, la definirà come elemento radice e successivamente inizializzerà i parametri di configurazione interni che chiamiamo bootstrap. Inoltre, ng-app viene utilizzato anche per descrivere vari moduli nell'applicazione. Per quanto riguarda l'esempio, abbiamo già molte demo, quindi non ne parlerò più.
ng-init
Documenti: https://docs.angularjs.org/api/ng/directive/ngInit
ng-modello
Documenti: https://docs.angularjs.org/api/ng/directive/ngModel
Usa la direttiva ng-model usata per associare (associare) i dati all'interno dei tag di input del modulo come input, select, textarea alle proprietà della variabile $scope sul livello del controller.
Le direttive ng-model forniscono alcune delle seguenti caratteristiche:
- Fornisce la convalida dei tipi di dati per l'applicazione (numero, e-mail, obbligatorio)
- Fornisce lo stato per i dati dell'applicazione (non valido, sporco, tocco, errore)
- Fornire una classe CSS per l'elemento HTML (sarà discusso nel modulo di convalida post)
- Associa i dati di un elemento ai moduli HTML
ng-ripetere
Documenti: https://docs.angularjs.org/api/ng/directive/ngRepeat
Usa la direttiva ng-repeat per essere in grado di scorrere per scorrere gli elementi HTML quando hai un modello di elenco, che si tratti di un array o di un oggetto, queste sono direttive molto utili e usate di frequente, supportano i tag iterati direttamente in HTML, cosa che javascript puro non può fare.
Esempio di ripetizione di ng
<!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>Example ng-repeat</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="mainController"> <table> <thead> <tr> <th>Name</th> <th>Country</th> </tr> </thead> <tbody> <tr ng-repeat="item in names"> <td>{{item.name}}</td> <td>{{item.country}}</td> </tr> </tbody> </table> <ul> <li ng-repeat="item in listnotes">{{item.id}} - {{item.title}} - {{item.content}}</li> </ul> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.controller('mainController', function ($scope) { $scope.names = [ { name: 'Jani', country: 'Norway' }, { name: 'Hege', country: 'Sweden' }, { name: 'Kai', country: 'Denmark' } ]; $scope.listnotes = [ {'id': 1, 'title': 'Note 1', 'content': 'Content 1'}, {'id': 2, 'title': 'Note 2', 'content': 'Content 2'}, {'id': 3, 'title': 'Note 3', 'content': 'Content 3'} ] }); </script> </html>ng-hide / ng-show
Usa ng-hide quando vogliamo nascondere l'elemento HTML in una condizione specifica, in contrasto con ng-hide è ng-show, utile in situazioni di applicazioni SPA con scansione in più passaggi, ad esempio L'esempio seguente è un caso d'uso di ng-hide per la creazione di un sondaggio di raccolta dati utente in più fasi:
<!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>ng-hide/ng-show example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="surveyApp"> <div ng-controller="mainController"> <h1>Survey Form</h1> <form name="surveyForm" ng-submit="handleSubmit()"> <div ng-hide="step1"> <div> <label>What is your name ?</label> <input type="text" ng-model="user.name" required /> </div> <div> <label>How old are you ?</label> <input type="number" placeholder="" ng-model="user.age" required /> </div> <div> <label>Do you get married ?</label> <input type="radio" ng-model="user.married" value="yes" />Yes <input type="radio" ng-model="user.married" value="no" />No </div> <div> <label>What kind of job are you doing ?</label> <select ng-model="user.job"> <option value="developer">Developer</option> <option value="teacher">Teacher</option> <option value="businessconsult">Business Consultant</option> <option value="other">Other</option> </select> </div> <button type="button" data-step="1" ng-click="nextstep($event)">Next step</button> </div> <div ng-hide="step2"> <div> <label>What is your favorite sports ?</label> <input type="text" ng-model="interest.sports" required /> </div> <div> <label>What is your favorite music ?</label> <input type="text" ng-model="interest.music" required /> </div> <div> <label>What is your favorite movies ?</label> <input type="text" ng-model="interest.movies" required /> </div> <div> <label>What is your favorite books ?</label> <input type="text" ng-model="interest.books" required /> </div> <div> <label>What is your favorite games ?</label> <input type="text" ng-model="interest.games" required /> </div> <button type="button" data-step="2" ng-click="prevstep($event)">Previous step</button> <button type="button" data-step="2" ng-click="nextstep($event)">Next step</button> </div> <div ng-hide="step3"> <div> <label>Please provide your salary ?</label> <input type="text" ng-model="finances.salary" required /> </div> <div> <label>Please provide your savings ?</label> <input type="text" ng-model="finances.savings" required /> </div> <div> <label>Please provide your investments ?</label> <input type="text" ng-model="finances.investments" required /> </div> <div> <label>Please provide your debt ?</label> <input type="text" ng-model="finances.debt" required /> </div> <button type="button" data-step="3" ng-click="prevstep($event)">Previous step</button> <button>submit form</button> </div> <div ng-hide="step4"> Thanks for your submission Let us show what you provide: <br /> Your name: {{user.name}} <br /> Your age: {{user.age}} <br /> Your job: {{user.job}} <br /> Your favorite sports: {{interest.sports}} <br /> Your favorite music: {{interest.music}} <br /> Your favorite movies: {{interest.movies}} <br /> Your favorite books: {{interest.books}} <br /> Your favorite games: {{interest.games}} <br /> Your salary: {{finances.salary}} <br /> Your savings: {{finances.savings}} <br /> Your investments: {{finances.investments}} <br /> Your debt: {{finances.debt}} <br /> Thanks for contact us ! </div> </form> </body> <script> var surveyApp = angular.module('surveyApp', []); surveyApp.controller('mainController', ($scope) => { $scope.step1 = false; $scope.step2 = true; $scope.step3 = true; $scope.step4 = true; $scope.user = { name: 'sdfsdf', age: '', married: 'no', job: 'developer', } $scope.interest = { sports: '', music: '', movies: '', books: '', games: '', } $scope.finances = { salary: 0, savings: 0, investments: 0, debt: 0, } $scope.prevstep = ($event) => { switch ($event.target.dataset.step) { default: case '2': $scope.step2 = true; $scope.step1 = false; break; case '3': $scope.step3 = true; $scope.step2 = false; break; } if ($event.target.dataset.step == 1) { } else if ($event.target.dataset.step == 2) { } } $scope.nextstep = ($event) => { switch ($event.target.dataset.step) { default: case '1': $scope.step1 = true; $scope.step2 = false; break; case '2': $scope.step2 = true; $scope.step3 = false; break; case '3': $scope.step3 = true; $scope.step4 = false; break; } if ($event.target.dataset.step == 1) { } else if ($event.target.dataset.step == 2) { } } $scope.handleSubmit = () => { // handle submit to send data to server or send email ... $scope.step3 = true; $scope.step4 = false; console.log($scope.user); console.log($scope.interest); console.log($scope.finances); } }); </script> </html>ng-include
Per impostazione predefinita, HTML non fornisce una soluzione per poter incorporare il contenuto di una pagina HTML in un'altra, ma con angularJS, questo problema viene risolto tramite la direttiva ng-include , possiamo incorporare completamente una pagina HTML direttamente. un altro file, utile quando la struttura HTML è troppo lunga, possiamo suddividerlo in file più piccoli per mantenere e aggiornare facilmente il codice per ogni componente, riducendo al minimo gli errori che si verificano nel processo di sviluppo dell'applicazione.
Esempio di ng-include, passaggio di dati dal controller al file include per attraversare l'attributo onload, tuttavia questo non è un buon modo da usare, poiché c'è un problema con l'ambito, in questa situazione dovremmo usare la direttiva personalizzata (direttiva self- definito) sarà affrontato di seguito.
Vedi più documenti:
Passaggio 1: crea il file index.html
<!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>Example ng-include</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="myController"> <h1>ng-include example</h1> <div ng-include="'table.html'" onload="items = items"></div> </div> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.controller('myController', function($scope) { $scope.items = [ {name: 'Jani', country: 'Norway'}, {name: 'Hege', country: 'Sweden'}, {name: 'Kai', country: 'Denmark'} ] }); </script> </html>Passaggio 2: crea il file table.html
<table> <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.country}}</td> </tr> </table>Risultati dopo la stampa sullo schermo
ng-form / ng-submit
Documenti: https://docs.angularjs.org/api/ng/directive/ngForm
Con la creazione di un modulo in puro HTML per inviare dati al server, utilizziamo il tag <form> e gestiamo l'evento di invio tramite la direttiva ng-submit , ma raggiungiamo la direttiva ng-form a causa di questa direttiva. ngForm sul livello di script e questo oggetto memorizza gli attributi utilizzati nella convalida dei dati, ma durante la creazione del tag html, creiamo ancora il normale tag <form>, puoi leggere più documenti di angularJS. Per gestire l'evento submit, utilizziamo la direttiva ng-submit . C'è un punto che notiamo qui, se impari HTML e JS puro, per impostazione predefinita dopo l'invio, il sito Web verrà ricaricato, ma non con questo ng-submit, perché come ho detto, angularJS usa per creare un'applicazione SPA, quindi dopo inviando, i dati verranno inseriti in un elenco e utilizziamo la richiesta ajax per inviare i dati al server senza ricaricare la pagina.
Esempio di ng-form combinato con ng-submit :
<!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>Example ngform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="mycontroller"> <form ng-submit="submit()"> <input ng-model="myForm.name" type="text" name="name" placeholder="Name"> <input ng-model="myForm.email" type="email" name="email" placeholder="Email"> <input ng-model="myForm.password" type="text" name="password" placeholder="password"> <input ng-model="myForm.confirmPassword" type="text" name="confirmpassword" placeholder="confirmpassword"> <input type="submit" value="Register"> </form> </div> </body> <script> var app = angular.module('myApp', []); app.controller('mycontroller', function($scope) { $scope.myForm = {}; $scope.myForm.name = "sdfsdf"; $scope.myForm.email = ""; $scope.myForm.password = ""; $scope.myForm.confirmPassword = ""; $scope.submit = function() { console.log($scope.myForm); // send ajax to server or database // in this case, we just save data to localstorage localStorage.setItem('listuser', JSON.stringify($scope.myForm)); } }); </script> </html>Definisci le tue Direttive in angularJS (direttive personalizzate)
Documenti: https://docs.angularjs.org/guide/directive
Sebbene angularJS fornisca molte direttive che ci aiutano a soddisfare la maggior parte dei requisiti durante la creazione di un'applicazione, possiamo creare una direttiva auto-definita per soddisfare il business nel caso di direttive.
L'applicazione .AngularJS all'avvio troverà automaticamente gli elementi corrispondenti ed eseguirà un'operazione una tantum utilizzando il metodo compile() della direttiva personalizzata, quindi elaborerà l'elemento utilizzando il metodo link() di una direttiva personalizzata in base all'ambito della direttiva. Prima di entrare nell'esempio, è necessario comprendere il concetto generale di tipo di direttive.
- Direttive degli elementi – Direttive che si attivano quando si incontra un elemento corrispondente.
- Attributo – La direttiva che si attiva quando si incontra un attributo corrispondente.
- Class (direttiva di classe) – Una direttiva che si attiva quando viene incontrata una classe corrispondente.
- Commento (direttiva commento) − La direttiva viene attivata quando si incontra un commento corrispondente.
Questi tipi di direttive vengono utilizzati per specificare il valore dell'attributo limit durante l'inizializzazione delle direttive: E (Element) A(Attributes) C (Class) M (comment). Normalmente, utilizziamo principalmente EA (indicatore Element and Attribute).
Esempio di autoavvio di una direttiva personalizzata di base in 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>Example custom directive</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <customdirective></customdirective> <div customdirective></div> <div class="customdirective"></div> </div> </body> <script> var app = angular.module('myApp', []); app.directive('customdirective', function() { return { restrict: 'EAC', template: '<h2>Hello World custom directive</h2>' }; }); app.controller('myController', function($scope) { $scope.name = ""; }); </script> </html>Risultati durante la stampa sul browser
Ad esempio, creando un'applicazione con più direttive, ogni direttiva contiene parametri passati per aumentare la flessibilità del programma, con questa funzionalità possiamo creare le nostre strutture HTML riutilizzabili e I dati vengono aggiornati dinamicamente in base al parametro di input.
Passaggio 1: crea il file di codice index.html di esempio 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>Example custom directive</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <form ng-submit="handlesubmit($event)"> <div surveyform name="person1" submit="directiveSubmit"></div> </form> <form ng-submit="handlesubmit($event)"> <div surveyform name="person2"></div> </form> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myController', function ($scope) { $scope.person1 = { fullname: "John", email: "abc@gmail.com", phonenumber: 1234567890 } $scope.person2 = { fullname: "Toanngo92", email: "trienkhaiweb@gmail.com", phonenumber: 2123456789 } $scope.handlesubmit = function ($event) { console.log($event); // todo here } }); app.directive('surveyform', function () { let directive = {}; directive.restrict = 'EAC'; directive.templateUrl = 'surveyForm.html'; directive.scope = { person: '=name', submit: '=' }; directive.compile = function (element, attributes) { // console.log(element); element.css("border", "1px solid #cccccc"); element.css("padding", "10px"); //linkFunction is linked with each element with scope to get the element specific data. var linkFunction = function ($scope, element, attributes) { } return linkFunction; } return directive; }); </script> </html>Passaggio 2: crea il file surveyForm.html con la struttura sottostante
<label>fullname</label> <br /> <input type="text" ng-model="person.fullname" /> <br /> <label>Email</label> <br /> <input type="text" ng-model="person.email" /> <br /> <label>Phone</label> <br /> <input type="number" ng-model="person.phonenumber" /> <br /> <button type="submit">submit</button>Risultato durante la stampa sul browser:
Possiamo vedere che possiamo riutilizzare 2 moduli html senza riscrivere, 2 moduli che eseguono la stessa struttura e utilizzando 2 modelli separati.
Ecco la fine dei concetti base delle direttive, infatti, se utilizzare le direttive di default è già sufficiente nel processo di apprendimento, per progetti complessi che necessitano di riutilizzare molti componenti, possiamo usarli soluzione applica direttive personalizzate da risolvere.
