AngularJS初体验

最近突然发现，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 }

最后的效果

在文本框里输内容可立即过滤结果