recherche

Maison  >  Article  >  interface Web  >  Il existe des opérations complexes sur MVC dans AngularJS

Il existe des opérations complexes sur MVC dans AngularJS

亚连
亚连original
2018-06-14 15:20:231352parcourir

Ci-dessous, je vais partager avec vous un exemple d'opérations complexes basées sur MVC dans AngularJS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Les exemples sont les suivants : 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>AngularJS基于MVC的复杂操作案例</title>
  <script type="text/javascript" src="../js/angular.min.js"></script>
 </head>
 <body>
  <!--ng-app="myapp"定义了一个模块-->
  <p ng-app="myapp" ng-controller="myctrl">
   <p>
    <!--ng-model模型作用-->
    <input type="text" name="name" ng-model="name" />
    <!--提供按钮-->
    <input type="button" value="清空" ng-click="clearVal()" />
   </p>
   <p>
    <!--{{}}等价于ng-bind用于数据显示-->
    hello,{{name}}
   </p>
  </p>
 </body>
 <script type="text/javascript">
  //初始化myapp模块
  var myapp = angular.module("myapp",[]);
  //定义模块的控制器
  //依赖注入，$scope作用域对象，操作当前作用域视图
  myapp.controller("myctrl",["$scope",function($scope){
   //对模型进行初始化赋值
   $scope.name = "你我他学习吧";
   //在作用域提供clearVal点击事件
   $scope.clearVal = function(){
    //模型设置为空
    $scope.name = "";//清空输入框内容
   }
  }]);
 </script>
</html>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. à l'avenir.

Articles associés :

À propos de l'implémentation du mécanisme de répartition entre les composants parents et enfants de Vue2.0 (tutoriel détaillé)

Comment implémentez-le en utilisant vue-ssr Rendu côté serveur

Comment utiliser l'historique pour contrôler le routage dans React-Router (tutoriel détaillé)

Comment utiliser jqprint pour imprimer le contenu de la page

Utiliser js pour implémenter WeChat pour évoquer Alipay pour recevoir des enveloppes rouges (tutoriel détaillé)

Comment utiliser Gulp pour implémenter la modularisation de pages Web statiques ? Comment le faire spécifiquement ?

Comment intégrer vux dans vue.js pour réaliser le chargement pull-up et l'actualisation déroulante

Problème 404 signalé dans le webpack concernant le Fichier de ressources du projet vue (Tutoriel détaillé)

Utilisation de webpack+vue2 pour la construction de projets

Comment implémenter l'héritage multiple en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：p5.js fait fleurir une animation de feux d'artificeArticle suivant：p5.js fait fleurir une animation de feux d'artifice

Articles Liés

Voir plus