Introduction à l'application JS angulaire

Angular JS est une application open source. Il a été écrit en JavaScript. Angular JS a été développé en 2010 par Google. L'application JS angulaire fournit également une référence dynamique aux applications Web et aux pages. Angular JS vous permet d'étendre le vocabulaire HTML de votre application. Angular JS est utilisé parce que HTML vacille lorsqu'il est essayé d'utiliser pour déclarer les vues dynamiques dans les applications Web. Angular JS est appelé le jeu d'outils pour construire le Framework le plus adapté au développement de votre application.

Les fonctionnalités du framework JS angulaire peuvent être modifiées ou remplacées, réutilisées pour convenir à un flux de travail plus spécifique ou uniques et pour référence future. Il est entièrement extensible et fonctionne également avec d'autres bibliothèques. Le code d'application AngularJS est simple dans les anciens objets javascript. Il rend votre code à tester, à maintenir, à réutiliser. Dans JS angulaire, il n'est pas nécessaire d'hériter des types propriétaires pour envelopper les modèles dans des méthodes d'accesseurs comme nous devons le faire dans d'autres. Angular JS a suivi les derniers concepts de développement.

Concepts d'application angulaire JS

Les concepts de l'application Angular JS avec leurs exemples sont les suivants:

  • Directives pour étendre les attributs HTML

La directive de fonctionnalité est unique et disponible dans d'autres cadres. Les directives sont écrites facilement et peuvent également être génériques car elles peuvent être écrites une seule fois et réutilisées plusieurs fois. Les directives sont vraiment utiles et il existe de nombreuses raisons de les utiliser, comme lorsque vous avez des besoins spéciaux comme la grille personnalisée ou d'autres fonctionnalités, la directive que vous souhaitez n'existe pas encore. La directive d'application Angular JS commence par 'ng-' comme ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src, etc.

Exemple:

Boucle avec ng-repeat:

    (( X ))

  • Portée

Il est utilisé pour la communication entre le contrôleur et la vue. Il lie une vue au modèle de vue et les fonctions définies dans le contrôleur Angular JS Application prend en charge les étendues imbriquées ou hiérarchiques. Il s'agit d'une source de données pour Angular JS Application et il peut ajouter ou supprimer des propriétés si nécessaire. Toutes les manipulations de données et affectations de données se produisent via l'objet scope quand effectuer l'opération CRUD.

  • Contrôleurs

Ceux-ci sont utilisés pour définir la portée des vues et la portée peut être considérée comme des variables et des fonctions que la vue peut utiliser une certaine liaison.

Exemple:




First Name:

Last Name:


Full Name: ((firstName + " " + lastName))

var app = angular.module('myApp', ());
app.controller('myCtrl', function ($scope) (
$scope.firstName = "James";
$scope.lastName = "Anderson";
));

  • Liaison de données

Il synchronise les données entre le modèle et la vue. Cela signifie que le changement de modèle mettra à jour la vue. La directive ng-model est utilisée pour la liaison de données bidirectionnelle.

Exemple:
Lorsque l'utilisateur tape dans la zone de texte, la valeur modifiée s'affiche en majuscules et en minuscules dans une étiquette qui est une liaison de données bidirectionnelle.

  • Prestations de service

Il est utilisé lorsque l'état a été partagé dans l'application et nécessite une solution de stockage de données. Il peut s'agir d'un singleton et peut être utilisé par d'autres composants tels que des directives, des contrôleurs et d'autres services. Les services utilisés sont $ http, $ location, $ log, $ route, $ filter, $ document, $ timeout, $ exceptionHandler.

  • Acheminement

Il aide à diviser l'application en plusieurs vues et à lier plusieurs vues aux contrôleurs. Il divise le SPA en plusieurs vues pour diviser logiquement l'application et la rendre plus gérable.

Exemple: route par défaut

App.config(('$routeProvider',
function($routeProvider)
(
$routeProvider.
when('/List',
(
templateUrl: 'Views/list.html',
controller: 'ListController'
)).
when('/Add',
(
templateUrl: 'Views/add.html',
controller: 'AddController'
).
otherwise((
redirectTo: '/List'
));
)));

  • Filtres

Ils sont utilisés pour étendre le comportement de l'expression et de la directive de liaison. Il permet de formater les données et de formater des valeurs ou d'appliquer certaines conditions. Les filtres sont invoqués en HTML avec le tube à l'intérieur des expressions.

Exemple:

< html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

 html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

Entrée de filtrage:

    (((x.name | majuscule) + ', ' + x.age + ', ' + x.city))

  • Expressions

Les expressions (()) sont le moyen déclaratif de spécifier l'emplacement de liaison de données en HTML et d'utiliser une expression pour la liaison de données. Il peut être ajouté dans des modèles HTML et ne prend pas en charge les instructions de flux de contrôle, mais il prend en charge des filtres pour formater les données avant de les afficher.

Exemple:

Saisissez quelque chose dans la zone de saisie:

Nom:

Vous avez écrit: ((firstName))

  • Modules

    Le module est le conteneur d'une application et les contrôleurs d'application appartiennent au module. Il s'agit d'une collection de fonctions et divise l'application en un petit composant fonctionnel réutilisable. Un module peut être identifié par un nom unique et peut dépendre d'autres modules.

Exemple:



//Referring module name myApp
(( firstName + " " + lastName ))


  • Essai

Pour tester le code de l'application Angular JS, les frameworks de test sont largement utilisés comme Jasmine et karma. Ces frameworks de test prennent principalement en charge la simulation et sont hautement configurables à l'aide d'un fichier JSON à l'aide de divers plug-in Angular JS Application.

Conclusion - Application JS angulaire

Angular JS fournit le cadre qui a des directives uniques et des fonctionnalités puissantes. Les directives nous aident à construire la nouvelle syntaxe HTML qui est principalement spécifique à une application. Il est utilisé comme composants réutilisables. Le composant vous permet de masquer une structure complexe et d'autres comportements. L'accent serait mis uniquement sur ce que fait l'application et à quoi elle ressemble séparément. L'application JS angulaire est de plus en plus populaire de nos jours, car il est facile d'apprendre et de développer l'application. Il existe de nombreuses opportunités sur le marché pour le développeur front-end. Si vous êtes bon avec JavaScript, alors Angular JS ne sera pas difficile pour vous d'apprendre et de mettre à jour vos compétences avec cette technologie serait une excellente idée.

Articles recommandés

Cet article a été un guide pour l'application JS angulaire. Ici, nous avons discuté des concepts de l'application angulaire JS avec quelques exemples pour mieux comprendre. Vous pouvez également consulter l'article suivant pour en savoir plus.

  1. Différences entre Angular 5 et Angular 4
  2. Qu'est-ce que l'apprentissage automatique?
  3. Différences entre JSON et BSON
  4. Qu'est-ce que Laravel Framework?
  5. Qu'est-ce que Testing Frameworks for Java?

Catégorie:

Développement de logiciels