Le modèle angulaire est une spécification de déclaration, qui est rendue dans la vue que l'utilisateur voit dans le navigateur avec les informations du modèle et du contrôleur. Il s'agit d'un DOM statique, y compris du HTML, du CSS, des éléments spéciaux angulaires et des attributs d'élément spécifiés angulaires. Les éléments et les attributs angulaires indiquent un comportement angulaire à étendre et pour convertir le modèle Dom en vue dynamique DOM.
Voici le type d'un élément angulaire déjà attribué que nous pouvons utiliser dans le modèle:
Remarque: En plus de déclarer les éléments ci-dessus dans le modèle, nous pouvons également accéder à ces éléments dans le code JavaScript.
L'extrait de code suivant montre un modèle angulaire simple composé de balises HTML standard et de directive angulaire, d'expression de Brace-Bound ({{expression}}, //www.vevb.com/article/91742.htm).
<! Doctype html> <! - ng-app, définissez la portée de l'application, créez root scop -> <html ng-app> <ead> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> template </ title> <méta contenu = "ie = edge, chrome = 1" http-equiv = "x-ua-compatible"> <style type = "text / css"> .ng-coak {affiche: aucun; } </ style> </-head> <! - ng-coak, classe qui sera supprimée après compilation ng-contrôleur, une directive, utilisée pour spécifier que le contrôleur correspondant du modèle actuel est MyController -> <Body Ng-Controller = "MyController"> <! - Ng-model, directive, utilisé pour spécifier que le modèle correspondant de l'entrée est FOO. -> <input type = "text" ng-model = "foo" value = "" /> <! - ng-Click, directive, ce que vous devez faire après avoir cliqué peut être une expression, comme ButtonText = '1'; ou il peut s'agir d'une fonction d'appel, comme indiqué ci-dessous. {{ButtonText}}, utilisé pour afficher la valeur de ButtonText qui peut être ou obtenue dans la chaîne de portée actuelle -> <Button ng-Click = "ChangeFoo ()"> {{ButtonText}} </ Button> <Script Src = "../ Angular-1.0.1.js" Type = "Text / Javascript"> </cript> MyController ($ scope) {$ scope.buttonText = "Par défaut"; // Initialiser le modèle ButtonText $ scope.foo = "Modify Me"; // Initialize Model Foo $ Scope.changeFoo = function () {// Declare ChangeFoo this.buttonText = this.foo; // attribue la valeur de Foo à ButtonText // Ceci a utilisé ici les points de la SCOPE. }; } </ script> </ body> </html>Dans une application simple à une seule page, le modèle se compose de HTML, CSS et de directive angulaire, tous contenus dans un fichier HTML (généralement appelé index.html). Mais dans certaines applications plus complexes, nous pouvons afficher plusieurs vues dans une page en utilisant "partiels", c'est-à-dire stocker les segments de modèle dans un fichier HTML séparé. Nous pouvons utiliser le service de route $ (http://code.angularjs.org/1.0.2/docs/api/ng.$Route) et NgView Directive (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngview) dans la page principale pour "inclure" ces parties. Un exemple de cette technique est présenté dans les septième et huitième étapes du tutoriel angulaire (http://code.angularjs.org/1.0.2/docs/tutorial/index). (Je vais jouer avec cette partie plus tard -_-!)
Ce qui précède est une collection d'informations sur les modèles angulaires angularjs. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!