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服务器 ...
随机推荐
- Microsoft.Jet.Oledb.4.0 提供者並未登錄於本機電腦上
最近把一些 .NET2.0 的專案從 x86 的 Server 搬到 x64 的 Server 上,一直都相安無事,直到今天才發現使用 Oledb 讀取 Excel 的時候會跳出「'Microsoft ...
- OGG问题 ORA-01403的处理办法
认识logdump分析工具及常用命令:http://book.51cto.com/art/201202/319253.htm http://www.killdb.com/2012/09/01/gold ...
- 在网上浏览.NET的所有代码，并且让你的Visual Studio的go to definition(F12)指向在线代码
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在网上浏览.NET的所有代码,并且让你的Visual Studio的go to definition(F ...
- 【转载】ABAP-如何读取内表的字段名称
原文地址:ABAP-如何读取内表的字段名称 *&---------------------------------------------------------------------* ...
- VM下的linux系统上不了网?? 使用putty远程登录不上linux的解决方法？
背景:昨晚想尝试一下用putty远程登录我的linux系统,悲剧的是,我竟然连接不上,显示 connection refused ,连接被拒绝.于是我就想看看能不能在linux下看看能不能访问百度 ...
- 利用Linq对集合元素合并、去重复处理
本文转载:http://www.cnblogs.com/yjmyzz/archive/2012/12/18/2823170.html 今天写代码时,需要对一个数组对象中按一定规则合并.去重处理,不想再 ...
- 安装Win7和Ubuntu12.04双系统后，意外删除Ubuntu12.04引导文件，出现error:unknown filesystem；grub rescue>错误的解决方案
很久之前在Win7基础上安装了Ubuntu12.04系统,采用硬盘安装的方法.分了1个10G的硬盘分区F盘用于存放Ubuntu12.04的引导文件,其实完全可以制作一个Ubuntu12.04的U盘启动 ...
- 标准差（standard deviation）和标准误差（standard error）你能解释清楚吗？
by:ysuncn(欢迎转载,请注明原创信息) 什么是标准差(standard deviation)呢?依据国际标准化组织(ISO)的定义:标准差σ是方差σ2的正平方根:而方差是随机变量期望的二次偏差 ...
- oracle数据库敏感操作前创建还原点
我们都知道,在vmware虚拟机中有一个拍摄快照的功能,我们可以把系统此时的状态保存下来,一方后面遇到不测事件,也好将系统还原,oracle中也有类似功能. 首先创建一张学生表: 向学生表中插入一条数 ...
- oracle设定用户密码使用时间
强制用户定期更换密码,要怎么设置? 假设密码用10天之后必须修改,宽限期为2天: 把电脑时间往后调十天,然后登录: 系统提示用户密码两天内失效,这时把电脑系统再往后调两天,然后登录: 系统提示密码已经 ...