AngularJSAngularJS初体验

日前出人意料意识,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数据文件

AngularJS 1AngularJS 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 ';

AngularJS数据文件

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 }

最后之效力

AngularJS 3

当文本框里输内容可马上过滤结果

相关文章