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 ...
随机推荐
- Jenkins 十： 访问控制
1. 打开“系统管理” –> “Configure Global Security”. 2. 选中“启用安全”. 3. 找到“安全域”,选中“Jenkins专有数据库”,选中“允许用户注册”. ...
- Girls' research - HDU 3294 （Manacher处理回文串）
题目大意:给以一个字符串,求出来这个字符串的最长回文串,不过这个字符串不是原串,而是转换过的,转换的原则就是先给一个字符 例如 'b' 意思就是字符把字符b转换成字符 a,那么c->b, d-& ...
- 常用的Linux操作二
1.sudo 说明:以系统管理者的身份执行指令,也就是说,经由 sudo 所执行的指令就好像是 root 亲自执行 . 2.who 说明 : 显示系统中有那些使用者正在上面,显示的资料包含 ...
- iphone匹配邮箱的正则表达式
NSString *str = [NSString stringWithString:@"\\b([a-zA-Z0-9%_.+\\-]+)@([a-zA-Z0-9.\\-]+?\\.[a-z ...
- 雅虎NCP：网络黄页的终结者
雅虎NCP是什么,NCP能做什么,为什么NCP能够成为网络黄页的终结者.NCP在颠覆既有市场格局的同时,其真实目的时什么?是成为网络化操作系统还是图谋最大化长尾广告.笔者相信,过不了多久,市场将会告诉 ...
- HDU 2066-一个人的旅行（最短路Dijkstra）
一个人的旅行 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- 三星笔记本R428安装xp win7双系统，切换系统重启才能进入系统解决办法。
三星笔记本 XP win7 双系统切换重启解决方法 三星笔记本有个奇怪的现象,就是装有XP和win7双系统 xp切换到win7.进系统是会重启一次,并且bios回复光驱为第一启动项,win7切换 ...
- php session_set_save_handler 函数的用法(mysql)(转)
<?php /*============================文件说明======================================== @filename: s ...
- iOS 10 个实用小技巧（总有你不知道的和你会用到的）
在开发过程中我们总会遇到各种各样的小问题,有些小问题并不是十分容易解决.在此我就总结一下,我在开发中遇到的各种小问题,以及我的解决方法.比较普遍的我就不再提了,这里主要讲一些你可能不知道的(当然,也有 ...
- COGS 908 校园网
/* Tarjan缩点之后 强联通分量建图 统计每个强联通分量的出入度 第一问就是入度为0的 强联通分量的个数 第二问 为了高效的使每个强联通分量都有出入度 要把出度为零的强联通分量连到入度为零的点上 ...