angularJS的MVC的用法

我爱丁丁猫

于 2019-11-02 16:09:56 发布

阅读量138

点赞数

分类专栏：前端文章标签： angular.js

原文链接：https://www.mk2048.com/blog/blog.php?id=hb1jibjj1jjb&title=angularJS%E7%9A%84MVC%E7%9A%84%E7%94%A8%E6%B3%95

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

1.前端MVC：
M:Model,数据库
V:HTML页面
C:Control控制器
比较很有名的前端MVC框架：ExtJs

2.angularJS的MVC框架搭建
index.html代码如下：

   <!DOCTYPE html>
          <html lang="en">
          <head>
                     <meta charset="UTF-8">
                     <title>Title</title>
                     <link rel="stylesheet" href="css/foundation.min.css">
          </head>
          <body style="padding:10px;" ng-app="app">
                 <div ng-controller="MyCtrol">
                     <input type="text" ng-model="msg">
                     <h1>{{msg}}</h1>
                 </div>
          </body>
          <script src="js/angular.min.js"></script>
          <script src="js/myCtrol.js"></script>

       </html>

myCtrol.js的代码如下：

          angular.module('app', [])
          .controller('MyCtrol', function ($scope) {
                     $scope.msg = "Angular";
          });

ng-bind的使用：

   <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8">
          <title>Title</title>
          <link rel="stylesheet" href="css/foundation.min.css">
   </head>
   <body style="padding:10px;" ng-app="">
   <div>
              <input type="text" ng-model="msg">
              <h1 ng-clock class="ng-clock">{{msg}}</h1>
              <!--ng-clock的作用就是，在完全渲染之前不会让{{}}显示-->
              <h1 ng-bind="msg"></h1>
              <div class="{{msg}}">{{msg}}</div>
          </div>
   </body>
   <script src="js/angular.min.js"></script>
   </html>

controller的用法

index.html代码如下：

   <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
       <link rel="stylesheet" href="css/foundation.min.css">
          </head>
          <body style="padding:10px;" ng-app="app">
              <div ng-controller="MyCtrol">
           <input type="text" ng-model="msg">
           <h1 ng-bind="msg"></h1>
       </div>
       <div ng-controller="MyCtrol2">
           <input type="text" ng-model="msg">
           <h1 ng-bind="msg"></h1>
       </div>
       </body>
   <script src="js/angular.min.js"></script>
   <script src="js/myCtrol.js"></script>
   </html>

myCtrol.js的代码如下：

   angular.module('app', [])
   .controller('MyCtrol', function ($scope) {
       $scope.msg = "Hello angular";
   })
   .controller('MyCtrol2',function ($scope) {
       $scope.msg = "World angular";
   })

$scope中方法和变量的使用

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <link rel="stylesheet" href="css/foundation.min.css">
   </head>
   <body style="padding:10px;" ng-app="app">
       <div ng-controller="MyCtrol">
           <input type="text" ng-model="user.uname">
           <input type="text" ng-model="user.pwd">
           <!--<h1>{{reverse()}}</h1>-->
           <div class="button" ng-click="login()">登录</div>
           <div ng-show="errormsg.length>0" class="alert-box">{{errormsg}}</div>
       </div>
   </body>
   <script src="js/angular.min.js"></script>
   <script src="js/myCtrol.js"></script>
   </html>

   angular.module("app",[])
   .controller('MyCtrol',function ($scope) {
       $scope.msg = "";
       $scope.user = {uname:'',pwd:''};
       $scope.errormsg = "";
       $scope.reverse = function () {
           return $scope.msg.split(" ").reverse().join("");
       }
       $scope.login = function () {
           if($scope.user.uname == "admin" && $scope.user.pwd == "123"){
               alert("登录成功！");
           }else{
               $scope.errormsg = "用户名或密码错误";
           }
       }
   })

我爱丁丁猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS的MVC的用法

1.前端MVC： M:Model,数据库 V:HTML页面 C:Control控制器比较很有名的前端MVC框架：ExtJs 2.angularJS的MVC框架搭建 index.html代码如下： ...
复制链接

扫一扫