AngularJS - Guida rapida
Cos'è AngularJS?
AngularJS è un framework per applicazioni web open source. È stato originariamente sviluppato nel 2009 da Misko Hevery e Adam Abrons. Ora è gestito da Google. La sua ultima versione è 1.4.3.
La definizione di AngularJS come indicato dalla sua documentazione ufficiale è la seguente:
AngularJS è un framework strutturale per app web dinamiche. Ti consente di utilizzare HTML come linguaggio del modello e ti consente di estendere la sintassi dell'HTML per esprimere i componenti della tua applicazione in modo chiaro e conciso. Il data binding e l'inserimento delle dipendenze di Angular eliminano gran parte del codice che devi attualmente scrivere. E tutto avviene all'interno del browser, rendendolo un partner ideale con qualsiasi tecnologia server.
Caratteristiche
AngularJS è un potente framework di sviluppo basato su JavaScript per creare RICH Internet Application (RIA).
AngularJS fornisce agli sviluppatori opzioni per scrivere applicazioni lato client (utilizzando JavaScript) in modo pulito MVC (Model View Controller).
L'applicazione scritta in AngularJS è compatibile con tutti i browser. AngularJS gestisce automaticamente il codice JavaScript adatto a ciascun browser.
AngularJS è open source, completamente gratuito e utilizzato da migliaia di sviluppatori in tutto il mondo. È concesso in licenza con la licenza Apache versione 2.0.
Nel complesso, AngularJS è un framework per creare applicazioni web su larga scala e ad alte prestazioni, mantenendole facili da mantenere.
Caratteristiche principali
Di seguito sono riportate le caratteristiche principali più importanti di AngularJS:
Data-binding - È la sincronizzazione automatica dei dati tra i componenti del modello e della vista.
Scope- Questi sono oggetti che fanno riferimento al modello. Fungono da collante tra il controller e la vista.
Controller - Si tratta di funzioni JavaScript associate a un determinato ambito.
Services- AngularJS viene fornito con diversi servizi integrati, ad esempio $ https: per creare XMLHttpRequests. Questi sono oggetti singleton che vengono istanziati solo una volta nell'app.
Filters - Questi selezionano un sottoinsieme di elementi da un array e restituiscono un nuovo array.
Directives- Le direttive sono marcatori su elementi DOM (come elementi, attributi, CSS e altro). Questi possono essere utilizzati per creare tag HTML personalizzati che fungono da nuovi widget personalizzati. AngularJS ha direttive integrate (ngBind, ngModel ...)
Templates- Queste sono le viste renderizzate con le informazioni dal controller e dal modello. Questi possono essere un singolo file (come index.html) o più visualizzazioni in una pagina utilizzando "parziali".
Routing - È il concetto di cambiare visualizzazione.
Model View Whatever- MVC è un modello di progettazione per dividere un'applicazione in parti diverse (chiamate Modello, Vista e Controller), ciascuna con responsabilità distinte. AngularJS non implementa MVC nel senso tradizionale, ma piuttosto qualcosa di più vicino a MVVM (Model-View-ViewModel). Il team di Angular JS lo definisce ironicamente come Model View W Anything.
Deep Linking- Il deep linking consente di codificare lo stato dell'applicazione nell'URL in modo che possa essere aggiunto ai segnalibri. L'applicazione può quindi essere ripristinata dall'URL nello stesso stato.
Dependency Injection - AngularJS ha un sottosistema di iniezione delle dipendenze integrato che aiuta lo sviluppatore rendendo l'applicazione più facile da sviluppare, comprendere e testare.
Concetti
Il diagramma seguente illustra alcune parti importanti di AngularJS che discuteremo in dettaglio nei capitoli successivi.
Vantaggi di AngularJS
AngularJS fornisce la capacità di creare un'applicazione a pagina singola in modo molto pulito e gestibile.
AngularJS fornisce capacità di associazione dati all'HTML, offrendo così all'utente un'esperienza ricca e reattiva
Il codice AngularJS è testabile dall'unità.
AngularJS utilizza l'iniezione di dipendenza e fa uso della separazione delle preoccupazioni.
AngularJS fornisce componenti riutilizzabili.
Con AngularJS, lo sviluppatore scrive meno codice e ottiene più funzionalità.
In AngularJS, le viste sono pagine html pure e i controller scritti in JavaScript eseguono l'elaborazione aziendale.
Oltre a tutto, le applicazioni AngularJS possono essere eseguite su tutti i principali browser e smartphone, inclusi telefoni / tablet basati su Android e iOS.
Svantaggi di AngularJS
Sebbene AngularJS abbia molti punti in più, ma allo stesso tempo dovremmo considerare i seguenti punti:
Not Secure- Essendo solo framework JavaScript, le applicazioni scritte in AngularJS non sono sicure. L'autenticazione e l'autorizzazione lato server sono necessarie per mantenere sicura un'applicazione.
Not degradable - Se l'utente dell'applicazione disabilita JavaScript, l'utente vedrà solo la pagina di base e nient'altro.
I componenti AngularJS
Il framework AngularJS può essere suddiviso nelle seguenti tre parti principali:
ng-app - Questa direttiva definisce e collega un'applicazione AngularJS a HTML.
ng-model - Questa direttiva lega i valori dei dati dell'applicazione AngularJS ai controlli di input HTML.
ng-bind - Questa direttiva lega i dati dell'applicazione AngularJS ai tag HTML.
In questo capitolo discuteremo su come impostare la libreria AngularJS da utilizzare nello sviluppo di applicazioni web. Studieremo anche brevemente la struttura delle directory e il suo contenuto.
Quando apri il link https://angularjs.org/, vedrai che ci sono due opzioni per scaricare la libreria AngularJS -
View on GitHub - Fare clic su questo pulsante per accedere a GitHub e ottenere tutti gli ultimi script.
Download AngularJS 1 - Oppure fai clic su questo pulsante, verrà visualizzata una schermata come di seguito -
Questa schermata offre varie opzioni di utilizzo di Angular JS come segue:
Downloading and hosting files locally
Ci sono due diverse opzioni legacy e latest. I nomi stessi sono auto descrittivi.legacy ha una versione inferiore alla 1.2.xe latest ha la versione 1.5.x.
Possiamo anche andare con la versione minimizzata, non compressa o zippata.
CDN access- Hai anche accesso a un CDN. Il CDN ti darà accesso in tutto il mondo ai data center regionali che in questo caso ospitano Google. Ciò significa che l'utilizzo di CDN sposta la responsabilità di ospitare i file dai tuoi server a una serie di quelli esterni. Questo offre anche un vantaggio che se il visitatore della tua pagina web ha già scaricato una copia di AngularJS dalla stessa CDN, non dovrà essere scaricata nuovamente.
Try the new angularJS 2 - Fare clic su questo pulsante per scaricare la versione beta 2 di Angular JS.Questa versione è molto veloce, supportata da dispositivi mobili e flessibile rispetto alla versione precedente e più recente di AngularJS 1
Stiamo utilizzando le versioni CDN della libreria durante questo tutorial.
Esempio
Ora scriviamo un semplice esempio usando la libreria AngularJS. Creiamo un file HTML myfirstexample.html come di seguito -
<!doctype html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
</head>
<body ng-app = "myapp">
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>Le sezioni seguenti descrivono in dettaglio il codice precedente:
Includi AngularJS
Abbiamo incluso il file JavaScript AngularJS nella pagina HTML in modo da poter utilizzare AngularJS -
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>Se desideri eseguire l'aggiornamento all'ultima versione di Angular JS, utilizza la seguente fonte di script oppure controlla l'ultima versione di AngularJS sul loro sito Web ufficiale.
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
</head>Seleziona l'app AngularJS
Successivamente diciamo quale parte dell'HTML contiene l'app AngularJS. Ciò viene fatto aggiungendo l' attributo ng-app all'elemento HTML radice dell'app AngularJS. Puoi aggiungerlo all'elemento html o all'elemento body come mostrato di seguito -
<body ng-app = "myapp">
</body>Visualizza
La vista è questa parte -
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>ng-controller dice ad AngularJS quale controller usare con questa vista. helloTo.title dice ad AngularJS di scrivere il valore "model" denominato helloTo.title nell'HTML in questa posizione.
Controller
La parte del controller è:
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>Questo codice registra una funzione del controller denominata HelloController nel modulo angolare denominato myapp . Studieremo di più sui moduli e sui controllori nei rispettivi capitoli. La funzione controller viene registrata in angular tramite la chiamata della funzione angular.module (...). Controller (...).
Il parametro $ scope passato alla funzione controller è il modello . La funzione controller aggiunge un oggetto helloTo JavaScript e in quell'oggetto aggiunge un campo del titolo .
Esecuzione
Salva il codice sopra come myfirstexample.html e aprilo in qualsiasi browser. Vedrai un output come di seguito -
Welcome AngularJS to the world of Tutorialspoint!Quando la pagina viene caricata nel browser, accadono le seguenti cose:
Il documento HTML viene caricato nel browser e valutato dal browser. Il file JavaScript AngularJS viene caricato, viene creato l' oggetto globale angolare . Successivamente, viene eseguito JavaScript che registra le funzioni del controller.
Successivamente AngularJS esegue la scansione dell'HTML per cercare app e visualizzazioni AngularJS. Una volta individuata la vista, collega quella vista alla funzione del controller corrispondente.
Successivamente, AngularJS esegue le funzioni del controller. Quindi esegue il rendering delle viste con i dati del modello popolato dal controller. La pagina è ora pronta.
Model Visualizzare Controller o MVC, come viene comunemente chiamato, è un modello di progettazione software per lo sviluppo di applicazioni web. Un pattern Model View Controller è costituito dalle seguenti tre parti:
Model - È il livello più basso del pattern responsabile della conservazione dei dati.
View - È responsabile della visualizzazione totale o parziale dei dati all'utente.
Controller - È un codice software che controlla le interazioni tra il modello e la vista.
MVC è popolare perché isola la logica dell'applicazione dal livello dell'interfaccia utente e supporta la separazione dei problemi. Il controller riceve tutte le richieste per l'applicazione e quindi lavora con il modello per preparare tutti i dati necessari alla visualizzazione. La vista utilizza quindi i dati preparati dal controller per generare una risposta presentabile finale. L'astrazione MVC può essere rappresentata graficamente come segue.
Il modello
Il modello è responsabile della gestione dei dati dell'applicazione. Risponde alla richiesta dalla vista e alle istruzioni del controller per aggiornarsi.
La vista
Una presentazione dei dati in un formato particolare, innescata dalla decisione del titolare del trattamento di presentare i dati. Sono sistemi di template basati su script come JSP, ASP, PHP e molto facili da integrare con la tecnologia AJAX.
Il controller
Il controller risponde all'input dell'utente ed esegue le interazioni sugli oggetti del modello di dati. Il controller riceve l'input, lo convalida e quindi esegue operazioni di business che modificano lo stato del modello di dati.
AngularJS è un framework basato su MVC. Nei prossimi capitoli, vedremo come AngularJS utilizza la metodologia MVC.
Prima di iniziare con la creazione di un'applicazione HelloWorld reale utilizzando AngularJS, vediamo quali sono le parti effettive di un'applicazione AngularJS. Un'applicazione AngularJS è composta dalle seguenti tre parti importanti:
ng-app - Questa direttiva definisce e collega un'applicazione AngularJS a HTML.
ng-model - Questa direttiva lega i valori dei dati dell'applicazione AngularJS ai controlli di input HTML.
ng-bind - Questa direttiva lega i dati dell'applicazione AngularJS ai tag HTML.
Passaggi per creare l'applicazione AngularJS
Passaggio 1: caricamento del framework
Essendo un puro framework JavaScript, può essere aggiunto utilizzando il tag <Script>.
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>Passaggio 2: definire l'applicazione AngularJS utilizzando la direttiva ng-app
<div ng-app = "">
...
</div>Passaggio 3: definire un nome di modello utilizzando la direttiva ng-model
<p>Enter your Name: <input type = "text" ng-model = "name"></p>Passaggio 4: associare il valore del modello sopra definito utilizzando la direttiva ng-bind.
<p>Hello <span ng-bind = "name"></span>!</p>Passaggi per eseguire l'applicazione AngularJS
Utilizzare i tre passaggi sopra menzionati in una pagina HTML.
testAngularJS.htm
<html>
<head>
<title>AngularJS First Application</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>Produzione
Apri textAngularJS.htm in un browser web. Inserisci il tuo nome e guarda il risultato.
Come AngularJS si integra con HTML
La direttiva ng-app indica l'inizio dell'applicazione AngularJS.
La direttiva ng-model crea quindi una variabile di modello denominata "name" che può essere utilizzata con la pagina html e all'interno del div con la direttiva ng-app.
ng-bind utilizza quindi il modello del nome da visualizzare nel tag span html ogni volta che l'utente inserisce qualcosa nella casella di testo.
Il tag </div> di chiusura indica la fine dell'applicazione AngularJS.
Le direttive AngularJS vengono utilizzate per estendere l'HTML. Questi sono attributi speciali che iniziano con ng- prefix. Discuteremo le seguenti direttive:
ng-app - Questa direttiva avvia un'applicazione AngularJS.
ng-init - Questa direttiva inizializza i dati dell'applicazione.
ng-model - Questa direttiva lega i valori dei dati dell'applicazione AngularJS ai controlli di input HTML.
ng-repeat - Questa direttiva ripete gli elementi html per ogni elemento in una raccolta.
direttiva ng-app
La direttiva ng-app avvia un'applicazione AngularJS. Definisce l'elemento radice. Inizializza o avvia automaticamente l'applicazione quando viene caricata la pagina web contenente l'applicazione AngularJS. Viene anche utilizzato per caricare vari moduli AngularJS nell'applicazione AngularJS. Nel seguente esempio, abbiamo definito un'applicazione AngularJS predefinita utilizzando l'attributo ng-app di un elemento div.
<div ng-app = "">
...
</div>direttiva ng-init
La direttiva ng-init inizializza i dati di un'applicazione AngularJS. Viene utilizzato per inserire valori nelle variabili da utilizzare nell'applicazione. Nell'esempio seguente, inizializzeremo un array di paesi. Usiamo la sintassi JSON per definire la serie di paesi.
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
...
</div>direttiva ng-model
Questa direttiva lega i valori dei dati dell'applicazione AngularJS ai controlli di input HTML. Nell'esempio seguente, abbiamo definito un modello denominato "nome".
<div ng-app = "">
...
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>direttiva ng-repeat
La direttiva ng-repeat ripete gli elementi html per ogni elemento in una raccolta. Nell'esempio seguente, abbiamo iterato su una serie di paesi.
<div ng-app = "">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>Esempio
L'esempio seguente mostrerà tutte le direttive sopra menzionate.
testAngularJS.htm
<html>
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>Produzione
Apri textAngularJS.htm in un browser web. Inserisci il tuo nome e guarda il risultato.
Le espressioni vengono utilizzate per associare i dati dell'applicazione a html. Le espressioni sono scritte tra doppie parentesi graffe come {{espressione}}. Le espressioni si comportano allo stesso modo delle direttive ng-bind. Le espressioni dell'applicazione AngularJS sono espressioni javascript pure e restituiscono i dati dove vengono utilizzati.
Usare i numeri
<p>Expense on Books : {{cost * quantity}} Rs</p>Usare le stringhe
<p>Hello {{student.firstname + " " + student.lastname}}!</p>Utilizzando oggetto
<p>Roll No: {{student.rollno}}</p>Utilizzando array
<p>Marks(Math): {{marks[3]}}</p>Esempio
L'esempio seguente mostrerà tutte le espressioni sopra menzionate.
testAngularJS.htm
<html>
<head>
<title>AngularJS Expressions</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "quantity = 1;cost = 30;
student = {firstname:'Mahesh',lastname:'Parashar',rollno:101};
marks = [80,90,75,73,60]">
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
<p>Expense on Books : {{cost * quantity}} Rs</p>
<p>Roll No: {{student.rollno}}</p>
<p>Marks(Math): {{marks[3]}}</p>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>Produzione
Apri textAngularJS.htm in un browser web. Guarda il risultato.
L'applicazione AngularJS si basa principalmente sui controller per controllare il flusso di dati nell'applicazione. Un controller viene definito utilizzando la direttiva ng-controller. Un controller è un oggetto JavaScript contenente attributi / proprietà e funzioni. Ogni controller accetta $ scope come parametro che fa riferimento all'applicazione / modulo che il controller deve controllare.
<div ng-app = "" ng-controller = "studentController">
...
</div>Qui abbiamo dichiarato un controller studentControllerutilizzando la direttiva ng-controller. Come passaggio successivo definiremo lo studentController come segue:
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>studentController definito come un oggetto JavaScript con $ scope come argomento.
$ scope si riferisce all'applicazione che deve utilizzare l'oggetto studentController.
$ scope.student è la proprietà dell'oggetto studentController.
firstName e lastName sono due proprietà dell'oggetto $ scope.student. Abbiamo passato loro i valori predefiniti.
fullName è la funzione dell'oggetto $ scope.student il cui compito è restituire il nome combinato.
Nella funzione fullName stiamo ottenendo l'oggetto student e quindi restituiamo il nome combinato.
Come nota, possiamo anche definire l'oggetto controller in un file JS separato e fare riferimento a quel file nella pagina html.
Ora possiamo usare la proprietà student di studentController usando ng-model o usando espressioni come segue.
Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}Abbiamo limitato student.firstName e student.lastname a due caselle di input.
Abbiamo limitato student.fullName () a HTML.
Ora ogni volta che digiti qualcosa nelle caselle di immissione del nome e del cognome, puoi vedere il nome completo che viene aggiornato automaticamente.
Esempio
L'esempio seguente mostrerà l'uso del controller.
testAngularJS.htm
<html>
<head>
<title>Angular JS Controller</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
Enter first name: <input type = "text" ng-model = "student.firstName"><br>
<br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>Produzione
Apri textAngularJS.htm in un browser web. Guarda il risultato.
I filtri vengono utilizzati per modificare modificare i dati e possono essere raggruppati in espressioni o direttive utilizzando il carattere pipe. Di seguito è riportato l'elenco dei filtri comunemente utilizzati.
| Sr.No. | Nome e descrizione |
|---|---|
| 1 | uppercase converte un testo in testo maiuscolo. |
| 2 | lowercase converte un testo in testo minuscolo. |
| 3 | currency formatta il testo in un formato valuta. |
| 4 | filter filtrare la matrice in un sottoinsieme in base ai criteri forniti. |
| 5 | orderby ordina l'array in base ai criteri forniti. |
filtro maiuscolo
Aggiungere un filtro maiuscolo a un'espressione utilizzando il carattere barra verticale. Qui abbiamo aggiunto il filtro in maiuscolo per stampare il nome dello studente in tutte le lettere maiuscole.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}filtro minuscolo
Aggiungi un filtro minuscolo a un'espressione utilizzando il carattere barra verticale. Qui abbiamo aggiunto il filtro in minuscolo per stampare il nome dello studente in tutte le lettere minuscole.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}filtro valuta
Aggiungere un filtro di valuta a un'espressione che restituisce un numero utilizzando il carattere barra verticale. Qui abbiamo aggiunto il filtro valuta per stampare le commissioni utilizzando il formato valuta.
Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}filtro filtro
Per visualizzare solo i soggetti obbligatori, abbiamo utilizzato subjectName come filtro.
Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>ordina per filtro
Per ordinare i soggetti in base ai segni, abbiamo utilizzato orderBy segni.
Subject:
<ul>
<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>Esempio
L'esempio seguente mostrerà tutti i filtri sopra menzionati.
testAngularJS.htm
<html>
<head>
<title>Angular JS Filters</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Enter fees: </td>
<td><input type = "text" ng-model = "student.fees"></td>
</tr>
<tr>
<td>Enter subject: </td>
<td><input type = "text" ng-model = "subjectName"></td>
</tr>
</table>
<br/>
<table border = "0">
<tr>
<td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
</tr>
<tr>
<td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
</tr>
<tr>
<td>fees: </td><td>{{student.fees | currency}}
</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>Produzione
Apri textAngularJS.htm in un browser web. Guarda il risultato.
I dati della tabella sono normalmente ripetibili per natura. La direttiva ng-repeat può essere utilizzata per disegnare facilmente una tabella. L'esempio seguente afferma l'uso della direttiva ng-repeat per disegnare una tabella.
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>La tabella può essere stilizzata utilizzando CSS Styling.
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>Esempio
L'esempio seguente mostrerà tutta la direttiva sopra menzionata.
testAngularJS.htm
<html>
<head>
<title>Angular JS Table</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "student.lastName">
</td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<table>
<tr>
<th>Name</th>.
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>Produzione
Apri textAngularJS.htm in un browser web. Guarda il risultato.
Le seguenti direttive possono essere utilizzate per associare i dati dell'applicazione agli attributi degli elementi HTML DOM.
| Sr.No. | Nome e descrizione |
|---|---|
| 1 | ng-disabled disabilita un determinato controllo. |
| 2 | ng-show mostra un dato controllo. |
| 3 | ng-hide nasconde un determinato controllo. |
| 4 | ng-click rappresenta un evento clic AngularJS. |
direttiva ng-disabled
Aggiungi l'attributo ng-disabled a un pulsante HTML e passagli un modello. Associa il modello a una casella di controllo e guarda la variazione.
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>direttiva ng-show
Aggiungi l'attributo ng-show a un pulsante HTML e passagli un modello. Associa il modello a una casella di controllo e guarda la variazione.
<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>direttiva ng-hide
Aggiungi l'attributo ng-hide a un pulsante HTML e passagli un modello. Associa il modello a una casella di controllo e guarda la variazione.
<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>direttiva ng-click
Aggiungi l'attributo ng-click a un pulsante HTML e aggiorna un modello. Associa il modello a html e guarda la variazione.
<p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>Esempio
L'esempio seguente mostrerà tutte le direttive sopra menzionate.
testAngularJS.htm
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "">
<table border = "0">
<tr>
<td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>
<td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
</tr>
<tr>
<td><input type = "checkbox" ng-model = "showHide1">Show Button</td>
<td><button ng-show = "showHide1">Click Me!</button></td>
</tr>
<tr>
<td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>
<td><button ng-hide = "showHide2">Click Me!</button></td>
</tr>
<tr>
<td><p>Total click: {{ clickCounter }}</p></td>
<td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>Produzione
Apri textAngularJS.htm in un browser web. Guarda il risultato.
AngularJS supporta l'approccio modulare. I moduli vengono utilizzati per separare le logiche, ad esempio servizi, controller, applicazioni, ecc. E mantengono pulito il codice. Definiamo i moduli in file js separati e li denominiamo secondo il file module.js. In questo esempio creeremo due moduli.
Application Module - utilizzato per inizializzare un'applicazione con i controller.
Controller Module - utilizzato per definire il controller.
Modulo applicativo
mainApp.js
var mainApp = angular.module("mainApp", []);Qui abbiamo dichiarato un'applicazione mainAppmodulo utilizzando la funzione angular.module. Gli abbiamo passato un array vuoto. Questo array contiene generalmente moduli dipendenti.
Modulo controller
studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});Qui abbiamo dichiarato un controller studentController modulo utilizzando la funzione mainApp.controller.
Usa i moduli
<div ng-app = "mainApp" ng-controller = "studentController">
...
<script src = "mainApp.js"></script>
<script src = "studentController.js"></script>
</div>Qui abbiamo usato il modulo dell'applicazione usando la direttiva ng-app e il controller usando la direttiva ng-controller. Abbiamo importato mainApp.js e studentController.js nella pagina html principale.
Esempio
L'esempio seguente mostrerà tutti i moduli sopra menzionati.
testAngularJS.htm
<html>
<head>
<title>Angular JS Modules</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "/angularjs/src/module/mainApp.js"></script>
<script src = "/angularjs/src/module/studentController.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>mainApp.js
var mainApp = angular.module("mainApp", []);studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});Produzione
Apri textAngularJS.htm in un browser web. Guarda il risultato.
AngularJS arricchisce la compilazione e la convalida dei moduli. Possiamo usare ng-click per gestire il clic di AngularJS sul pulsante e utilizzare i flag $ dirty e $ invalid per eseguire le convalide in modo apparente. Utilizzare novalidate con una dichiarazione del modulo per disabilitare qualsiasi convalida specifica del browser. I controlli dei moduli fanno un uso massiccio di eventi angolari. Diamo prima una rapida occhiata agli eventi.
Eventi
AngularJS fornisce più eventi che possono essere associati ai controlli HTML. Ad esempio, ng-click è normalmente associato al pulsante. Di seguito sono riportati gli eventi supportati in Angular JS.
- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change
ng-clic
Reimposta i dati di un modulo utilizzando la direttiva al clic di un pulsante.
<input name = "firstname" type = "text" ng-model = "firstName" required>
<input name = "lastname" type = "text" ng-model = "lastName" required>
<input name = "email" type = "email" ng-model = "email" required>
<button ng-click = "reset()">Reset</button>
<script>
function studentController($scope) {
$scope.reset = function() {
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "[email protected]";
}
$scope.reset();
}
</script>Convalida i dati
Di seguito può essere utilizzato per tenere traccia degli errori.
$dirty - afferma che il valore è stato modificato.
$invalid - afferma che il valore inserito non è valido.
$error - indica l'errore esatto.
Esempio
L'esempio seguente mostrerà tutte le direttive sopra menzionate.
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<form name = "studentForm" novalidate>
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input name = "firstname" type = "text" ng-model = "firstName" required>
<span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
<span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input name = "lastname" type = "text" ng-model = "lastName" required>
<span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
<span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
<span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show = "studentForm.email.$error.required">Email is required.</span>
<span ng-show = "studentForm.email.$error.email">Invalid email address.</span>
</span>
</td>
</tr>
<tr>
<td>
<button ng-click = "reset()">Reset</button>
</td>
<td>
<button ng-disabled = "studentForm.firstname.$dirty &&
studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
studentForm.lastname.$invalid || studentForm.email.$dirty &&
studentForm.email.$invalid" ng-click="submit()">Submit</button>
</td>
</tr>
</table>
</form>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.reset = function() {
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "[email protected]";
}
$scope.reset();
});
</script>
</body>
</html>Produzione
Apri textAngularJS.htm in un browser web. Guarda il risultato.
HTML non supporta l'incorporamento di pagine html all'interno di una pagina html. Per ottenere questa funzionalità vengono utilizzati i seguenti modi:
Using Ajax - Effettua una chiamata al server per ottenere la pagina html corrispondente e impostala in innerHTML del controllo html.
Using Server Side Includes - JSP, PHP e altre tecnologie server lato web possono includere pagine html all'interno di una pagina dinamica.
Usando AngularJS, possiamo incorporare pagine HTML all'interno di una pagina HTML usando la direttiva ng-include.
<div ng-app = "" ng-controller = "studentController">
<div ng-include = "'main.htm'"></div>
<div ng-include = "'subjects.htm'"></div>
</div>Esempio
tryAngularJS.htm
<html>
<head>
<title>Angular JS Includes</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<div ng-include = "'/angularjs/src/include/main.htm'"></div>
<div ng-include = "'/angularjs/src/include/subjects.htm'"></div>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>main.htm
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
</table>subjects.htm
<p>Subjects:</p>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>Produzione
Per eseguire questo esempio, è necessario distribuire textAngularJS.htm, main.htm e subjects.htm su un server web. Apri textAngularJS.htm utilizzando l'URL del tuo server in un browser web. Guarda il risultato.
AngularJS fornisce $ https: controllo che funziona come un servizio per leggere i dati dal server. Il server effettua una chiamata al database per ottenere i record desiderati. AngularJS necessita di dati in formato JSON. Una volta che i dati sono pronti, $ https: può essere utilizzato per ottenere i dati dal server nel modo seguente:
function studentController($scope,$https:) {
var url = "data.txt";
$https:.get(url).success( function(response) {
$scope.students = response;
});
}Qui, il file data.txt contiene i record degli studenti. $ https: il servizio effettua una chiamata ajax e imposta la risposta ai suoi studenti di proprietà. Il modello degli studenti può essere utilizzato per disegnare tabelle in HTML.
Esempi
data.txt
[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]testAngularJS.htm
<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "" ng-controller = "studentController">
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Percentage</th>
</tr>
<tr ng-repeat = "student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url = "data.txt";
$http.get(url).then( function(response) {
$scope.students = response.data;
});
}
</script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
</body>
</html>Produzione
Per eseguire questo esempio, è necessario distribuire i file testAngularJS.htm e data.txt su un server web. Apri il file testAngularJS.htm utilizzando l'URL del tuo server in un browser web e guarda il risultato.
AngularJS supporta l'applicazione a pagina singola tramite più visualizzazioni su una singola pagina. Per fare ciò AngularJS ha fornito le direttive ng-view e ng-template e i servizi $ routeProvider.
ng-view
Il tag ng-view crea semplicemente un segnaposto in cui è possibile posizionare una vista corrispondente (vista html o ng-template) in base alla configurazione.
Utilizzo
Definisci un div con ng-view all'interno del modulo principale.
<div ng-app = "mainApp">
...
<div ng-view></div>
</div>ng-template
La direttiva ng-template viene utilizzata per creare una visualizzazione html utilizzando il tag script. Contiene l'attributo "id" che viene utilizzato da $ routeProvider per mappare una vista con un controller.
Utilizzo
Definisci un blocco di script con tipo come ng-template all'interno del modulo principale.
<div ng-app = "mainApp">
...
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
</div>$ routeProvider
$ routeProvider è il servizio chiave che imposta la configurazione degli URL, li mappa con la pagina html o ng-template corrispondente e collega un controller con lo stesso.
Utilizzo
Definire un blocco di script con il modulo principale e impostare la configurazione del routing.
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm', controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
})
.otherwise ({
redirectTo: '/addStudent'
});
}]);Di seguito sono riportati i punti importanti da considerare nell'esempio precedente.
$ routeProvider è definita come una funzione nella configurazione del modulo mainApp utilizzando la chiave come '$ routeProvider'.
$ routeProvider.when definisce un URL "/ addStudent" che viene quindi mappato a "addStudent.htm". addStudent.htm dovrebbe essere presente nello stesso percorso della pagina html principale. Se la pagina htm non è definita, allora ng-template deve essere usato con id = "addStudent.htm". Abbiamo usato ng-template.
"altrimenti" viene utilizzato per impostare la visualizzazione predefinita.
"controller" viene utilizzato per impostare il controller corrispondente per la visualizzazione.
Esempio
L'esempio seguente mostrerà tutte le direttive sopra menzionate.
testAngularJS.htm
<html>
<head>
<title>Angular JS Views</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp">
<p><a href = "#addStudent">Add Student</a></p>
<p><a href = "#viewStudents">View Students</a></p>
<div ng-view></div>
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
})
.otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
</script>
</body>
</html>Risultato
Apri textAngularJS.htm in un browser web. Guarda il risultato.
Scope è uno speciale oggetto javascript che svolge il ruolo di unire il controller alle viste. L'ambito contiene i dati del modello. Nei controller, si accede ai dati del modello tramite l'oggetto $ scope.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>Di seguito sono riportati i punti importanti da considerare nell'esempio precedente.
$ scope viene passato come primo argomento al controller durante la definizione del costruttore.
$ scope.message e $ scope.type sono i modelli che devono essere utilizzati nella pagina HTML.
Abbiamo impostato valori sui modelli che si rifletteranno nel modulo dell'applicazione il cui controller è shapeController.
Possiamo definire anche funzioni in $ scope.
Ereditarietà dell'ambito
L'ambito è specifico del controller. Se definiamo controller nidificati, il controller figlio erediterà l'ambito del controller padre.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
</script>Di seguito sono riportati i punti importanti da considerare nell'esempio precedente.
Abbiamo impostato i valori sui modelli in shapeController.
Abbiamo sovrascritto il messaggio nel controller figlio circleController. Quando "messaggio" viene utilizzato all'interno del modulo del controller circleController, verrà utilizzato il messaggio sovrascritto.
Esempio
L'esempio seguente mostrerà tutte le direttive sopra menzionate.
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller = "circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller = "squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});
</script>
</body>
</html>Risultato
Apri textAngularJS.htm in un browser web. Guarda il risultato.
AngularJS supporta i concetti di "Separation of Concerns" utilizzando l'architettura dei servizi. I servizi sono funzioni javascript e sono responsabili di eseguire solo attività specifiche. Questo li rende un'entità individuale che è gestibile e verificabile. I controller, i filtri possono chiamarli in base ai requisiti. I servizi vengono normalmente iniettati utilizzando il meccanismo di iniezione delle dipendenze di AngularJS.
AngularJS fornisce molti servizi integrati, ad esempio $ https :, $ route, $ window, $ location ecc. Ogni servizio è responsabile di un'attività specifica, ad esempio $ https: viene utilizzato per effettuare una chiamata ajax per ottenere i dati del server. $ route viene utilizzato per definire le informazioni di instradamento e così via. I servizi incorporati sono sempre preceduti dal simbolo $.
Esistono due modi per creare un servizio.
- factory
- service
Utilizzando il metodo di fabbrica
Usando il metodo factory, definiamo prima una factory e poi le assegniamo il metodo.
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});Utilizzo del metodo di servizio
Utilizzando il metodo di servizio, definiamo un servizio e quindi gli assegniamo il metodo. Gli abbiamo anche inserito un servizio già disponibile.
mainApp.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a,a);
}
});Esempio
L'esempio seguente mostrerà tutte le direttive sopra menzionate.
testAngularJS.htm
<html>
<head>
<title>Angular JS Services</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>Enter a number: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
mainApp.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a,a);
}
});
mainApp.controller('CalcController', function($scope, CalcService) {
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>Risultato
Apri textAngularJS.htm in un browser web. Guarda il risultato.
Dependency Injection è un modello di progettazione del software in cui ai componenti vengono assegnate le loro dipendenze invece di codificarle come hardcoded all'interno del componente. Ciò solleva un componente dall'individuazione della dipendenza e rende le dipendenze configurabili. Questo aiuta a rendere i componenti riutilizzabili, manutenibili e testabili.
AngularJS fornisce un meccanismo di iniezione delle dipendenze supremo. Fornisce i seguenti componenti principali che possono essere iniettati l'uno nell'altro come dipendenze.
- value
- factory
- service
- provider
- constant
valore
value è un semplice oggetto javascript e viene utilizzato per passare valori al controller durante la fase di configurazione.
//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});fabbrica
factory è una funzione che viene utilizzata per restituire valore. Crea valore su richiesta ogni volta che un servizio o un controller lo richiede. Normalmente utilizza una funzione di fabbrica per calcolare e restituire il valore.
//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a,a);
}
});
...servizio
service è un oggetto javascript singleton contenente un insieme di funzioni per eseguire determinate attività. I servizi vengono definiti utilizzando le funzioni service () e quindi iniettati nei controller.
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a,a);
}
});
//inject the service "CalcService" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});provider
provider viene utilizzato da AngularJS internamente per creare servizi, factory ecc. durante la fase di configurazione (fase durante la quale AngularJS si avvia da solo). Lo script menzionato di seguito può essere utilizzato per creare MathService che abbiamo creato in precedenza. Provider è un metodo factory speciale con un metodo get () che viene utilizzato per restituire il valore / service / factory.
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});costante
le costanti vengono utilizzate per passare i valori in fase di configurazione considerando il fatto che il valore non può essere utilizzato per essere passato durante la fase di configurazione.
mainApp.constant("configParam", "constant value");Esempio
L'esempio seguente mostrerà tutte le direttive sopra menzionate.
testAngularJS.htm
<html>
<head>
<title>AngularJS Dependency Injection</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>Enter a number: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
mainApp.value("defaultInput", 5);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
});
mainApp.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a,a);
}
});
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>Risultato
Apri textAngularJS.htm in un browser web. Guarda il risultato.
Le direttive personalizzate vengono utilizzate in AngularJS per estendere la funzionalità dell'HTML. Le direttive personalizzate vengono definite utilizzando la funzione "direttiva". Una direttiva personalizzata sostituisce semplicemente l'elemento per cui è attivata. L'applicazione AngularJS durante il bootstrap trova gli elementi corrispondenti ed esegue un'attività una tantum utilizzando il suo metodo compile () della direttiva personalizzata, quindi elabora l'elemento utilizzando il metodo link () della direttiva personalizzata in base all'ambito della direttiva. AngularJS fornisce supporto per creare direttive personalizzate per i seguenti tipi di elementi.
Element directives - La direttiva si attiva quando viene rilevato un elemento corrispondente.
Attribute - La direttiva si attiva quando viene rilevato un attributo corrispondente.
CSS - La direttiva si attiva quando si incontra uno stile CSS corrispondente.
Comment - La direttiva si attiva quando si incontra un commento corrispondente.
Comprensione della direttiva personalizzata
Definisci tag html personalizzati.
<student name = "Mahesh"></student><br/>
<student name = "Piyush"></student>Definisci la direttiva personalizzata da gestire sopra i tag html personalizzati.
var mainApp = angular.module("mainApp", []);
//Create a directive, first parameter is the html element to be attached.
//We are attaching student html tag.
//This directive will be activated as soon as any student element is encountered in html
mainApp.directive('student', function() {
//define the directive object
var directive = {};
//restrict = E, signifies that directive is Element directive
directive.restrict = 'E';
//template replaces the complete element with its text.
directive.template = "Student: <b>{{student.name}}</b> ,
Roll No: <b>{{student.rollno}}</b>";
//scope is used to distinguish each student element based on criteria.
directive.scope = {
student : "=name"
}
//compile is called during application initialization. AngularJS calls
it once when html page is loaded.
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
//linkFunction is linked with each element with scope to get the element specific data.
var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> ,
Roll No: <b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});Definire il controller per aggiornare l'ambito della direttiva. Qui stiamo usando il valore dell'attributo name come figlio dell'ambito.
mainApp.controller('StudentController', function($scope) {
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.rollno = 2;
});Esempio
<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "StudentController">
<student name = "Mahesh"></student><br/>
<student name = "Piyush"></student>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('student', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Student: <b>{{student.name}}</b> ,
Roll No: <b>{{student.rollno}}</b>";
directive.scope = {
student : "=name"
}
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> ,
Roll No: <b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
mainApp.controller('StudentController', function($scope) {
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.rollno = 1;
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.rollno = 2;
});
</script>
</body>
</html>Risultato
Apri textAngularJS.htm in un browser web. Guarda il risultato.
AngularJS supporta l'internazionalizzazione integrata per tre tipi di filtri valuta, data e numeri. Abbiamo solo bisogno di incorporare js corrispondenti in base alla località del paese. Per impostazione predefinita, gestisce le impostazioni locali del browser. Ad esempio, per utilizzare la lingua danese, utilizzare il seguente script.
<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js">
</script>Esempio utilizzando la lingua danese
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "StudentController">
{{fees | currency }} <br/><br/>
{{admissiondate | date }} <br/><br/>
{{rollno | number }}
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src = "https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('StudentController', function($scope) {
$scope.fees = 100;
$scope.admissiondate = new Date();
$scope.rollno = 123.45;
});
</script>
</body>
</html>Risultato
Apri textAngularJS.htm in un browser web. Guarda il risultato.
Esempio di utilizzo delle impostazioni internazionali del browser
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "StudentController">
{{fees | currency }} <br/><br/>
{{admissiondate | date }} <br/><br/>
{{rollno | number }}
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<!-- <script src = "https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js">
</script> -->
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('StudentController', function($scope) {
$scope.fees = 100;
$scope.admissiondate = new Date();
$scope.rollno = 123.45;
});
</script>
</body>
</html>Risultato
Apri textAngularJS.htm in un browser web. Guarda il risultato.
AngularJS supporta l'internazionalizzazione integrata per tre tipi di filtri: valuta, data e numeri. Abbiamo solo bisogno di incorporare lo script java corrispondente in base alle impostazioni locali del paese. Per impostazione predefinita, considera le impostazioni internazionali del browser. Ad esempio, per la lingua danese, utilizzare il seguente script:
<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js">
</script>Esempio utilizzando la lingua danese
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "StudentController">
{{fees | currency }} <br/><br/>
{{admissiondate | date }} <br/><br/>
{{rollno | number }}
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src = "https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('StudentController', function($scope) {
$scope.fees = 100;
$scope.admissiondate = new Date();
$scope.rollno = 123.45;
});
</script>
</body>
</html>Produzione
Apri il file testAngularJS.htm in un browser web e guarda il risultato.
Esempio di utilizzo delle impostazioni internazionali del browser
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "StudentController">
{{fees | currency }} <br/><br/>
{{admissiondate | date }} <br/><br/>
{{rollno | number }}
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<!-- <script src = "https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js">
</script> -->
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('StudentController', function($scope) {
$scope.fees = 100;
$scope.admissiondate = new Date();
$scope.rollno = 123.45;
});
</script>
</body>
</html>Produzione
Apri il file testAngularJS.htm in un browser web e guarda il risultato.