angular 实践小项目（仿微博评论）学习总结

来源：互联网发布：詹姆斯生涯场均数据编辑：程序博客网时间：2024/06/06 18:51

<!doctype html><html ng-app="zns_weibo"><head><meta charset="utf-8"><title>微博评论</title><link href="style/weibo.css" rel="stylesheet" type="text/css" /><script src="angular-1.6.8.js"></script><script>var app=angular.module('zns_weibo', []);app.controller('weibo', function ($scope, $http){$scope.replies=[];$scope.pages=[];$scope.curPage=1;//获取当前页留言并显示$scope.getPage=function(p) {$scope.curPage=p;setCur($scope.pages.length);$http.get('weibo.php', {params: {act: 'get', page: p}}).success(function (arr){$scope.replies=arr;}).error(function (){alert('读取失败，请稍后重试');});}getPage(1);//提交留言$scope.submitMsg=function (){$http.get('weibo.php', {params: {act: 'add', content: $scope.inputText}}).success(function (res){$scope.replies.unshift({id:res.id,content:$scope.inputText,time:res.time,acc:0,ref:0});if($scope.replies.length>6){$scope.replies.pop();}$scope.inputText='';}).error(function (){alert('提交失败');});};//页码function setCur(count){$scope.pages=[];for(var i=1;i<=count;i++){if(i==$scope.curPage){$scope.pages.push({num: i, className: 'active'});}else{$scope.pages.push({num: i, className: ''});}}}// 获取留言页数，并通过setCur函数设置当前页的className位'active',其他页的className为''空$http.get('weibo.php', {params: {act: 'get_page_count'}}).success(function (json){setCur(json.count);}).error(function (){alert('错误');});//$scope.pages=[{num: 1, className: ''},{num: 2, className: 'active'},{num: 3, className: ''}];//顶和踩的函数$scope.fnAcc=function (id){$http.get('weibo.php', {params: {act: 'acc', id: id} //id为该条评论的id}).success(function (){//根据id找到该条评论，并将acc加一for(var i=0;i<$scope.replies.length;i++){if($scope.replies[i].id==id){$scope.replies[i].acc++;}}}).error(function (){alert('错误');});};/* 改进方法： * $scope.fnAcc=function (id，acc){ *$http.get('weibo.php', { *params: {act: 'acc', id: id} //id为该条评论的id *}).success(function (){ *acc++; *}).error(function (){ *alert('错误'); *}); * }; * 文中调用： * ng-click="fnAcc(reply.id, reply.acc)" */$scope.fnRef=function (id){$http.get('weibo.php', {params: {act: 'ref', id: id}}).success(function (){for(var i=0;i<$scope.replies.length;i++){if($scope.replies[i].id==id){$scope.replies[i].ref++;}}}).error(function (){alert('错误');});};});</script></head><body ng-controller="weibo"><div class="znsArea"><!--留言-->     <div class="takeComment">        <textarea name="textarea" class="takeTextField" id="tijiaoText" ng-model="inputText"></textarea>        <div class="takeSbmComment">            <input type="button" class="inputs" value="" ng-click="submitMsg()" />            <span>(可按 Enter 回复)</span>        </div>    </div><!--已留-->    <div class="commentOn">        <div class="noContent" ng-show="replies.length==0">暂无留言</div>        <div class="page">        <a href="javascript:;" ng-repeat="item in pages" class="{{item.className}}" ng-click="getPage(item.num)">{{item.num}}</a>        </div>        <div class="messList">        <div class="reply" ng-repeat="reply in replies">                <p class="replyContent">{{reply.content}}</p>                <p class="operation">                    <span class="replyTime">{{reply.time*1000|date:"yyyy-MM-dd HH:mm:ss"}}</span>                    <span class="handle">                    <a href="javascript:;" class="top" ng-click="fnAcc(reply.id)">{{reply.acc}}</a>                        <a href="javascript:;" class="down_icon" ng-click="fnRef(reply.id)">{{reply.ref}}</a>                        <a href="javascript:;" class="cut">删除</a>                    </span>                </p>            </div>        </div>        <div class="page" ng-show="replies.length>0"><a href="javascript:;" ng-repeat="item in pages" class="item.className" ng-click="getPage(item.num)">{{item.num}}</a></div>    </div></div></body></html>

Angular JS 作为MVx框架，能够很好地将数据和表现分离，我们只需要关注数据，通过操作数据来改变视图的表现。

上面的代码中应用了一部分angular的功能，还有其他强大的功能帮助我们更好地操作数据。

阅读全文

'); })();