angular.js初探-阿里云开发者社区

angular.js初探

2015-07-27 882

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 2015年7月27日 22:26:35 星期一用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复首先要引用js文件, 我这里使用的是bootstrap提供的cdn 接下来是自己的js代码 1 //bbsController 2 bbsApp = angular.

2015年7月27日 22:26:35 星期一

用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复

首先要引用js文件, 我这里使用的是bootstrap提供的cdn

<script src="http://cdn.bootcss.com/angular.js/1.4.3/angular.js"></script>

接下来是自己的js代码

 1 //bbsController
 2 bbsApp = angular.module('bbsApp',[]);
 3 // bbsApp.controller('bbslist',['$scope',function($scope) {
 4 //     $scope.answers= getBBSData();
 5 //     $scope.bbsUrl = getBBSUrl();
 6 //     //事件
 7 //     $scope.showReplay = function(index) {
 8 //         var id = $scope.answers[index].id;
 9 //         var url = $scope.bbsUrl+'newbbsreplay?fid='+id;
10 //         $http.get(url).success(function(jsonReplay){
11 //             var replayData = 'replay_'+id;
12 //             $scope.replayData = jsonReplay;
13 //         });
14 //     }
15 
16 // }]);
17 
18 bbsApp.controller('bbslist',function($scope, $http) {
19     $scope.answers= getBBSData();
20     $scope.bbsUrl = getBBSUrl();
21     //点击事件
22     $scope.showReplay = function(index) {
23         var id = $scope.answers[index].id;
24         var url = $scope.bbsUrl+'newbbsreplay?fid='+id;
25         $http.get(url).success(function(jsonReplay){
26             for (i in jsonReplay) {
27                 var intent = '';
28                 for (var j = 0; j< jsonReplay[i].level; j++) {
29                     intent += '|-';
30                 }
31                 jsonReplay[i].intent = intent;
32             }
33             $scope.answers[index].replays = jsonReplay;
34         });
35     }
36 });

这里第2行创建一个module, 就是创建一个angular BOOS级的功能模块

第3行和第18行是给这个模块绑定一个处理函数, 函数名字叫 'bbslist', 函数体是一个匿名函数

上边第3行到第16行, 也是可以用的, 只是这种方式, 匿名函数只能接收一个$scope参数,

对比一下18行, 这个方法可以传递多个内置参数, 第18行传递了两个参数, $scope, $http

接下来是html代码:

 1 <!DOCTYPE html>
 2 <html ng-app="bbsApp">
 3 <head>
 4     <meta charset="utf-8">
 5     <script src="http://cdn.bootcss.com/angular.js/1.4.3/angular.js"></script>
 6     <script src="<?= $baseUrl ?>bbs/js/bbs.js"></script>
 7 </head>
 8     <body ng-controller="bbslist">
 9         <div ng-repeat="answer in answers">
10             <button ng-click="showReplay($index)">查看回复</button>
11             {{answer.id}} => {{answer.nickname}} => {{answer.content}}
12             <div ng-repeat="replay in answer.replays">
13                 {{replay.intent}}{{replay.id}} => {{replay.nickname}} => {{replay.content}}
14             </div>
15         </div>
16     </body>
17     <script type="text/javascript">
18         function getBBSData () 
19         {
20             var jsonBBS = <?= $r ?>;
21             return jsonBBS;
22         }
23 
24         function getBBSUrl()
25         {
26             return "<?= $controllerUrl ?>";
27         }
28     </script>
29 </html>