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>
原文：http://www.cnblogs.com/yuge790615/p/6366557.html