angularJS快速入门
1.引入脚本文件
<link rel="stylesheet" href="http://lib.sinaapp.com/js/bootstrap/v3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="http://lib.sinaapp.com/js/jquery/2.0.1/jquery-2.0.1.min.js"></script>
<script src="http://lib.sinaapp.com/js/bootstrap/v3.0.0/js/bootstrap.min.js"></script>
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular-route.min.js"></script>
2.显示值
<body>
<div ng-app="app" ng-controller="controller">
<h1>{{ inputValue }}</h1>
</div>
</body>
<script type="text/javascript">
var app=angular.module('app',[]);
app.controller('controller',function($scope){
$scope.inputValue="william's home";
});
</script>
3.双向绑定
<div ng-app="app" ng-controller="controller">
<input type="text" ng-model="inputValue">
<h1>{{ inputValue }}</h1>
</div>
修改input中的值，h1标题中的内容也会修改
4添加事件
<body>
<div ng-app="app" ng-controller="controller">
<button ng-click="myclick()">Click Me</button>
</div>
</body>
<script type="text/javascript">
var app=angular.module('app',[]);
app.controller('controller',function($scope){
$scope.myclick=function(){
alert("click")
}
});
</script>
可以看出对$scope扩展属性和方法，就可以在html通过ng-model,ng-click使用
5 显示表格
<body>
<div ng-app="app" ng-controller="controller">
<table class="">
<tr ng-repeat="x in names">
<td>{{ x.firstName }}</td>
<td>{{ x.lastName }}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var app=angular.module('app',[]);
app.controller('controller',function($scope){
$scope.names=[
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
});
</script>
6通过get获取数据
<body>
<div ng-app="app" ng-controller="controller">
<table class="">
<tr ng-repeat="x in names">
<td>{{ x.firstName }}</td>
<td>{{ x.lastName }}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var app=angular.module('app',[]);
app.controller('controller',function($scope,$http){
$http.get("data.json")
.success(function (response) {$scope.names = response;});
});
</script>
data.json
[
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
get后的url可以替换为任意地址，比如服务端的rest api地址，只要返回类型是json即可
angularJS快速入门的更多相关文章
- AngularJS快速入门指南20：快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南19：示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南18：Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南17：Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
- AngularJS快速入门指南16：Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南15：API
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南14：数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南13：表单
一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...
- AngularJS快速入门指南12：模块
AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...
- AngularJS快速入门指南11：事件
AngularJS拥有自己的HTML事件指令. ng-click指令 ng-click指令定义了AngularJS的click事件. <div ng-app="" ng-co ...
随机推荐
- 数据结构算法集---C++语言实现
//数据结构算法集---C++语言实现 //各种类都使用模版设计,可以对各种数据类型操作(整形,字符,浮点) /////////////////////////// // // // 堆栈数据结构 s ...
- Codeforces Round #335 (Div. 1)--C. Freelancer's Dreams 线性规划对偶问题+三分
题意:p, q,都是整数. sigma(Ai * ki)>= p, sigma(Bi * ki) >= q; ans = sigma(ki).输出ans的最小值 约束条件2个,但是变量k有 ...
- 《Mathematical Olympiad——数论》——整除
数论这个东西吧,虽说也是高中IMOer玩的数学游戏,颇具美学性的证明比较多.就目前所知,它在算法里是一些加密技术的基础,不多言,开始具体题目的分析. 问题一:已知数列{an},且a0 = 2 , a1 ...
- HDU 畅通工程系列
畅通工程系列都是比较裸的最小生成树问题,且是中文题目,不赘述了. 1.HDU 1863 畅通工程 题意:一个省有很多村庄,其中一些之间是可以建公路的,每条公路都需要不同的代价,问代价最小的情况下将所有 ...
- LA 3263 欧拉定理
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...
- Esxi 5.0下配置LSI SAS RAID卡
公司有几台服务器,安装的是ESXI5.0的虚拟机,原来使用的是普通的台式机,现在新购的专用服务器并安装的LSI 8708 SAS RAID卡(服务器自带的板载RAID卡ESXI不支持),现在要将虚拟机 ...
- 来自投资银行的20个Java面试题
问题一:在多线程环境中使用HashMap会有什么问题?在什么情况下使用get()方法会产生无限循环? HashMap本身没有什么问题,有没有问题取决于你是如何使用它的.比如,你在一个线程里初始化了一个 ...
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...
- dom4j处理java中xml还是很方便的
http://blog.csdn.net/chenghui0317/article/details/11486271 输入: String flighter = RequestUtil.get(&qu ...
- 由阿里巴巴一道笔试题看Java静态代码块、静态函数、动态代码块、构造函数等的执行顺序
一.阿里巴巴笔试题: public class Test { public static int k = 0; public static Test t1 = new Test("t1&qu ...