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