AngularJS è un framework per creare applicazioni Web su larga scala e ad alte prestazioni mantenendole facili da mantenere. Di seguito sono riportate le caratteristiche del framework AngularJS.
Components- La versione precedente di Angular era focalizzata sui controller, ma ora ha cambiato l'attenzione per avere componenti sui controller. I componenti aiutano a costruire le applicazioni in molti moduli. Questo aiuta a mantenere meglio l'applicazione per un periodo di tempo.
TypeScript- La versione più recente di Angular è basata su TypeScript. Questo è un superset di JavaScript ed è gestito da Microsoft.
Services- I servizi sono un insieme di codice che può essere condiviso da diversi componenti di un'applicazione. Quindi, ad esempio, se avessi un componente dati che raccoglie dati da un database, potresti averlo come servizio condiviso che potrebbe essere utilizzato su più applicazioni.
Angular 2 ha i seguenti componenti:
Modules- Viene utilizzato per suddividere l'applicazione in parti logiche di codice. Ogni parte di codice o modulo è progettato per eseguire una singola operazione.
Component - Questo può essere utilizzato per riunire i moduli.
Templates - Viene utilizzato per definire le viste di un'applicazione JS angolare.
Metadata - Questo può essere usato per aggiungere più dati a una classe JS angolare.
Service - Viene utilizzato per creare componenti che possono essere condivisi nell'intera applicazione.
I moduli vengono utilizzati in Angular JS per inserire limiti logici nella tua applicazione. Quindi, invece di codificare tutto in un'unica applicazione, puoi invece creare tutto in moduli separati per separare la funzionalità della tua applicazione. Un modulo è composto dalle seguenti parti:
Bootstrap array- Viene utilizzato per indicare ad Angular JS quali componenti devono essere caricati in modo che sia possibile accedere alle sue funzionalità nell'applicazione. Una volta incluso il componente nell'array bootstrap, è necessario dichiararli in modo che possano essere utilizzati su altri componenti nell'applicazione Angular JS.
Export array - Viene utilizzato per esportare componenti, direttive e tubi che possono essere utilizzati in altri moduli.
Import array - Proprio come l'array di esportazione, l'array di importazione può essere utilizzato per importare la funzionalità da altri moduli JS angolari.
Ogni applicazione è composta da componenti. Ogni componente è un confine logico di funzionalità per l'applicazione. È necessario disporre di servizi a più livelli, utilizzati per condividere la funzionalità tra i componenti. Di seguito è riportata l'anatomia di un componente. Un componente è costituito da:
Class - È come una classe C o Java composta da proprietà e metodi.
Metadata - Viene utilizzato per decorare la classe ed estendere le funzionalità della classe.
Template - Viene utilizzato per definire la visualizzazione HTML che viene visualizzata nell'applicazione.
Una direttiva è un elemento HTML personalizzato utilizzato per estendere la potenza dell'HTML. Angular 2 ha le seguenti direttive che vengono chiamate come parte del modulo BrowserModule.
ngIf -
Il ngif elemento viene utilizzato per aggiungere elementi al codice HTML se restituisce true, altrimenti non aggiungerà gli elementi al codice HTML.
Sintassi
*ngIf = 'expression'Se l'espressione restituisce true, viene aggiunto il corrispondente, altrimenti gli elementi non vengono aggiunti.
ngFor -
Il ngFor elemento viene utilizzato per gli elementi in base alla condizione del ciclo For.
Sintassi
*ngFor = 'let variable of variablelist'La variabile è una variabile temporanea per visualizzare i valori in variablelist.
Le applicazioni Angular 2 hanno la possibilità di gestire gli errori. Questo viene fatto includendo la libreria catch di ReactJS e quindi utilizzando la funzione catch.
La funzione catch contiene un collegamento alla funzione Error Handler.
Nella funzione di gestione degli errori, inviamo l'errore alla console. Inoltre restituiamo l'errore al programma principale in modo che l'esecuzione possa continuare.
Ora, ogni volta che ricevi un errore, verrà reindirizzato alla console degli errori del browser.
Il routing aiuta a indirizzare gli utenti a pagine diverse in base all'opzione che scelgono nella pagina principale. Quindi, in base all'opzione scelta, il componente angolare richiesto verrà reso all'utente.
Command Line Interface (CLI) può essere utilizzata per creare la nostra applicazione JS angolare. Aiuta anche a creare un'unità e test end-to-end per l'applicazione.
L'inserimento delle dipendenze è la capacità di aggiungere la funzionalità dei componenti in fase di esecuzione. Diamo un'occhiata a un esempio e ai passaggi utilizzati per implementare l'inserimento delle dipendenze.
Step 1- Creare una classe separata che abbia il decoratore iniettabile. Il decoratore iniettabile consente di iniettare e utilizzare le funzionalità di questa classe in qualsiasi modulo JS angolare.
@Injectable()
export class classname {
}Step 2 - Successivamente nel modulo appComponent o nel modulo in cui desideri utilizzare il servizio, devi definirlo come provider nel decoratore @Component.
@Component ({
providers : [classname]
})Questo file viene utilizzato per fornire le opzioni su TypeScript utilizzato per il progetto Angular JS.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}Di seguito sono riportati alcuni punti chiave da notare sul codice sopra.
L'obiettivo per la compilazione è es5 e questo perché la maggior parte dei browser può comprendere solo il dattiloscritto ES5.
L'opzione sourceMap viene utilizzata per generare file Map, utili durante il debug. Quindi, durante lo sviluppo è bene mantenere questa opzione vera.
Il "emitDecoratorMetadata": true e "experimentDecorators": true è richiesto per i decoratori JS Angular. Se non è presente, l'applicazione Angular JS non verrà compilata.
Questo file contiene informazioni sul progetto Angular 2. Di seguito sono riportate le impostazioni tipiche nel file.
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation,
supplemented with testing support",
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --killothers --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/common": "<2.4.0",
"@angular/compiler": "<2.4.0",
"@angular/core": "<2.4.0",
"@angular/forms": "<2.4.0",
"@angular/http": "<2.4.0",
"@angular/platform-browser": "<2.4.0",
"@angular/platform-browser-dynamic": "<2.4.0",
"@angular/router": "<3.4.0",
"angular-in-memory-web-api": <0.2.4",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
"typescript": "<2.0.10",
"canonical-path": "0.0.2",
"tslint": "^3.15.1",
"lodash": "^4.16.4",
"jasmine-core": "<2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": <4.0.14",
"rimraf": "^2.5.4",
"@types/node": "^6.0.46",
"@types/jasmine": "2.5.36"
},
"repository": {}
}Alcuni punti chiave da notare sul codice sopra -
Esistono due tipi di dipendenze, prima le dipendenze e poi ci sono le dipendenze dev. Quelli di sviluppo sono necessari durante il processo di sviluppo e gli altri sono necessari per eseguire l'applicazione.
Il comando "build: watch": "tsc -p src / -w" viene utilizzato per compilare il dattiloscritto in background cercando le modifiche nei file del dattiloscritto.
Questo file contiene i file di sistema richiesti per l'applicazione Angular JS. Questo carica tutti i file di script necessari senza la necessità di aggiungere un tag di script alle pagine html. I file tipici avranno il seguente codice.
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);Alcuni punti chiave da notare sul codice sopra -
'npm:': 'node_modules /' indica la posizione nel nostro progetto in cui si trovano tutti i moduli npm.
La mappatura dell'app: "app" indica la cartella in cui vengono caricati tutti i file delle nostre applicazioni.
Il codice seguente sarà presente nel file app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }Esaminiamo in dettaglio ogni riga del codice.
L'istruzione import viene utilizzata per importare funzionalità dai moduli esistenti. Pertanto, le prime 3 istruzioni vengono utilizzate per importare i moduli NgModule, BrowserModule e AppComponent in questo modulo.
Il decoratore NgModule viene utilizzato per definire successivamente le opzioni di importazione, dichiarazioni e bootstrap.
Il BrowserModule è richiesto per impostazione predefinita per qualsiasi applicazione angolare basata sul web.
L'opzione bootstrap dice ad Angular quale componente avviare nell'applicazione.
filtro minuscolo viene utilizzato per convertire l'input in tutto minuscolo.
Nell'esempio seguente, abbiamo aggiunto un filtro in minuscolo a un'espressione utilizzando il carattere pipe. Qui abbiamo aggiunto il filtro in minuscolo per stampare il nome dello studente in tutte le lettere minuscole.
<div>
The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | lowercase}}
The second Topic is {{appList[1] | lowercase}}
The third Topic is {{appList[2]| lowercase}}
</div>Il filtro maiuscolo viene utilizzato per convertire l'input in tutto maiuscolo.
Nell'esempio seguente, abbiamo aggiunto il filtro maiuscolo a un'espressione utilizzando il carattere pipe. Qui abbiamo aggiunto il filtro maiuscolo per stampare il nome dello studente in tutte le lettere maiuscole.
<div>
The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | uppercase}}
The second Topic is {{appList[1] | uppercase}}
The third Topic is {{appList[2]| uppercase}}
</div>Il filtro slice viene utilizzato per suddividere un pezzo di dati dalla stringa di input.
Nell'esempio seguente, abbiamo aggiunto il filtro delle sezioni a un'espressione utilizzando il carattere pipe. Qui il valore della proprietà verrà suddiviso in base alle posizioni iniziale e finale.
<div>
The name of this Tutorial is {{TutorialName}}
The first Topic is {{appList[0] | slice:1:2}}
The second Topic is {{appList[1] | slice:1:3}}
The third Topic is {{appList[2]| slice:2:3}}
</div>il filtro della data viene utilizzato per convertire la stringa di input nel formato della data.
Nell'esempio seguente, abbiamo aggiunto il filtro della data a un'espressione utilizzando il carattere pipe. Qui il valore della proprietà verrà convertito nel formato della data.
<div>
The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}
</div>il filtro valuta viene utilizzato per convertire la stringa di input nel formato valuta.
Nell'esempio seguente, abbiamo aggiunto il filtro di valuta a un'espressione utilizzando il carattere pipe. Qui il valore della proprietà verrà convertito in formato valuta.
<div>
The currency of this Tutorial is {{newValue | currency}}
</div>Il filtro percentuale viene utilizzato per convertire la stringa di input in formato percentuale.
Nell'esempio seguente, abbiamo aggiunto il filtro percentuale a un'espressione utilizzando il carattere pipe. Qui il valore della proprietà verrà convertito in formato percentuale.
<div>
The percentage of this Tutorial is {{newValue | percent}}
</div>Quando il valore di una proprietà associata a dati cambia, viene chiamato questo metodo.
Questo viene chiamato ogni volta che si verifica l'inizializzazione della direttiva / componente dopo che Angular ha visualizzato per la prima volta le proprietà associate ai dati.
Questo serve per il rilevamento e per agire sui cambiamenti che Angular non può o non rileva da solo.
Questo viene chiamato in risposta dopo che Angular proietta il contenuto esterno nella vista del componente.
Questo viene chiamato in risposta dopo che Angular ha verificato il contenuto proiettato nel componente.
Questo viene chiamato in risposta dopo che Angular ha inizializzato le viste del componente e le viste figlio.
Questo viene chiamato in risposta dopo che Angular ha verificato le visualizzazioni del componente e le visualizzazioni figlio.
Questa è la fase di pulizia appena prima che Angular distrugga la direttiva / componente.