最近突然发现，Coding.net真是一个神奇的网站。这各网站90%的请求都是通过ajax完成的。可以发现，不管你点任何链接，网页都不会刷新，点击浏览器的返回或前进按钮也是这样，打开chrome的开发者工具的network面板可以看到大量的ajax请求被发出，每个ajax返回的只有数据，没有视图代码。对我这种才艺不精的人而言，真的觉得很神奇。
我是个比较喜欢研究新鲜事务的人，于是琢磨了一阵子。发现这个网站用到了一种技术-AngularJS。于是熬夜学了下这门神奇的技术。
AngularJS是一个基于MVC理念的JavaScript框架，它主要用来增强html语言，开发一些单页应用。
AngularJS比较重要的概念是 指令、控制器、表达式 。下面附上一段示例代码
<?php
/**
* Created by PhpStorm.
* User: lvyahui
* Date: 15-5-5
* Time: 下午1:22
*/
?>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/main.css"/>
<script src="js/angular-1.2.5.min.js"></script>
</head>
<body ng-app="">
<div ng-controller="customerController">
<input type="text" ng-model="uname"/>
<table>
<tr ng-repeat="x in names | filter:uname | orderBy : 'country'">
<!--注意这个是严格区分大小写-->
<td>{{x.uname | uppercase}}</td><td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
function customerController($scope,$http){
$http.get('/mysql.php').success(
function(resp){
console.log(resp);
$scope.names = resp;
}
);
}
</script>
</body>
</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做的事情
<?php
/**
* Created by PhpStorm.
* User: lvyahui
* Date: 15-5-5
* Time: 下午1:33
*/ header('Access-Control-Allow-Origin:*');
header('Content-Type:text/html;charset=UTF-8'); $conn = new mysqli('localhost','root','root','mytestdb'); /*
$datas = json_decode(require_once('http.php'));
foreach($datas as $data){
$sql = 'insert into customers (uname,country) VALUES ("'.$data->Name.'","'.$data->Country.'")';
print_r($sql.'<br>');
$conn->query($sql);
}
$conn->close();
*/
$results = $conn->query('select uname,country from customers');
$conn->close(); $data = array(); while($rs = $results->fetch_array(MYSQLI_ASSOC)){
$data[] = array(
'uname' => $rs['uname'],
'country' => $rs['country']
);
}
echo json_encode($data);
这里用到了数据库和一个数据文件http.php文件（这个文件是为了建立数据库里的数据的）
数据库
create database mytestdb default character set utf8 collate utf8_general_ci; create table customers(
id int auto_increment primary key,
uname varchar(64) not null,
country varchar(64) not null
);
http.php数据文件
<?php
return '
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
';
数据文件
css样式
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
最后的效果
在文本框里输内容可立即过滤结果