最近突然发现，Coding.net真是一个神奇的网站。这各网站90%的请求都是通过ajax完成的。可以发现，不管你点任何链接，网页都不会刷新，点击浏览器的返回或前进按钮也是这样，打开chrome的开发者工具的network面板可以看到大量的ajax请求被发出，每个ajax返回的只有数据，没有视图代码。对我这种才艺不精的人而言，真的觉得很神奇。
我是个比较喜欢研究新鲜事务的人，于是琢磨了一阵子。发现这个网站用到了一种技术-AngularJS。于是熬夜学了下这门神奇的技术。
AngularJS是一个基于MVC理念的JavaScript框架，它主要用来增强html语言，开发一些单页应用。
AngularJS比较重要的概念是 指令、控制器、表达式 。下面附上一段示例代码
1 <?php 2 /** 3 * Created by PhpStorm. 4 * User: lvyahui 5 * Date: 15-5-5 6 * Time: 下午1:22 7 */ 8 ?> 9 <html> 10 <head lang="en"> 11 <meta charset="UTF-8"> 12 <title></title> 13 <link rel="stylesheet" href="css/main.css"/> 14 <script src="js/angular-1.2.5.min.js"></script> 15 </head> 16 <body ng-app=""> 17 <div ng-controller="customerController"> 18 <input type="text" ng-model="uname"/> 19 <table> 20 <tr ng-repeat="x in names | filter:uname | orderBy : 'country'"> 21 <!--注意这个是严格区分大小写--> 22 <td>{{x.uname | uppercase}}</td><td>{{x.country}}</td> 23 </tr> 24 </table> 25 </div> 26 <script> 27 function customerController($scope,$http){ 28 $http.get('/mysql.php').success( 29 function(resp){ 30 console.log(resp); 31 $scope.names = resp; 32 } 33 ); 34 } 35 </script> 36 </body> 37 </html>
上面的用到的指令有
- ng-app: 限定了AngularJS的作用域，带有这个节点的dom元素对应了AngularJS的根元素，一般一个页面只有一个ng-app，也可以有多个，但稍微麻烦一点，也没必要
- ng-controller:指定了一个控制这个dom元素的控制器，实际是一个javascript对象，dom元素对应了对象中的$scope。
- ng-model:指定了以个数据绑定，立即将输入绑定到以个js变量上，双向绑定
- ng-repeat:指定以这个dom节点为模板迭代集合，这个集合会跟以个javascript变量绑定，这个变量可以是$scope的属性，一旦这个变量被改变，视图会马上更新反之亦然，这是双向绑定。
上面的td元素中以表达式的方式输出了几个的元素的属性，并且为元素添加了一个简单的大写过滤器，将uname全部转成大写输出，上面还定义了两个过滤器filter和orderBy，一个用来过滤输入，一个用来排序。
上面的script中定义了一个customer控制器。在这个控制器中请求了一个url，这个url将返回一个json对象，更确切的说是一个js数组。然后立马将响应赋值给names。这样之前ng-repeat绑定的变量就会马上重新渲染。
下面是mysql.php做的事情
1 <?php 2 /** 3 * Created by PhpStorm. 4 * User: lvyahui 5 * Date: 15-5-5 6 * Time: 下午1:33 7 */ 8 9 header('Access-Control-Allow-Origin:*'); 10 header('Content-Type:text/html;charset=UTF-8'); 11 12 $conn = new mysqli('localhost','root','root','mytestdb'); 13 14 15 /* 16 $datas = json_decode(require_once('http.php')); 17 foreach($datas as $data){ 18 $sql = 'insert into customers (uname,country) VALUES ("'.$data->Name.'","'.$data->Country.'")'; 19 print_r($sql.'<br>'); 20 $conn->query($sql); 21 } 22 $conn->close(); 23 */ 24 $results = $conn->query('select uname,country from customers'); 25 $conn->close(); 26 27 $data = array(); 28 29 while($rs = $results->fetch_array(MYSQLI_ASSOC)){ 30 $data[] = array( 31 'uname' => $rs['uname'], 32 'country' => $rs['country'] 33 ); 34 } 35 echo json_encode($data);
这里用到了数据库和一个数据文件http.php文件（这个文件是为了建立数据库里的数据的）
数据库
1 create database mytestdb default character set utf8 collate utf8_general_ci; 2 3 4 create table customers( 5 id int auto_increment primary key, 6 uname varchar(64) not null, 7 country varchar(64) not null 8 );
http.php数据文件
1 <?php 2 return ' 3 [ 4 { 5 "Name" : "Alfreds Futterkiste", 6 "City" : "Berlin", 7 "Country" : "Germany" 8 }, 9 { 10 "Name" : "Berglunds snabbköp", 11 "City" : "Luleå", 12 "Country" : "Sweden" 13 }, 14 { 15 "Name" : "Centro comercial Moctezuma", 16 "City" : "México D.F.", 17 "Country" : "Mexico" 18 }, 19 { 20 "Name" : "Ernst Handel", 21 "City" : "Graz", 22 "Country" : "Austria" 23 }, 24 { 25 "Name" : "FISSA Fabrica Inter. Salchichas S.A.", 26 "City" : "Madrid", 27 "Country" : "Spain" 28 }, 29 { 30 "Name" : "Galería del gastrónomo", 31 "City" : "Barcelona", 32 "Country" : "Spain" 33 }, 34 { 35 "Name" : "Island Trading", 36 "City" : "Cowes", 37 "Country" : "UK" 38 }, 39 { 40 "Name" : "Königlich Essen", 41 "City" : "Brandenburg", 42 "Country" : "Germany" 43 }, 44 { 45 "Name" : "Laughing Bacchus Wine Cellars", 46 "City" : "Vancouver", 47 "Country" : "Canada" 48 }, 49 { 50 "Name" : "Magazzini Alimentari Riuniti", 51 "City" : "Bergamo", 52 "Country" : "Italy" 53 }, 54 { 55 "Name" : "North/South", 56 "City" : "London", 57 "Country" : "UK" 58 }, 59 { 60 "Name" : "Paris spécialités", 61 "City" : "Paris", 62 "Country" : "France" 63 }, 64 { 65 "Name" : "Rattlesnake Canyon Grocery", 66 "City" : "Albuquerque", 67 "Country" : "USA" 68 }, 69 { 70 "Name" : "Simons bistro", 71 "City" : "København", 72 "Country" : "Denmark" 73 }, 74 { 75 "Name" : "The Big Cheese", 76 "City" : "Portland", 77 "Country" : "USA" 78 }, 79 { 80 "Name" : "Vaffeljernet", 81 "City" : "Århus", 82 "Country" : "Denmark" 83 }, 84 { 85 "Name" : "Wolski Zajazd", 86 "City" : "Warszawa", 87 "Country" : "Poland" 88 } 89 ] 90 ';
css样式
1 table, th , td { 2 border: 1px solid grey; 3 border-collapse: collapse; 4 padding: 5px; 5 } 6 table tr:nth-child(odd) { 7 background-color: #f1f1f1; 8 } 9 table tr:nth-child(even) { 10 background-color: #ffffff; 11 }
最后的效果
在文本框里输内容可立即过滤结果
