Nous utiliserons AngularJS et Bootstrap pour développer un exemple d'application frontal. Grâce à cette pratique de projet simple, nous conduirons tout le monde dans le Palais du développement frontal AngularJS et vous présenterons quelques points de connaissance:
1.MVC Basics, grâce à des exemples de projet, laissez tout le monde avoir une compréhension préliminaire de l'application du modèle de conception MVC.
2. Construisez notre première application AngularJS. Grâce au développement d'un cas d'utilisation pratique, tout le monde peut acquérir une certaine compréhension perceptuelle du développement frontal.
3. Une compréhension préliminaire des trois composantes les plus importantes des AngularJS, à savoir le modèle, la vue et le contrôleur.
4. Compréhension préliminaire de l'utilisation des objets de portée angularjs.
Introduction de base au mode MVC:
MVC est un modèle d'architecture d'interface utilisateur. Son objectif est de décomposer les fonctions des applications dans des modules spéciaux, de réaliser la réutilisation des modules, de réduire le couplage entre les modules et d'améliorer la robustesse du système. Le mode MVC est principalement divisé en trois parties:
Modèle: utilisé pour stocker les données système
Voir: utilisé pour implémenter l'interface d'interface utilisateur du système
Contrôleur: utilisé pour connecter le modèle et la vue.
À mon avis, la meilleure façon d'apprendre est la pratique. Nous développerons un exemple d'application frontal. Grâce à cet exemple, d'une part, nous pouvons approfondir notre compréhension du cadre AngularJS, et en même temps, nous pouvons également ressentir comment le modèle MVC est ancré dans le processus de développement.
Introduction de l'application (Chemin de code: http://xiazai.vevb.com/201608/yuanma/bootstrap-mooc(vevb.com).rar)
Nous ferons une application Web qui devine les numéros, avec l'interface comme suit:
L'arrière-plan de l'application générera au hasard un nombre aléatoire avec une plage de 1 à 1000. L'utilisateur entre le numéro deviné dans la zone de texte. Si l'entrée est correcte, l'application apparaîtra ci-dessous une invite verte. S'il est faux, par exemple, le nombre d'entrée est plus grand ou plus petit que le nombre généré par l'arrière-plan, l'application apparaîtra d'une invite correspondante, par exemple:
Les nombres affichés en bas indiquent combien de fois nous avons deviné.
La structure du répertoire de code de l'ensemble de l'application est la suivante:
Étant donné que nous travaillons actuellement sur un exemple d'application simple, nous assemblons le code de chaque module. À l'avenir, lorsque nous construisons des applications frontales à grande échelle, nous serons très prudents pour organiser la structure du répertoire de code de l'ensemble du projet.
Dans la composition de fichiers illustrée dans la figure ci-dessus, Angular.js est le fichier Framework sur lequel nous nous appuyons pour développer des applications, Bootstrap.min.css est le fichier de bibliothèque d'interface utilisé pour concevoir l'interface d'interface utilisateur, et NumberGuessing.html sera le fichier d'application principal que nous voulons développer. Ensuite, nous ajouterons du code à NumberGuessing.html étape par étape et augmenterons progressivement les fonctions de l'application.
Tout d'abord, ce que nous devons faire est de créer un modèle HTML simple. Sur ce modèle, nous pouvons lentement ajouter des fonctions. Le code du modèle est le suivant:
<! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <ititle> Devinez le nombre! </ Title> <link href = "bootstrap.min.css" rel = "StyleSheet"> </ Head> src = "angular.js"> </ script> </ body> </html>
Dans le code de modèle ci-dessus, notez qu'il y a une ligne "Meta ... charSet =" UTF = 8 "
Le but de cette ligne est de permettre au navigateur d'afficher correctement le chinois. Si cette ligne n'est pas disponible, le navigateur affichera le chinois. Dans le modèle, nous introduisons d'abord le code Framework et le code de bibliothèque d'interface d'interface utilisateur à utiliser plus tard. Une fois cela fait, nous le chargeons dans le navigateur pour voir s'il y a des erreurs. Si cela est correct, ce que nous voyons actuellement est un blanc:
Ensuite, nous développerons le code de logique d'arrière-plan de l'application, et nous déterminerons d'abord quelques variables à utiliser:
OriginalVal, utilisé pour stocker des nombres aléatoires générés
USERGUESS, stockez le numéro deviné actuellement entré par l'utilisateur
numoftries, enregistrez combien de fois l'utilisateur a essayé
Déviation: enregistrez la différence entre le nombre entré par l'utilisateur et le numéro aléatoire d'arrière-plan. Si le numéro entré par l'utilisateur est grand, la définition> 0; L'entrée est petite, la définition <0; Si l'entrée est correcte, alors la définition == 0
Implémentation du module de contrôleur
Le contrôleur est utilisé pour connecter les deux modules de modèle et de vue, et la logique métier du système est également implémentée dans Controller. Lorsque l'utilisateur effectue des opérations sur l'interface, comme cliquer sur un bouton et entrer du contenu, le contrôleur reçoit les informations correspondantes du côté de la vue, puis le contrôleur déclenche la logique de traitement des événements correspondante. Par exemple, l'utilisateur entre un nombre dans l'interface et clique sur le bouton OK, le contrôleur obtient la valeur d'entrée de la vue, puis élimine le nombre aléatoire généré par l'application à partir du modèle, le compare aux deux hayons et renvoie le résultat de comparaison à la vue. La vue affiche les changements d'interface correspondants en fonction de la valeur de déviation renvoyée. Voyons comment le corps logique du contrôleur est implémenté:
fonction devinerTheNumberController ($ scope) {$ scope.verifyGeess = function () {$ scope.deviation = $ scope.originalval - $ scope.userergUess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.inializegame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ scope.UserergUess = null; $ scope.deviation = null; } $ scope.InitializeGame (); }La fonction de supposition enUmUmberController configure les propriétés numériques de l'objet modèle. Le sens de ces valeurs a été mentionné plus tôt. Dans le même temps, cette fonction de contrôleur tire également deux appels d'interface, l'un est VerifyGuess. Lorsque le bouton Confirmer sur l'interface est cliqué, le module Affichage appellera l'interface pour déterminer si les données entrées par l'utilisateur sont correctes. Dans le même temps, l'appel mettra à jour les valeurs des deux attributs, déviation et numoftries.
InitializeGame est utilisé pour initialiser l'ensemble de l'application système, générer d'abord des nombres aléatoires, puis initialiser certaines variables à vider.
Dans notre fonction corporelle de contrôleur, une portée de paramètre est passé. Ce paramètre nous est transmis par AngularJS. Il est essentiellement équivalent à M en mode MVC, qui est le modèle. Il est similaire à une base de données, spécialement utilisée pour stocker les données d'application et le code logique. Comme vous pouvez le voir, dans l'appel InitializeGame, le contrôleur met Numoftries, OriginalVal et d'autres données dans l'objet $ SCOPE. Dans l'appel VerifyGuess, il obtient ces données à partir de $ Scope pour le calcul et la modification.
Une fois que le code de contrôleur ci-dessus a été ajouté à notre modèle de fichier numéroGuessing.html, le résultat est le suivant:
<! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <ititle> Devinez le nombre! </ Title> <link href = "bootstrap.min.css" rel = "StyleSheet"> </ Head> src = "angular.js"> </ script> <script type = "text / javascript"> function devinerTheNumberController ($ scope) {$ scope.verifyGeess = function () {$ scope.deviation = $ scope.originalval - $ scope.userergUess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.inializegame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ scope.UserergUess = null; $ scope.deviation = null; } $ scope.InitializeGame (); } </ script> </ body> </html>Conception de l'interface d'application Affichage de l'application
View, c'est-à-dire que la vue dans MVC, consiste en fait à afficher les données du modèle via une interface graphique. Notre application actuelle est simple et basée sur le principe de simplicité, l'expérience utilisateur de la conception d'interface peut ne pas être très bonne, mais il suffit de comprendre rapidement comment utiliser AngularJS et Bootstrap pour créer rapidement une interface frontale pour un programme.
Jetons un coup d'œil à la construction de l'interface et intégrons la logique du contrôleur et de l'interface:
<body ng-app = "app"> <div ng-controller = "devinerTheNumberController"> <h2> Devinez le nombre! </h2> <p> Veuillez deviner le nombre aléatoire généré par l'ordinateur, qui va de 1 à 1000. </p> <bellow> Veuillez prendre des mesures: </ label> <entrée type = "ng-model =" userguess "/> <boutone> ng-Click = "VerifyGeess ()"> Confirmer </futton> <Button ng-Click = "InitializeGame ()"> return </futton> <p> <p ng-show = "Deviation <0"> MR., Vous enchérir trop! </p> <p ng-show = "déviation> 0"> mon homme, si vous en avez moins, ajoutez plus de points, ajoutez plus de points. </p> <p ng-show = "Deviation === 0"> Mon homme, vous vous faites vraiment dire correctement!
C dans MVC, c'est-à-dire le contrôleur, est un pont entre l'interface (vue) et les données (modèle). Pour associer ces trois, nous devons les intégrer tous les trois dans le cadre AngularJS, puis compter sur le mécanisme du cadre AngularJS pour atteindre l'interconnexion entre les trois.
Afin d'incorporer la vue dans AngularJS, l'instruction de code ci-dessus:
<corps ng-app = "app">
NG-APP Cette propriété indique à Angular que le code HTML dans la balise corporelle sera intégré en tant que partie de vue dans le framework AngulaJS, et «App» est utilisé comme valeur de propriété NG-App pour informer le cadre AngularJS pour charger un module nommé «App». Ce module équivaut à un entrepôt de stockage. Nous décomposons diverses fonctions de l'application frontale en différentes unités. Ces unités sont stockées dans un module appelé application. Le contrôleur et le modèle sont également des unités fonctionnelles. Plus tard, nous verrons qu'ils seront ajoutés au module appelé App. Le framework AngularJS supprimera les deux unités de Controllerre et du modèle de ce module à utiliser.
Ensuite, nous avons d'abord mis ce module appelé application dans le cadre AngularJS, le code est le suivant:
<script type = "text / javascript"> angular.module ('app', []) fonction devinerTheNumberController ($ scope) {....} <cript>De cette façon, nous avons un module appelé application dans le framework AngularJS, et nous associons le module à l'interface via ng-app = "app". Ensuite, nous devons mettre l'unité de contrôleur dans le module d'application, le code est le suivant:
<script type = "text / javascript"> angular.module ('app', []) .Controller ('devinerTheNumberController', devinerTheNumberController); fonction devinerTheNumberController ($ scope) {....} </cript>La fonction Angular.Module génère et renvoie un objet de module. Cet objet contient une interface appelée contrôleur. Grâce à cette interface, l'unité fonctionnelle du contrôleur que nous avons développée peut être placée dans le module. À partir du code ci-dessus, nous pouvons voir que nous mettons une unité de contrôleur dans le module. Le nom de cette unité est GuessHenumberContrller, qui est le premier paramètre d'entrée de la fonction de contrôleur. Le deuxième paramètre d'entrée est le corps logique fonctionnel de l'unité de contrôleur, qui est la fonction de supposition de contrôleur de supposition que nous avons développée plus tôt.
Après avoir terminé les étapes ci-dessus, notre application est développée. Pour le moment, notre HTML peut être chargé à partir du navigateur, vous pouvez donc voir l'effet spécifique.
Avant la fin, allons profondément dans le code pour voir comment AngularJS intègre divers modules pour former une application frontale complète. Dans le code, il existe des symboles et des attributs spéciaux, des symboles spéciaux, tels que: {{}}, et des attributs spéciaux tels que: ng-app, ng-contrôleur, etc. Dans le contexte angulaire, {{et}} sont combinés ensemble sont appelés instructions angulaires. Angular convertit les variables sandwich en {{et}} en valeurs correspondant aux variables, telles que l'extrait de code suivant:
<p> Le nombre de fois que vous avez deviné est: <span> {{numoftries}} </span> <p>
Numoftries signifie combien de fois l'utilisateur a essayé de deviner. Si la valeur de numoftries est 0, AngularJS échappera au code ci-dessus:
<p> Le nombre de fois que vous avez deviné est: <span> 0 </span> <p>
Le navigateur rendra l'interface à la situation suivante:
La directive AngularJS est un point de connaissance technique complexe. Dans la discussion ultérieure, nous en discuterons en détail. Ici, nous introduisons brièvement le rôle de la directive AngularJS, qui étend principalement la fonction de syntaxe de HTML. Les directives sont les parties les plus puissantes du cadre AngularJS. Présent brièvement la directive AngularJS utilisée dans le code.
NG-contrôleur: Cette directive relie le contrôleur et la vue représentée par HTML. Ce n'est que avec cette directive que la vue peut accès aux variables et aux interfaces définies par le contrôleur. Vous pouvez essayer de le mettre dans le code.
ng-model = ng-contrôleur = ”devinerTheNumberController"
Retirez cette phrase et voyez quel est le résultat.
NG-Model: Bidirectionly lier les variables dans le modèle avec des contrôles en vue, par exemple:
<input type = "nombre" ng-model = "usergUess" />
Cette instruction lie la variable usergus dans le modèle à la zone de texte d'entrée de l'interface. Lorsque la valeur dans la zone de texte change, la valeur correspondante de userguess change également. Au contraire, si la valeur de Guess change en arrière-plan, le contenu de la zone de texte change également en conséquence.
NG-CLICK: Connectez les événements de clic générés par l'interface avec la logique de traitement du contrôleur, par exemple:
<Button ng-Click = "VerifyGuess ()"> Confirmer </futton>
Le code ci-dessus connecte l'événement de clic "OK" avec la fonction VerifyGeess () du contrôleur. Une fois le bouton cliqué, la fonction sera exécutée.
NG-SHOW: Utilisé pour contrôler si le contrôle utilisé pour contrôler la vue à afficher. Si la valeur de l'expression correspondante de ng-show est vraie, le contrôle sera affiché. S'il est faux, le contrôle ne sera pas affiché. Par exemple:
<p ng-show = "Deviation <0"> Mr., Votre offre est trop élevée! </p>
La fonction du code ci-dessus est que lorsque la valeur de la définition de la variable est inférieure à 0, le contenu de l'élément de paragraphe P sera affiché sur l'interface.
AngularJS est un cadre de développement frontal puissant mais relativement complexe. Le rôle de notre exemple est uniquement d'aider tout le monde à comprendre les fonctions puissantes des AngularJS et à acquérir d'abord une certaine compréhension perceptuelle, afin de jeter un fondement solide pour nous pour analyser et maîtriser rationnellement l'ensemble de la technologie de développement frontal AngularJS à l'avenir.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.