AngularJS初体验
最近突然发现，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;
}
最后的效果
在文本框里输内容可立即过滤结果
AngularJS初体验的更多相关文章
- angularJs初体验，实现双向数据绑定！使用体会：比较爽
使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...
- MVC + AngularJS 初体验(实现表单操作)
AngularJS AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). Ang ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- day21—AngularJS学习初体验
转行学开发,代码100天——2018-04-06 今天按照学习计划安排,开始AngularJS的学习. 关于AngularJS,在菜鸟教程上这样介绍 好吧,Angular学习起来非常简单,哈哈,现在就 ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- ionicframework I ------------- 初体验
ionicframework I ------------- 初体验 Create hybrid mobile apps with the web technologies you love. Fr ...
- Node.js 网页瘸腿爬虫初体验
延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...
随机推荐
- Yii PHP 框架分析（二）
Yii PHP 框架分析(二)作者:wdy http://hi.baidu.com/delphiss/blog/item/54597af595085ad3f3d38552.html Yii是基于组件( ...
- 批处理(.bat)中使用相对路径
批处理中使用相对路径,只需要用cd /d %~dp0代替绝对路径就可以了. ->cd /d ->%~dp0 %0为当前批处理文件 %~d0 是指批处理所在的盘符 %~dp0 是指批处理所在 ...
- 如何在google test中指定只运行一部分测试
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何在google test中指定只运行一部分测试.
- yii2
yii2框架官方说明文档 http://www.yiiframework.com/doc/guide/2.0/zh_cn/caching.page yii2创建您的第一个application应用 h ...
- Karma-Jasmine之安装与实例详解（一）
本文先介绍karma-jasmine的安装.接下来的(二)中主要通过实例利用断言库详解karma-jasmine如何进行单元测试. Karma介绍 首先说一下karma,官方是这样给出的,karma不 ...
- 色情不是我的所有——在法律边缘起舞的 FC2
[核心提示] 世界上最大的色情站点之中的一个这项「殊荣」只是是 FC2 无心插柳被用户戴上的一顶帽子,这个从 1999 年成立至今已经超过 15 年历史的互联网活化石,远比你想象中更加高深莫測. 一个 ...
- struts2操作pojo之小工程struts2ActionPOJO
下面的源码和操作步骤依据java web整合开发王者归来第16章,16.7 Action中使用POJO:p464 pojo:就是javabean的意思,下面就是struts2操作javabean代码过 ...
- java的一些程序
1.文件读取并打印 import java.io.*;public class readandprint{//*********Found********public static void main ...
- hdu2041java
超级楼梯 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- PHP表单验证内容是否为空
内容为空效果图为: 填写内容效果图: 下面是验证程序的代码: <!doctype html> <html> <head> <meta http-equiv=& ...