Le processus de fonctionnement de base des modèles et des données est le suivant:
Page de démarrage de l'application de demande de l'utilisateur
Le navigateur de l'utilisateur initie une connexion HTTP au serveur, puis charge la page index.html, qui contient le modèle
Angular est chargé dans la page, en attendant que la page se charge et à la recherche de la directive NG-App pour définir les limites du modèle.
Modèles de traversée angulaire, trouver les relations spécifiées et liées et déclencheront certaines actions de colonne: enregistrez l'auditeur, effectuez certaines opérations DOM et obtenez des données d'initialisation du serveur. Enfin, l'application sera lancée et le modèle sera converti en vue DOM
Connectez-vous au serveur pour charger d'autres données qui doivent être affichées à l'utilisateur
Montrer du texte
On utilise le formulaire {{}}, comme {{salutation}} le deuxième type ng-bind = "Greeting"
Utilisez le premier type, les pages non privées peuvent être vues par les utilisateurs. Il est recommandé d'utiliser le deuxième type de page d'index, et les pages restantes peuvent utiliser le premier type
Entrée de formulaire
La copie de code est la suivante:
<html ng-app>
<adal>
<Title> Form </Title>
<script type = "text / javascript" src = "angular.min.js"> </ script>
<script type = "text / javascript">
fonction startupController ($ scope) {
$ scope.Funding = {starteStimate: 0};
ComposetenEdEd = function () {
$ scope.Funding.needed = $ scope.Funding.StartingStimate * 10;
};
$ scope. $ watch («financement.startingEstimate», composeneeded); // Modifications du modèle de montre
}
</cript>
</ head>
<body>
<form ng-controller = "startupController">
Démarrage: <entrée ng-change = "composeteneed ()" ng-model = "financement.startingStimate"> // appelant la fonction lors du changement
Recommandation: {{financement.need}}
</ form>
</docy>
</html>
Dans certains cas, nous ne voulons pas faire des mouvements immédiatement lorsqu'il y a un changement, mais nous devons attendre. Par exemple:
La copie de code est la suivante:
<html ng-app>
<adal>
<Title> Form </Title>
<script type = "text / javascript" src = "angular.min.js"> </ script>
<script type = "text / javascript">
fonction startupController ($ scope) {
$ scope.Funding = {starteStimate: 0};
ComposetenEdEd = function () {
$ scope.Funding.needed = $ scope.Funding.StartingStimate * 10;
};
$ scope. $ watch ('financement.startingStimate', composeneeded); // regarde surveille une expression, et lorsque cette expression change, une fonction de rappel sera appelée
$ scope.requestFunding = function () {
Window.Alert ("Désolé, veuillez d'abord obtenir plus de clients.")
};
}
</cript>
</ head>
<body>
<form ng-sunumit = "requestFunding ()" ng-controller = "startupController"> // ng-submit
Démarrage: <entrée ng-change = "composeteneed ()" ng-model = "financement.startingStimate">
Recommandation: {{financement.need}}
<fruit> Financer mon démarrage! </fontificateur>
</ form>
</docy>
</html>
Interaction de soumission non formelle, prenez un clic comme exemple
La copie de code est la suivante:
<html ng-app>
<adal>
<Title> Form </Title>
<script type = "text / javascript" src = "angular.min.js"> </ script>
<script type = "text / javascript">
fonction startupController ($ scope) {
$ scope.Funding = {starteStimate: 0};
ComposetenEdEd = function () {
$ scope.Funding.needed = $ scope.Funding.StartingStimate * 10;
};
$ scope. $ watch («financement.startingEstimate», composeneeded);
$ scope.requestFunding = function () {
Window.Alert ("Désolé, veuillez d'abord obtenir plus de clients.")
};
$ scope.reset = function () {
$ scope.Funding.StartingStimate = 0;
};
}
</cript>
</ head>
<body>
<form ng-controller = "startupController">
Démarrage: <entrée ng-change = "composeteneed ()" ng-model = "financement.startingStimate">
Recommandation: {{financement.need}}
<bouton ng-click = "requestFunding ()"> financer mon démarrage! </fut-bouton>
<Button ng-Click = "reset ()"> reset </utton>
</ form>
</docy>
</html>
Listes, tables et autres éléments itératifs
Ng-Repeat renverra le numéro d'élément actuellement référencé via $ index. L'exemple de code est le suivant:
La copie de code est la suivante:
<html ng-app>
<adal>
<Title> Form </Title>
<script type = "text / javascript" src = "angular.min.js"> </ script>
<script type = "text / javascript">
var étudiants = [{nom: 'Mary', score: 10}, {name: 'jerry', score: 20}, {nom: 'jack', score: 30}]
fonction étudiantListController ($ scope) {
$ scope.SUDENTS = étudiants;
}
</cript>
</ head>
<body>
<Tableau ng-Controller = "StudentListController">
<tr ng-repeat = 'Student in Students'>
<td> {{$ index + 1}} </td>
<td> {{student.name}} </td>
<td> {{student.score}} </td>
</tr>
</ table>
</docy>
</html>
Se cacher et montrer
Les fonctions NG-spectacle et NG-Hide sont équivalentes, mais l'effet de fonctionnement est exactement le contraire.
La copie de code est la suivante:
<html ng-app>
<adal>
<script type = "text / javascript" src = "angular.min.js"> </ script>
<cript>
fonction DeathRayMenuController ($ scope) {
$ scope.MenUstate = {show: false}; // Si vous changez vers Menustate.show = false, l'effet ne sera pas affiché. À l'avenir, mettez les variables en {}
$ scope.togglemenu = fonction () {
$ scope.mestate.show =! $ Scope.MenUstate.show;
};
}
</cript>
</ head>
<body>
<div ng-contrôleur = 'DeathRayMenuController'>
<Button ng-Click = 'toggleMenu ()'> Menu à bascule </frut
<ul ng-show = 'Menustate.show'>
<li ng-Click = 'Stun ()'> Stun </li>
<li ng-Click = 'Disingrate ()'> Désintégrer </li>
<li ng-Click = 'Erase ()'> Effacer de l'histoire </li>
</ul>
</div>
</docy>
</html>
Classe et style CSS
La classe Ng et le style NG peuvent accepter une expression, et le résultat de l'expression peut être l'une des valeurs suivantes:
Chaîne représentant le nom de la classe CSS, séparée par des espaces
tableau de nom de classe CSS
Cartographie du nom de la classe CSS à la valeur booléenne
L'exemple de code est le suivant:
La copie de code est la suivante:
<html ng-app>
<adal>
<style type = "text / css">
.erreur {
Color d'arrière-plan: rouge;
}
.avertissement {
Color d'arrière-plan: jaune;
}
</ style>
<script type = "text / javascript" src = "angular.min.js"> </ script>
<cript>
Fonction HerecController ($ Scope) {
$ scope.iserror = false;
$ scope.iswarning = false;
$ scope.showerror = function () {
$ scope.messageText = "Erreur !!!"
$ scope.iserror = true;
$ scope.iswarning = false;
}
$ scope.showwarning = function () {
$ scope.sessageText = "AVERTISSEMENT !!!"
$ scope.iswarning = true;
$ scope.iserror = true;
}
}
</cript>
</ head>
<body>
<div ng-controlller = "HerecController">
<div ng-class = "{error: iSerror, avertissement: iswarning}"> {{MessageText}} </div>
<bouton ng-click = "showerror ()"> Erreur </frutch>
<Button ng-Click = "showwarning ()"> avertissement </fruts>
</div>
</docy>
</html>
Cartographie du nom de la classe CSS à la valeur booléenne
L'exemple de code est le suivant:
La copie de code est la suivante:
<html ng-app>
<adal>
<style type = "text / css">
.Section {
Color d'arrière-plan: LightGreen;
}
</ style>
<script type = "text / javascript" src = "angular.min.js"> </ script>
<cript>
Restaurant de fonction ($ Scope) {
$ scope.list = [{name: "The Handsome", Cuisine: "BBQ"}, {Name: "Green", Cuisine: "Salads"}, {Name: "House", Cuisine: 'Seafood'}];
$ scope.selectrestaurant = fonction (row) {
$ scope.selectedrow = row;
}
}
</cript>
</ head>
<body>
<Tableau ng-contrôleur = "restaurant">
<tr ng-repeat = 'restaurant dans la liste' ng-click = 'selectrestaurant ($ index)' ng-class = '{selected: $ index == selectedrow}'> // carte du nom de classe CSS à la valeur booléenne. Lorsque la valeur de l'attribut de modèle selectedrow est égale à l'indice de $ dans Ng-Repeat, le style selectd sera défini sur cette ligne
<TD> {{restaurant.name}} </td>
<TD> {{restaurant.cuisine}} </td>
</tr>
</ table>
</docy>
</html>