Angularjs前端MVC的设计与搭建

最新推荐文章于 2022-09-08 22:23:45 发布

u013063153

最新推荐文章于 2022-09-08 22:23:45 发布

阅读量1.6k

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/u013063153/article/details/52453652

版权

Angular 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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的代码如下：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 = "用户名或密码错误";
        }
    }
})

u013063153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angularjs前端MVC的设计与搭建

1.前端MVC：M:model,数据库V:HTML页面C:control控制器比较很有名的前端MVC框架：ExtJs2.angularJS的MVC框架搭建index.html代码如下：html lang="en">head> meta charset="UTF-8"> title>Titletitle> link rel="stylesh
复制链接

扫一扫