angularjs--$http,路由

angularjs--$http,路由

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6     <title>index</title>
  7     <link href="{$Think.const.CSSURL}bootstrap.min.css" rel="stylesheet" type="text/css"/>
  8     <script src="{$Think.const.JS}jquery.min.js" type="text/javascript"></script>
  9     <script src="{$Think.const.JS}bootstrap.min.js" type="text/javascript"></script>
 10     <script src="{$Think.const.JS}angular.min.js" type="text/javascript"></script>
 11     <script src="{$Think.const.JS}angular-route.min.js" type="text/javascript"></script>
 12     <link href="{$Think.const.CSSURL}home/index.css" rel="stylesheet" type="text/css"/>
 13 </head>
 14 <body ng-app="myApp" class="ng-scope">
 15 
 16 <script type="text/ng-template" id="home">
 17     <div class="container">
 18         <h1 class="page-header">{{content}}</h1>
 19         <table class="table table-striped table-bordered table-hover">
 20             <tr>
 21                 <th>id</th>
 22                 <th>name</th>
 23                 <th>city</th>
 24                 <th>price</th>
 25                 <th>number</th>
 26                 <th>picture</th>
 27             </tr>
 28             <tr ng-repeat="row in rows">
 29                 <td>{{row.id}}</td>
 30                 <td>{{row.name}}</td>
 31                 <td>{{row.city}}</td>
 32                 <td>{{row.price}}</td>
 33                 <td>{{row.number}}</td>
 34                 <td>{{row.picture}}</td>
 35             </tr>
 36         </table>
 37     </div>
 38 </script>
 39 
 40 <script type="text/ng-template" id="about">
 41     <div class="container">
 42         <h1 class="page-header">{{content}}</h1>
 43         <table class="table table-striped table-bordered table-hover">
 44             <tr>
 45                 <th>id</th>
 46                 <th>name</th>
 47                 <th>price</th>
 48                 <th>detail</th>
 49                 <th>pic</th>
 50                 <th>createtime</th>
 51                 <th>删除</th>
 52             </tr>
 53             <tr ng-repeat="row in rows" id="tr{{row.id}}">
 54                 <td>{{row.id}}</td>
 55                 <td>{{row.name}}</td>
 56                 <td>{{row.price}}</td>
 57                 <td>{{row.detail}}</td>
 58                 <td>{{row.pic}}</td>
 59                 <td>{{row.createtime}}</td>
 60                 <th><a href="#" ng-click="del(row.id)">删除</a></th>
 61             </tr>
 62         </table>
 63     </div>
 64 </script>
 65 
 66 
 67 <div>
 68     <div id="index">
 69         <a href="#/home">Home</a>
 70         <a href="#/about">About</a>
 71     </div>
 72 
 73     <div ng-view=""></div>
 74 </div>
 75 
 76 </body>
 77 <script>
 78     angular.module("myApp",["ngRoute"])
 79             .controller("HomeController",function($scope,$route,$http){
 80                 $scope.$route = $route;
 81                 $scope.content = "Hello,Home!!!";
 82                 $http.post("http://localhost/tkphp/index.php/home/index/data").
 83                 success(function(res){
 84                     $scope.rows = res;
 85                 });
 86             })
 87             .controller("AboutController",function ($scope,$route,$http) {
 88                 $scope.$route = $route;
 89                 $scope.content = "Hello,About!!!";
 90                 $http.post("http://localhost/tkphp/index.php/home/index/newData").
 91                 success(function(res){
 92                     $scope.rows = res;
 93                 });
 94                 
 95                 $scope.del = function (newID) {
 96                     $http.get("http://localhost/tkphp/index.php/home/index/del/id/"+newID).
 97                     success(function (res) {
 98                         if(res == "1"){
 99                             tr = "tr" +newID;
100                             $("#"+tr).hide();
101                         }
102                     });
103                 }
104             })
105             .config(function($routeProvider){
106                 $routeProvider.
107                 when("/home",{
108                     templateUrl:"home",
109                     controller:"HomeController"
110                 }).
111                 when("/about",{
112                     templateUrl:"about",
113                     controller:"AboutController"
114                 }).
115                 otherwise({
116                     redirectTo:"/home"
117                 })
118             });
119 </script>
120 </html>
posted @ 2017-02-04 22:51  yuge790615  阅读(113)  评论(0)  编辑  收藏  举报