AngularJS 环境设置

Ce chapitre présente la manière de configurer la bibliothèque AngularJS pour le développement d'applications Web. Il décrit également brièvement la structure du répertoire et son contenu.

Lorsque vous ouvrez le lien https://angularjs.org/lorsque vous verrez deux options pour télécharger la bibliothèque AngularJS-

Voir sur GitHub − Cliquez sur ce bouton, vous serez redirigé vers GitHub et obtiendrez tous les scripts les plus récents.
Télécharger AngularJS 1 − Cliquez sur ce bouton, vous verrez un écran qui montre

Cet écran fournit diverses options pour utiliser Angular JS-

Téléchargement et hébergement de fichiers localement

Il y a deux options différentes : "traditionnelle" et "dernière". Le nom est auto-descriptif. La version ancienne est inférieure à1.2.x, tandis que la dernière version est1.7.x。
Nous pouvons également utiliser la version minimisée, non compressée ou compressée.

Accès CDN− Vous pouvez également accéder au CDN. Le CDN vous permet d'accéder aux centres de données régionaux. Dans ce cas, il est hébergé par Google. Le CDN transfère la responsabilité de l'hébergement des fichiers de votre serveur vers une série de serveurs externes. Il offre également un avantage, si vos visiteurs de page Web ont déjà téléchargé une copie d'AngularJS à partir du même CDN, il n'est pas nécessaire de le redownloader.

Dans ce tutoriel, nous utilisons constamment la version CDN de la bibliothèque.

Exemple en ligne

Maintenant, utilisons la bibliothèque AngularJS pour écrire un exemple simple. Créons un fichier HTMLmyfirstexample.htmlcomme suit-

Exemple

!doctype html>
<html>
　　　<head>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.5.2/angular.min.js"></script>
　　　</head>
　　　
　　　<body ng-app="myapp">
　　　　　　<div ng-controller="HelloController">
　　　　　　　　　<h2>Bienvenue {{helloTo.title}} dans le monde de w3codebox!</h2>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　angular.module("myapp", [])
　　　　　　　　　
　　　　　　　　　.controller("HelloController", function($scope) {
　　　　　　　　　　　　$scope.helloTo = {};
　　　　　　　　　　　　$scope.helloTo.title = "AngularJS";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Voyons ce qui se passe ‹/›

Lisons en détail le code ci-dessus-

Inclure AngularJS

Nous incluons le fichier JavaScript AngularJS dans la page HTML afin que nous puissions l'utiliser-

<head>
　　　<script src="https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js">
　　　</script>
</head>

Vous pouvez consulter la dernière version d'AngularJS sur son site officiel.

pointant vers l'application AngularJS

Pour déterminer quelle partie de l'HTML contient l'application AngularJS, vous pouvez utiliser ng-Pour ajouter l'attribut app à l'élément HTML racine de l'application AngularJS, vous pouvez le rajouter à l'élément html ou body, comme suit-

<body ng-app="myapp">
</body>

vue

La vue est cette partie-

<div ng-controller="HelloController">
　　　<h2>Bienvenue {{helloTo.title}} dans le monde de w3codebox!</h2>
</div>

ng-controllerqui indique à AngularJS quel contrôleur utiliser dans cette vue.helloTo.titlequi indique à AngularJS d'écrire un modèle nommé helloTo.title à cet endroit en HTML.

contrôleur

La partie contrôleur est-

<script>
　　　angular.module("myapp", [])
　　　
　　　.controller("HelloController", function($scope) {
　　　　　　$scope.helloTo = {};
　　　　　　$scope.helloTo.title = "AngularJS";
　　　});
</script>

Ce code se trouve dans un fichier nommémyappLe module d'angle a enregistré une fonction de contrôleur nommée HelloController. Nous étudierons en détail les modules et les contrôleurs dans各自的 chapitres. La fonction de contrôleur est enregistrée en utilisant la fonction appelle angular.module(...).controller(...).

$scope les paramètres du modèle sont passés à la fonction de contrôleur. La fonction de contrôleur ajoute un helloTo objet JavaScript et ajoute un champ title dans cet objet.

Exécutez

Enregistrez le code ci-dessus sousmyfirstexample.htmlet dans n'importe quel navigateurdansIl s'ouvre. Vous verrez la sortie suivante-

Bienvenue AngularJS dans le monde de w3codebox!

Ce qui se passe lors du chargement de la page dans le navigateur? Voyons voir-

Le document HTML est chargé dans le navigateur et évalué par le navigateur.
Le fichier JavaScript AngularJS est chargé, angleGlobalL'objet a été créé.
Exécutez le JavaScript pour enregistrer les fonctionnalités du contrôleur.
Ensuite, AngularJS scanne l'HTML pour rechercher les applications et les vues AngularJS.
Après avoir trouvé la vue, il connecte cette vue aux fonctionnalités du contrôleur correspondantes.
Ensuite, AngularJS exécute les fonctionnalités du contrôleur.
Ensuite, il utilise le contrôleur pour afficher les données du modèle. La page est maintenant prête.

AngularJS MVC架构 AngularJS 简介