最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架
不说那么多,先上例子,我是个代码控
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>capter1-angular</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/bootstrap-theme.css"> <script src="../js/angular.min.js"></script> <script type="text/javascript"> var model = { user:"Lifeng", items:[{ action:"Buy Flowers",done:false },{ action:"Get Shoes",done:false },{ action:"Collect Tickets",done:true },{ action:"Call Joe",done:false }] } var myApp = angular.module("myApp",[]); myApp.controller("MyCtrl",function($scope){ $scope.todo = model; }) </script> </head> <body ng-controller="MyCtrl"> <div class="page-header"> <h1>{{todo.user}}‘s To Do List <span class="label label-default">{{todo.items.length}}</span> </h1> </div> <div class="panel"> <div class="input-group"> <input type="text" class="form-control"/> <span class="input-group-btn"> <button class="btn bth-default">Add</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Description</th> <th>Done</th> <th> </th> </tr> </thead> <tbody> <tr ng-repeat="item in todo.items"> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done" /></td> <td>{{item.done}}</td> </tr> </tbody> </table> </div> </body> </html>
看到几个比较特殊的点
1.html标签中多一个ng-app="myApp"
2.body标签中多一个ng-controller="MyCtrl"
3.tr标签中多了ng-repeat="item in todo.items"
4.{{}}是取值表达式
5.script里面多了一些angular.module 以及myApp.controller等方法
1.根据AngularJS的解释是,一个文档中只有一个ng-app的属性,可以说是文档的唯一标识,当angular发现这个标识的时候,下面的文档树都要经过angular编译
2.ng-controller的指令就是作为前端处理业务的controller层
3.作为一个前端或者后端,看到这个就会想到是一个for遍历集合
4.不用说了,就是取元素的值
5.这个两个方法数据绑定和处理的业务逻辑。
这里还提一点,$scope是一个全局变量,还有就是数据双向绑定,里面用到了一个ng-model指令,这个自己也在学习中,希望以后学习中能够知道他们的原理。
下面可以看到$scope是全局,在对象上增加一个方法,可以在html元素上 直接使用这个方法,看标题栏,还有几个事情没有做的计数
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>angularJS学习</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/bootstrap-theme.css"> <script src="../js/angular.min.js"></script> <script type="text/javascript"> var model = { user:"Lifeng", items:[{ action:"Buy Flowers",done:false },{ action:"Get Shoes",done:false },{ action:"Collect Tickets",done:true },{ action:"Call Joe",done:false }] } var myApp = angular.module("myApp",[]); myApp.controller("MyCtrl",function($scope){ $scope.todo = model; $scope.incompleteCount = function(){ var _count = 0; angular.forEach($scope.todo.items,function(item){ if(!item.done){ _count++ } }); return _count; } }) </script> </head> <body ng-controller="MyCtrl"> <div class="page-header"> <h1>{{todo.user}}‘s To Do List <span class="label label-default" ng-hide="incompleteCount() == 0">{{incompleteCount()}}</span> </h1> </div> <div class="panel"> <div class="input-group"> <input type="text" class="form-control"/> <span class="input-group-btn"> <button class="btn bth-default">Add</button> </span> </div> <table class="table table-striped"> <thead> <tr> <th>Description</th> <th>Done</th> <th> </th> </tr> </thead> <tbody> <tr ng-repeat="item in todo.items"> <td>{{item.action}}</td> <td><input type="checkbox" ng-model="item.done" /></td> <td>{{item.done}}</td> </tr> </tbody> </table> </div> </body> </html>
时间: 2024-11-10 01:10:51