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