AngularJS est un framework pour créer des applications Web à grande échelle et haute performance tout en les gardant aussi faciles à entretenir. Voici les fonctionnalités du framework AngularJS.
Components- La version antérieure d'Angular était axée sur les contrôleurs, mais a maintenant changé la priorité pour avoir des composants sur les contrôleurs. Les composants aident à construire les applications dans de nombreux modules. Cela aide à mieux maintenir l'application sur une période de temps.
TypeScript- La nouvelle version d'Angular est basée sur TypeScript. Ceci est un sur-ensemble de JavaScript et est maintenu par Microsoft.
Services- Les services sont un ensemble de code qui peut être partagé par différents composants d'une application. Ainsi, par exemple, si vous aviez un composant de données qui sélectionnait des données dans une base de données, vous pourriez l'avoir en tant que service partagé pouvant être utilisé dans plusieurs applications.
Angular 2 a les composants suivants -
Modules- Ceci est utilisé pour diviser l'application en morceaux logiques de code. Chaque morceau de code ou module est conçu pour effectuer une seule tâche.
Component - Cela peut être utilisé pour rassembler les modules.
Templates - Ceci est utilisé pour définir les vues d'une application Angular JS.
Metadata - Cela peut être utilisé pour ajouter plus de données à une classe Angular JS.
Service - Ceci est utilisé pour créer des composants qui peuvent être partagés dans toute l'application.
Les modules sont utilisés dans Angular JS pour définir des limites logiques dans votre application. Par conséquent, au lieu de tout coder dans une seule application, vous pouvez à la place tout construire dans des modules séparés pour séparer les fonctionnalités de votre application. Un module est composé des éléments suivants -
Bootstrap array- Ceci est utilisé pour indiquer à Angular JS quels composants doivent être chargés afin que ses fonctionnalités soient accessibles dans l'application. Une fois que vous avez inclus le composant dans le tableau d'amorçage, vous devez les déclarer afin qu'ils puissent être utilisés sur d'autres composants de l'application Angular JS.
Export array - Ceci est utilisé pour exporter des composants, des directives et des tubes qui peuvent ensuite être utilisés dans d'autres modules.
Import array - Tout comme le tableau d'exportation, le tableau d'importation peut être utilisé pour importer les fonctionnalités d'autres modules Angular JS.
Chaque application se compose de composants. Chaque composant est une limite logique de fonctionnalité pour l'application. Vous devez disposer de services en couches, qui sont utilisés pour partager la fonctionnalité entre les composants. Voici l'anatomie d'un composant. Un composant se compose de -
Class - C'est comme une classe C ou Java qui se compose de propriétés et de méthodes.
Metadata - Ceci est utilisé pour décorer la classe et étendre les fonctionnalités de la classe.
Template - Ceci est utilisé pour définir la vue HTML qui est affichée dans l'application.
Une directive est un élément HTML personnalisé utilisé pour étendre la puissance du HTML. Angular 2 a les directives suivantes qui sont appelées dans le cadre du module BrowserModule.
ngIf -
le ngif element est utilisé pour ajouter des éléments au code HTML s'il est évalué à true, sinon il n'ajoutera pas les éléments au code HTML.
Syntaxe
*ngIf = 'expression'Si l'expression prend la valeur true, alors le correspondant est ajouté, sinon les éléments ne sont pas ajoutés.
ngFor -
le ngFor element est utilisé pour les éléments basés sur la condition de la boucle For.
Syntaxe
*ngFor = 'let variable of variablelist'La variable est une variable temporaire pour afficher les valeurs dans le variablelist.
Les applications Angular 2 ont la possibilité de gérer les erreurs. Cela se fait en incluant la bibliothèque catch ReactJS, puis en utilisant la fonction catch.
La fonction catch contient un lien vers la fonction Error Handler.
Dans la fonction de gestionnaire d'erreurs, nous envoyons l'erreur à la console. Nous renvoyons également l'erreur au programme principal afin que l'exécution puisse continuer.
Désormais, chaque fois que vous obtenez une erreur, elle sera redirigée vers la console d'erreur du navigateur.
Le routage aide à diriger les utilisateurs vers différentes pages en fonction de l'option qu'ils choisissent sur la page principale. Par conséquent, en fonction de l'option choisie, le composant angulaire requis sera rendu à l'utilisateur.
L'interface de ligne de commande (CLI) peut être utilisée pour créer notre application Angular JS. Il aide également à créer une unité et des tests de bout en bout pour l'application.
L'injection de dépendances est la possibilité d'ajouter la fonctionnalité des composants au moment de l'exécution. Jetons un coup d'œil à un exemple et aux étapes utilisées pour implémenter l'injection de dépendances.
Step 1- Créez une classe distincte qui a le décorateur injectable. Le décorateur injectable permet à la fonctionnalité de cette classe d'être injectée et utilisée dans n'importe quel module Angular JS.
@Injectable()
export class classname {
}Step 2 - Ensuite, dans votre module appComponent ou dans le module dans lequel vous souhaitez utiliser le service, vous devez le définir en tant que fournisseur dans le décorateur @Component.
@Component ({
providers : [classname]
})Ce fichier est utilisé pour donner les options sur TypeScript utilisées pour le projet Angular JS.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}Voici quelques points clés à noter concernant le code ci-dessus.
La cible de la compilation est es5 et c'est parce que la plupart des navigateurs ne peuvent comprendre que le typographie ES5.
L'option sourceMap est utilisée pour générer des fichiers Map, qui sont utiles lors du débogage. Par conséquent, pendant le développement, il est bon de garder cette option comme vraie.
Le "emitDecoratorMetadata": true et "experimentalDecorators": true est requis pour les décorateurs Angular JS. Si ce n'est pas en place, l'application Angular JS ne se compilera pas.
Ce fichier contient des informations sur le projet Angular 2. Voici les paramètres typiques du fichier.
{
"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": {}
}Quelques points clés à noter à propos du code ci-dessus -
Il existe deux types de dépendances, d'abord les dépendances et ensuite les dépendances de développement. Les développeurs sont nécessaires pendant le processus de développement et les autres sont nécessaires pour exécuter l'application.
La commande "build: watch": "tsc -p src / -w" est utilisée pour compiler le manuscrit en arrière-plan en recherchant les changements dans les fichiers dactylographiés.
Ce fichier contient les fichiers système requis pour l'application Angular JS. Cela charge tous les fichiers de script nécessaires sans qu'il soit nécessaire d'ajouter une balise de script aux pages html. Les fichiers typiques auront le code suivant.
/**
* 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);Quelques points clés à noter à propos du code ci-dessus -
'npm:': 'node_modules /' indique l'emplacement dans notre projet où se trouvent tous les modules npm.
Le mappage de l'application: 'app' indique le dossier dans lequel tous nos fichiers d'application sont chargés.
Le code suivant sera présent dans le app.module.ts fichier.
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 { }Passons en revue chaque ligne du code en détail.
L'instruction import est utilisée pour importer des fonctionnalités à partir des modules existants. Ainsi, les 3 premières instructions sont utilisées pour importer les modules NgModule, BrowserModule et AppComponent dans ce module.
Le décorateur NgModule est utilisé pour définir ultérieurement les options d'importation, de déclaration et d'amorçage.
Le BrowserModule est requis par défaut pour toute application angulaire basée sur le Web.
L'option bootstrap indique à Angular quel composant démarrer dans l'application.
un filtre en minuscules est utilisé pour convertir l'entrée en minuscules.
Dans l'exemple ci-dessous, nous avons ajouté un filtre en minuscules à une expression en utilisant le caractère pipe. Ici, nous avons ajouté un filtre en minuscules pour imprimer le nom de l'élève dans toutes les lettres minuscules.
<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>Le filtre en majuscules est utilisé pour convertir l'entrée en majuscules.
Dans l'exemple ci-dessous, nous avons ajouté un filtre en majuscules à une expression en utilisant le caractère pipe. Ici, nous avons ajouté un filtre en majuscules pour imprimer le nom de l'élève dans toutes les lettres majuscules.
<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>Le filtre de tranche est utilisé pour découper une donnée de la chaîne d'entrée.
Dans l'exemple ci-dessous, nous avons ajouté un filtre de tranche à une expression à l'aide du caractère de tube. Ici, la valeur de la propriété sera découpée en fonction des positions de début et de fin.
<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>le filtre de date est utilisé pour convertir la chaîne d'entrée au format de date.
Dans l'exemple ci-dessous, nous avons ajouté un filtre de date à une expression à l'aide du caractère pipe. Ici, la valeur de la propriété sera convertie au format de date.
<div>
The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}
</div>le filtre de devise est utilisé pour convertir la chaîne d'entrée au format de devise.
Dans l'exemple ci-dessous, nous avons ajouté un filtre de devise à une expression à l'aide du caractère pipe. Ici, la valeur de la propriété sera convertie au format monétaire.
<div>
The currency of this Tutorial is {{newValue | currency}}
</div>Le filtre de pourcentage est utilisé pour convertir la chaîne d'entrée au format de pourcentage.
Dans l'exemple ci-dessous, nous avons ajouté un filtre de pourcentage à une expression à l'aide du caractère pipe. Ici, la valeur de la propriété sera convertie au format pourcentage.
<div>
The percentage of this Tutorial is {{newValue | percent}}
</div>Lorsque la valeur d'une propriété liée aux données change, cette méthode est appelée.
Ceci est appelé chaque fois que l'initialisation de la directive / du composant après qu'Angular a d'abord affiché les propriétés liées aux données se produit.
C'est pour la détection et pour agir sur les changements qu'Angular ne peut pas ou ne détectera pas par lui-même.
Ceci est appelé en réponse après que Angular projette du contenu externe dans la vue du composant.
Ceci est appelé en réponse après qu'Angular vérifie le contenu projeté dans le composant.
Ceci est appelé en réponse après qu'Angular a initialisé les vues et les vues enfants du composant.
Ceci est appelé en réponse après qu'Angular vérifie les vues et les vues enfants du composant.
C'est la phase de nettoyage juste avant qu'Angular ne détruit la directive / le composant.