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