Dans ce chapitre, nous discuterons de la façon de configurer la bibliothèque AngularJS à utiliser dans le développement d'applications Web. Nous examinerons également brièvement la structure du répertoire et son contenu.
Lorsque vous ouvrez le lien https://angularjs.org/, vous verrez qu'il existe deux options pour télécharger la bibliothèque AngularJS:
Télécharger GitHub - Cliquez sur ce bouton pour aller sur GitHub et obtenir tous les derniers scripts.
Télécharger - ou cliquez sur ce bouton et vous verrez:
Cet écran offre diverses options pour utiliser Angle JS comme suit:
Télécharger les fichiers locaux et locaux
Il existe deux options différentes: ancienne et plus récente. Le nom lui-même est l'auto-explication. L'ancienne version est déjà inférieure à la version 1.2.x et la dernière est la version 1.3.x.
Nous pouvons également utiliser des versions minifiées, non compressées ou compressées.
Accès CDN: vous pouvez également utiliser CDN. Le CDN donnera accès au monde, dans ce cas, Google héberge les centres de données régionaux. Cela signifie utiliser CDN à la responsabilité de l'hôte mobile pour les fichiers de son propre serveur à une gamme de facteurs externes. Cela fournit également l'avantage que si le visiteur, votre page, a téléchargé une copie d'AngularJS à partir du même CDN, il n'a pas besoin d'être redémarré.
Utilisez la bibliothèque de versions CDN dans ce tutoriel.
exemple
Écrivons maintenant un exemple simple en utilisant la bibliothèque AngularJS. Créez un fichier html myfirstexample.html comme suit:
<!doctype html><html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> </head> <body ng-app="myapp"> <div ng-controller="HelloController" > <h2> Bienvenue {{helloto.title}} dans le monde de Yiibai! </h2> </div> <cript> angular.module ("MyApp", []) .Controller ("HelloController", Fonction ($ Scope) {$ Scope.helloto = {}); </cript> </ body> </html>Le chapitre suivant décrit le code ci-dessus en détail:
Y compris angularjs
Nous incluons déjà la page HTML dans le fichier JavaScript d'AngularJS, afin que nous puissions utiliser AngularJS:
<A-Head> <Script Src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </ script> </ head>
Consultez la dernière version d'AngularJS sur son site officiel.
Pointer de l'application angularjs
Ensuite, disons-moi qu'une partie de HTML contient des applications AngularJS. Cela peut être fait en plaçant l'attribut NG-App dans l'élément HTML à la racine de l'application AngularJS. Il peut être ajouté à un élément HTML ou à un élément corporel comme suit:
<body ng-app = "myApp"> </ body>
voir
Vues pour cette partie:
<div ng-contrôleur = "HelloController"> <h2> Bienvenue {{helloto.title}} au monde de Yiibai! </h2> </div>NG-contrôleur dit à AngularJS ce que sont les contrôleurs et les vues. Helloto.Title dit à AngularJS d'écrire la valeur du "modèle" de HTML appelé Helloto.title dans cette position.
Contrôleur
La partie du contrôleur est:
<Script> angular.module ("myApp", []) .Controller ("HelloController", fonction ($ Scope) {$ scope.helloto = {}; $ scope.helloto.title = "angularjs";}); </cript>Ce code enregistre d'abord une fonction nommée MyApp Angle Module Controller dans HelloController. Nous en apprendrons plus sur les modules et les contrôleurs dans leurs chapitres respectifs. La fonction du contrôleur est enregistrée à l'angle via Angular.Module (...). Contrôleur (...) Appel de fonction.
Le modèle de paramètre $ SCOPE est passé à la fonction du contrôleur. La fonction du contrôleur ajoute l'objet JavaScript d'Helloto, qui a un champ de titre ajouté.
mettre en œuvre
Enregistrez le code ci-dessus car myFirstexample.htmlll ouvrez-le dans n'importe quel navigateur. Vous verrez la sortie suivante:
Lorsque la page se charge dans le navigateur, l'événement suivant se produit:
Les documents HTML sont chargés dans le navigateur et calculés par le navigateur. Le fichier javascript angularjs est chargé et les objets globaux d'angle sont créés. Ensuite, une fonction de contrôleur d'enregistrement dans JavaScript est exécutée.
AngularJS scanne via HTML pour trouver des applications et des vues AngularJS. Une fois la vue trouvée, elle connecte la vue à la fonction de contrôleur correspondante.
Ensuite, AngularJS exécute la fonction de contrôle. Il rend ensuite une vue de données avec le modèle de contrôleur peuplé. La page est maintenant prête.