J'ai regardé une vidéo sur AngularJS. Le contenu vidéo explique comment créer un spa sous forme de liste TODO (application de page simple). Afin d'améliorer la compréhension, un article est écrit ci-dessous pour revoir et consolider.
Préparer
Téléchargement angularjs
Cela s'appelle un téléchargement, mais en fait, tant que vous pouvez référencer AngularJS dans notre page. Il peut y avoir la méthode suivante.
Accélération CDN
Il est également possible d'utiliser des services d'accélération CDN nationaux.
Copiez le code comme suit: <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </ script>
Méthode NPM
Il est également tout à fait pratique d'utiliser l'outil de gestion des packages de Nodejs, en gros, cela peut être fait en deux étapes.
Tout d'abord, entrez le dossier où nous allons écrire le code.
• Installer AngularJS: NPM Installer Angular
• Introduit pour utiliser sur la page:
<! - Cette adresse SRC dépend de votre propre situation->
<script src = "node_modules / angular / angular.js"> </ script>
Façon conventionnelle
La méthode conventionnelle consiste à télécharger manuellement les fichiers pertinents, puis à les présenter manuellement, car il est assez lourd. Il n'y a plus de récit ici.
Bootstrap Download
En tant que cadre frontal très populaire et moderne, Bootstrap est un succès. Adresse de téléchargement
Réserve de connaissances
Architecture MVC
Le noyau AngularJS adopte l'architecture MVC et les applications axées sur les événements. Je suis juste nouveau, donc je ne le comprends pas très bien. S'il y a une erreur, j'espère que le blogueur le signalera.
ng-app
En tant que majordome de toute la page unique, l'application signifie l'application et la signification de l'application. Notre service à une page agit comme une application.
D'une manière générale, NG-App doit être imbriqué en tant que conteneur parent de NG-contrôleur. Sinon, les résultats attendus ne peuvent pas apparaître
contrôleur NG
Le contrôleur, l'homme de droite appliqué sur la page, et l'existence du contrôleur simplifie le couplage entre les modules, ce qui rend l'écriture de code plus standardisée et simple.
ng model
Pendant le traitement du modèle, il se lie et sortira généralement avec des éléments de page pour obtenir un effet de page sans rafraîchissement.
Base de l'événement
clic ng
Dans notre application de page unique, les éléments qui déclarent cet attribut ont la fonction des événements de clic. Quant à quelle partie des fonctions appelées, elles sont en fait liées au conteneur où se trouve l'élément.
C'est-à-dire que la fonction correspondant à l'événement de clic est le code écrit dans le contrôleur pertinent pour remplir une fonction spécifique.
Code complet
Le code détaillé de cet exemple est publié ci-dessous
main.js
(Fonction (fenêtre) {// Enregistrer un module principal d'application var todoApp = window.angular.module ('tododapp', []); // enregistrer le contrôleur // window.angular.module ('tododapp') toDoApp.Controller ('MainController', ['$ Scope', Fonction ($ Scope) $ scope.text = '';; $ scope.text.trim (); Il} // obtient le nombre d'événements terminés et les implémente en fonction de la sélection de la case à cocher // Étant donné que la page est modifiée dynamiquement, vous devez utiliser des fonctions, ou simplement utiliser la liaison du modèle, mais ce sera un peu gênant $ SCOPE.DONECOUNT = fonction () {// Utiliser Filter pour implémenter Var Temp = $ Scope.todolist.filter (fonction (fonction) {return item.Don; Les conditions et l'événement ont été achevés});todist.html
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> AngularJS Intégrer la liste des tâches d'implémentation bootstrap </tapt> <! - Présentation de bootstrap -> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootsstrsit.Min.cins" rel = "Stylesheet"> <style> .Container {max-width: 720px; } .done {couleur: #cca; } .checkbox {margin-droite: 12px; marge-fond: 0; } .done> .checkbox> Label> span {text-Decoration: line-through; } </ style> <script src = "node_modules / angular / angular.js"> </ script> <script src = "myjs / app.js"> </ script> </ head> <body> <div ng-app = "todoapp"> <feger> <h1> toDo list </h1> <hr> </reger> <! ng-controller = "MainController"> <! - Pour obtenir une bonne interface, le contrôle de formulaire est utilisé -> <form> <input type = "text" ng-model = "text" name = ""> <span> <bouton ng-click = "addding ()"> ajout </frutch> ng-class = "{'Done': item.done}" ng-repeat = "item in todolist"> <button type = "Button" aria-label = "close" ng-click = "delete (item)"> <span aria-hidden = "true"> × </pan> <pank " ng-model = "item.done"> <span> {{itex.text}} </span> </bablace> </div> </li> </ul> <p> Les tasks <strong> {{todist.length}} </strong> ont été achevés </strong> </p> </ection> </v> </do body> </html>Effet de page
Explication du code détaillé
La couche de code la plus externe dans le code peut avoir un bon effet comme espace temporaire et empêcher la pollution de l'espace de noms.
(fonction (fenêtre) {// pour faire quelque chose}) (fenêtre)Notez que la dernière (fenêtre) est indispensable.
Créer une application
// Enregistrer un module principal d'application
var todoApp = window.angular.module ('tododapp', []);
Créer un contrôleur
Todoapp.Controller ('MainController' // La Scope $ ici joue également le rôle d'un conteneur et déclare la plage visible de la variable., ['$ Scope', Fonction ($ Scope) {// La fonction de $ est pour ajouter des éléments à la vision de la visualisation. ajouter une chaîne de listes $ scope.todolist = [{text: 'angularjs', fait: false}, {text: 'bootstrap', fait: false}];}]);Améliorer les fonctions de fonction
// Ajouter une fonction pour répondre à l'interaction $ scope.add = function () {var text = $ scope.text.trim (); if (text) {$ scope.todolist.push ({text: texte, fait: false}); $ scope.text = ''; }} // cliquez sur l'événement de réponse $ scope.delete = function (todo) {var index = $ scope.todolist.indexof (todo) $ scope.todolist.splice (index, 1); // pour le supprimer} // obtenez le nombre d'événements terminés et les implémenter en fonction de la sélection de la boîte de contrôle // depuis la page. Little Trouble $ SCOPE.DONECOUNT = fonction () {// Utilisez le filtre pour implémenter var temp = $ scope.todolist.filter (fonction (item) {return item.done; // renvoie true pour indiquer que les données actuelles répondent aux conditions et que l'événement a été terminé}); retour temp.Length; }Résumer
Il n'y a pas beaucoup de codes et de pensées profondes.
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.