Angularjs前端MVC的设计与搭建

发布时间：2020-12-17 09:59:15 所属栏目：安全来源：网络整理

导读：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= "cs

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>
<!-- MyCtrol:就是C $scope:就是M div:就是V --> </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的代码如下：

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",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 = "用户名或密码错误";
        }
    }
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!