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服务器 ...
随机推荐
- Guava库
Guava是一个非常棒的库,它就是Java标准库"所缺失的那部分",是一个 Google 的基于java1.6的类库集合的扩展项目,包括 collections, caching, ...
- CONTROLS: <> TYPE TABLEVIEW USING SCREEN<>.在 ABAP/4 中声明表格 控制
在 ABAP/4 中声明表格 控制 在屏幕中使 用表格控制 时,必须在 ABAP/4 程序中同时 声明表格控 制结构和表 格控制字段 . 例如: TABLES: SFLIGHT. CONTROLS ...
- 关于64位Linux配置android开发环境出现 No such file or directory
前几天在64位系统上部署android开发环境的时候出现了这种问题 /aapt: No such file or directory 通过谷老师,知道原理android SDK里面的程序全是32位的, ...
- java 递归函数
一.递归函数,通俗的说就是函数本身自己调用自己... 如:n!=n(n-1)! 你定义函数f(n)=nf(n-1) 而f(n-1)又是这个定义的函数..这就是递归 二.为什么要用递归:递归的目 ...
- myeclipes使用过程中的错误解决方案
1.‘Building workspace’ has encountered a problem. Errors occurred during the build. 解决方案:这样的错误,主要是由于 ...
- [R] Draw a wordcloud
# 加载rJava.Rwordseg库 library(rJava); library(Rwordseg); library(RColorBrewer); # == 读入数据 lecture=read ...
- view中的setTag和getTag方法的理解
下面是一段自定义适配器中的getView方法,其中使用了view的一个setTag和getTag方法 View中的setTag(Onbect)表示给View添加一个格外的数据(相当于缓存),以后可以用 ...
- 初步掌握HBase
1.HBase概述 HBase是hadoop生态系统中的重要组成部分,是一个开源的.面向列.适合存储海量非结构化数据或半结构化数据,具备高可靠性.高性能.可灵活扩展伸缩.支持实时数据读写的分布式存储系 ...
- Visual Studio 调试技巧 （三） -- 调试第三方组件代码
上次我们提到,没有源代码而且没有调试符号,我们也可以 Debug.有人可能会问,我什么时候需要在这种情况下调试吗?! 是的.比方说,我们用了某些第三方的组件,这些组件里面难免也会有 Bug.就算是微软 ...
- Java 反射学习笔记
要学反射,先要了解Class这个类,Class是所有Java类的一个总称,Class的实例中存储的是一个类的字节码,获取Class的实例有三种方式: System.class new Date().g ...