Le cadre AngularJS est essentiellement utilisé dans les projets frontaux. Je ne connaissais pas ce cadre auparavant, et c'était parce que j'ai pris le relais récemment, alors j'avais prévu de bien l'apprendre. J'étais côté PC, mais maintenant j'ai repris le projet mobile. Le framework d'interface utilisateur mobile utilise Ionic + Vordova, mais n'utilise pas Bootstrap. J'utilise principalement l'interface de l'application Android iOS +. Je ne sais pas grand-chose sur le cadre ionique et j'ai besoin de passer du temps pour la familiariser. Les novices d'apprentissage angularjs sont les bienvenus pour me corriger.
Qu'est-ce que AngularJS?
Autrement dit, c'est un cadre de JavaScript qui est ajouté à une page Web via des balises de script. Autrement dit, lorsque nous utilisons AngularJS, nous devons introduire le code suivant.
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </ script>
Il est généralement recommandé de placer le script en bas de l'élément <body>, qui est d'améliorer la vitesse de chargement de la page Web. Parce que le chargement HTML n'est pas soumis au chargement du script.
Qu'est-ce que AngularJS?
AngularJS facilite le développement d'applications modernes à page unique (spas: applications à page unique).
• AngularJS lie les données d'application aux éléments HTML.
• Les AngularJS peuvent cloner et répéter les éléments HTML.
• AngularJS peut masquer et afficher les éléments HTML.
• AngularJS peut ajouter du code "derrière" l'élément HTML.
• AngularJS prend en charge la vérification des entrées.
Par exemple, les terminaux mobiles utilisent essentiellement des comparaisons de pages, qui sont effectuées en utilisant la conversion de routage angulaire. Comme notre projet actuel, nous utilisons également une seule page. Autrement dit, dans la page principale, les pages sautées sont toutes effectuées dans la page principale. La capture d'écran est la suivante:
Expressions angularjs
L'expression d'angularjs est écrite en doublées: {{expression}}.
Les expressions AngularJS lient les données à HTML, ce qui est similaire à la directive NG-Bind.
AngularJS "sortira" les données à l'emplacement où l'expression est écrite.
Les expressions AngularJS ressemblent beaucoup aux expressions JavaScript: elles peuvent contenir des littéraux, des opérateurs et des variables.
<! doctype html> <! - Tag angularjs pour traiter l'intégralité de la page html et démarrer l'application -> <html ng-app> <ad> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </ script> </ head> <body> <p> name: {{"Ting" + "Feng"}} </p> <p>: {{{5 + 5}} </p> <viv ng-Init = "Person = {name: 'Tingfeng', âge: '13 '}"> <p> name: {{personne.name}} Âge: {{personne.age}} </p> </div> </ body> </html>Application d'AngularJS dans HTML
Étendez principalement le HTML à Ng-Directive. La directive AngularJS est un attribut HTML préfixé avec NG, qui contient quatre fonctionnalités principales: MVC, modulaire, système d'instructions (directive) et Databinding
NG-INT: Cette directive initialise les variables d'application AngularJS. Par exemple, les colonnes suivantes:
<! doctype html> <! - Tag angularjs pour traiter l'intégralité de la page HTML et guider l'application -> <html ng-app> <adead> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular--1.0.1.min.js"> </script> ng-Init = "name = 'Tingfeng'"> <p> Le nom est: <span ng-bind = "name"> </ span> </p> </div> </ body> </html>
NG-App: Cette directive indique qu'une application AngularJS est définie. Habituellement placé derrière HTML, vous pouvez également utiliser la directive NG-App localement. Par exemple, <div ng-app>, le script AngularJS ne fonctionnera que dans le div, ce qui signifie que d'ici, tout le contenu est AngularJS pour la gestion.
NG-Model: Cette directive fait référence aux valeurs d'élément de liaison (comme la valeur de la zone d'entrée) à l'application.
NG-Bind: Cette directive lie les données d'application à la vue HTML. Utilisez les instructions correspondantes pour utiliser AngularJS pour faire fonctionner la page HTML. Jetons un coup d'œil au code pour l'utiliser.
À l'heure actuelle, utilisez le modèle NG pour se lier à la variable du modèle SETNAME. Lors de la saisie de la valeur dans la zone d'entrée, le nom de set correspondant changera également. Vous pouvez le tester par vous-même.
Explication sur $ Scope
Qu'est-ce que $ Scope? Quelle est sa fonction? Comment l'utiliser?
En termes simples, Scope est un POJO (PlainoldJavaScriptObject), similaire à un objet, avec des propriétés et des méthodes, Scope est un POJO (PlainoldJavaScriptObject), similaire à un objet, avec des propriétés et des méthodes, Scope fournit Watch (), Watch () et Appliquer () Méthodes d'outil. Le MVC d'AngularJs a tout réalisé avec l'aide de $ Scope.
Caractéristiques: 1. Il s'agit de l'environnement d'exécution (ou de la portée) de l'expression
2. La portée est une structure d'arbre, parallèle à la balise DOM, contenant une portée, qui est une structure d'arbre, parallèle à la balise DOM, contenant un rootcope dessus est au niveau supérieur.
3. La portée héritera de la portée des parents héritera des propriétés et des méthodes du rootcope parent.
4. $ Scope peut propager des événements, similaires à DOM, qui peuvent se propager vers le haut ou vers le bas.
5. $ La portée n'est pas seulement la base de MVC, mais aussi la base de la mise en œuvre de la liaison bidirectionnelle plus tard.
Composants d'Angularjs
Modèle: c'est-à-dire des fichiers écrits HTML et CSS, affichant la vue de l'application. AngularJS peut construire ses propres balises HTML en HTML!
Contrôleur: Contrairement à Ajax, il n'est pas nécessaire d'écrire un auditeur ou un contrôleur DOM car il est déjà intégré à AngularJS. Avantages: facile à écrire, tester, maintenir et comprendre.
Données du modèle: le modèle est étendu à partir d'AngularJS comme attributs des objets de domaine. Les données du modèle peuvent être un objet JS, un tableau ou un type primitif, mais ils appartiennent tous à un objet de portée AngularJS.
Comment comprendre la portée dans AngularJS?
Autrement dit, une portée peut être considérée comme un modèle, un lien qui fonctionne avec le modèle et le contrôleur. AngularJS utilise la portée, et il existe également des informations, des modèles de données et des contrôleurs dans le modèle. Ceux-ci peuvent aider à séparer le modèle et la vue, mais ils sont tous deux synchronisés! Toute modification du modèle sera immédiatement reflétée sur la vue et toute modification de la vue sera immédiatement reflétée dans le modèle.
Vue: Dans AngularJS, une vue est le mappage après que le modèle soit rendu via le modèle HTML. Autrement dit, peu importe lorsque le modèle change, AngularJS mettra à jour les points de jonction en temps réel et mettra à jour la vue.
Il est plus intuitif de publier des codes!
<! doctype html> <html ng-app = "helloangular"> <éad> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </cript> </ script> // modular var MyModule = Angular.Module (Helloangular ", []); －Control Template HelloangularMyModule.Controller ("Helloangular", ['$ scope', fonction helloangular ($ scope) {$ scope.value = {name: 'jiangting'};}]); </cript> </ head> <body> <! - MVC-View Angular -> <div ng-controller = "Helloangular"> －La contrôleur est helloangular <p> {{valum.name}}, bonjour! </p> </div> <! - Angular Modular -> </ody> </html>Jetons un coup d'œil à l'application du contrôleur, c'est-à-dire le contrôleur, c'est-à-dire que le contrôleur exploite des données, les lie et l'affiche sur la page HTML.
Le module AngularJS (module) définit les applications AngularJS.
Le contrôleur AngularJS (contrôleur) est utilisé pour contrôler les applications AngularJS.
La directive NG-APP définit l'application et le contrôleur NG définit le contrôleur. Utilisons les colonnes ci-dessus pour afficher:
Le module AngularJS définit les applications:
var mymodule = angular.module ("helloangular", []); － Modèle de contrôle HelloangularApplication de contrôle du contrôleur AngularJS:
MyModule.Controller ("Helloangular", ['$ Scope', fonction helloangular ($ scope) {$ scope.value = {name: 'jiangting'};}]);Comprendre MVC frontal
À propos des fonctionnalités du contrôleur:
1. N'essayez pas de prendre le contrôleur, un contrôleur n'est généralement responsable que d'une petite vue.
2. Ne faites pas fonctionner le Dom directement dans le contrôleur, ce n'est pas sa responsabilité
3. Ne faites pas d'opérations de filtrage de données dans Controller, il y a un service de filtre
4. Ne formatez pas les données dans le contrôleur, NG a des contrôles de formulaire très utiles
5. Le contrôleur ne s'appellera pas. L'interaction entre les contrôleurs sera réalisée par des événements. Ce sera via le service de filtre. 4. Ne formatez pas de données dans le contrôleur. Il existe des contrôles de formulaire très utiles. 5. Le contrôleur ne s'appellera pas. L'interaction entre les contrôleurs sera réalisée par des événements. Il sera effectué par portée.
Voyons comment personnaliser le système de commande, le code est le suivant:
<!doctype html><html ng-app><head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script>//Instruction system var myModule = angular.module("MyModule", []); MyModule.Directive ("Hello", fonction () {return {restrict: 'e', modèle: '<div> salut tout le monde! </div>', - here nous insérons une balise html remplace: true}}); </cript> </ head> <body> <Lello> </lolo> </odody> </html>Dans la directive, il y a trois paramètres renvoyés par la suite, où le modèle moyen fait référence à la balise HTML insérée. Maintenant, j'écrirai moi-même un morceau de code HTML et je verrai comment l'écrire dans AngularJS.
Le code HTML statique d'origine est le suivant:
<ul> <li> <span> new1 </span> <p> juste une page de test1 </p> </li> <li> <pan> new2 </span> <p> juste une page de test2 </p> </li> </ul>
La façon de le modifier sur AngularJS est la suivante:
<! doctype html> <html ng-app> <éad> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </ script> <script> // $ La lunette est la lunette du contrôleur. // Portée angularjs: elle peut être considérée comme un modèle. Une fois l'application démarrée, une portée racine sera créée et la portée du contrôleur est un successeur typique de la portée racine. function newsCtrl($scope){$scope.news=[{"content":"new1","introduce":"just a test page1"},{"content":"new2","introduce":"just a test page2"}];$scope.phones={length:"4" // A single attribute cannot be added with a semicolon, multiple attributes are separated by Comas};} </ script> </ head> <body ng-controller = "newsctrl"> <ul> <li ng-repeat = "new in news"> {{new.content}} <p> {{new.introduce}} </p> </li> </ul> </odody> </html>Ce qui précède est l'analyse des caractéristiques de base d'AngularJS présentées par l'éditeur (I). J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!