AngularJS初体验

眼前突然发现,Coding.net当成贰个神奇的网站。那各网站百分之九十的请求都以因此ajax完成的。能够窥见,不管你点其余链接,网页都不会刷新,点击浏览器的回来或发展按钮也是这么,打开chrome的开发者工具的network面板能够见到多量的ajax请求被爆发,每一种ajax再次来到的唯有多少,没有视图代码。对本身那种才艺不精的人而言,真的觉得很神奇。

本人是个相比较喜欢钻研极度事务的人,于是钻探了片刻。发现这么些网站用到了一种技术-AngularJS。于是熬夜学了下那门神奇的技术。

AngularJS是1个依照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:钦定了3个说了算那些dom成分的控制器,实际是二个javascript对象,dom成分对应了对象中的$scope。
  • ng-model:钦定了以个数据绑定,立即将输入绑定到以个js变量上,双向绑定
  • ng-repeat:钦命以那么些dom节点为模板迭代集合,那个集合会跟以个javascript变量绑定,这些变量能够是$scope的天性,一旦这么些变量被改成,视图会立时更新依旧,那是双向绑定。

上面包车型地铁td成分中以表明式的点子出口了多少个的成分的性质,并且为成分添加了三个简约的大写过滤器,将uname全体转成大写输出,上边还定义了四个过滤器filter和orderBy,二个用来过滤输入,1个用来排序。

下边包车型地铁script中定义了2个customer控制器。在那些控制器中呼吁了三个url,那么些url将赶回贰个json对象,更适于的正是3个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);

此处运用了数据库和1个数据文件http.php文件(那几个文件是为着建立数据Curry的数据的)

数据库

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图片 2

 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 }

末段的效益

图片 3

在文本框里输内容可及时过滤结果

相关文章