我的AngularJS 学习之旅
我的AngularJS 学习之旅
基础篇
很早之前就听朋友说起AngularJs,但由于各种原因,一直没去研究。最近正好有同事也对这个框架比较感兴趣,大家一起讨论,于是终于“名正言顺”地开始研究了。
本文的目的是记录一下自己这两周的学习点滴,算是学习笔记吧,如果对初学的朋友有一点帮助,那也算是一件好事。嘿嘿
1、Angular的 起源
关于Angular 的起源,可以追溯到2009 年的Google Feedback 项目。当时,团队中的一个成员Misko Hevery 做出了一个大胆的宣言:利用他自己业余时间所开发的一个开源库,他可以在两周之内把目前所有东西重写一遍。三个星期之后,他所开发的新应用的代码量从原来的17000 行压缩到了1500 行。是的,Misko Hevery 就是Angular之父.他和他的同事决定,围绕他所提倡的理念组建一个团队,这个简单的理念就是:简化对web 开发者的经验要求。最后,越来越多的开发者在他们的日常生活中以来Angular,并且发展成了一个优质的支持者网络。
2、比较几种不同的Web 实现
<tr>
<td>
<input id="Access" type="button" value="Access" />
</td>
<td>
<div id="browser">
</div>
</td>
</tr>
$.ajax({type: 'GET',url: '/Home/Get_Page',success: function (data) {$("#browser").text(data);}});
<html><head><title>First program</title></head><body><?php echo "hello, worldn";?></body>
</html>
代码片段:
<div class="row-fluid">
<input type="text" ng-model="query" class="form-control" placeholder="请输入标题" />
<input type="button" ng-click="search()" value="Search" class="btn btn-primary" />
</div>
YGER43)}S.jpg)

MVC背后的核心理念是:你应该把管理数据的代码(model)、应用逻辑代码(controller)、 以及向用户展示数据的代码(view)清晰的分离开。
视图会从模型中获取数据,然后展示给用户。当用户通过鼠标点击或者键盘输入与应用进行交互的时候,控制器会做出相应并修改模型中的数据。
最后,模型会通知视图数据已经发生了变更,这样视图就可以刷新其中显示的内容。
在Angular应用中,视图就是Document Object ModelO(DOM,文档对象模型),控制器就是JavaScript类,而模型数据则被存储在对象的属性中。
3.2 $scope
控制器 --> 作用域 --> 视图(DOM)
指令 --> 作用域 --> 视图(DOM)
先来看一个例子吧
工欲善其事,必先利器,我们需要从官网下载Angular包,这里使用的是AngularJS v1.1.4
如上图,普通的使用只,需引入这个库就可以了.
View
@{
Layout = null;
} <!DOCTYPE html> <html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular/angular.min.js"></script>
<script src="~/Scripts/app/hello2/hello.js"></script>
</head> <body>
<div ng-controller="Ctrl">
Your name:
<input type="text" ng-model="customer.name">
<button ng-click='sayHello()'>greet</button>
<p>{{ greeting | titleCase}}</p>
<div my-customer></div>
</div>
</body>
</html>
当前Angular应用的Controller,
function MyController($scope) { $scope.username = 'World!';
$scope.sayHello = function () {
$scope.greeting = 'Hello,' + $scope.username;
};
}
这里需要解释一下,ng-app指令告诉Angular应用管理页面中的那一块.如果你正在构建一款纯Angualr应用,
那么你该把 ng-app指令写在<html>标签中,如下:
<html ng-app> ......... </html>
ng-model 是绑定了controller 的customer 的name 属性,这个指令是双向绑定,如果你使用过Silverlight或者WPF应该很容易理解.
{{ greeting | titleCase}} 这是也是绑定数据,是单向的,即只负责显示。
跑起来看看效果吧!
好,第一个AngularJs程序跑起来了!!!
不急,你在改改textbox中内容试试,
是的,你修改了name值,然后userMame副本的值也变化了,而你没有写多余的代码,这就是双向绑定机制!
时间关系,暂时到这了...后面继续和大家交流!
参考资料:
http://angularjs.cn/
《用AngularJS 开发下一代Web应用》
转载请注明出处:http://www.cnblogs.com/lucky_hu
我的AngularJS 学习之旅的更多相关文章
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- AngularJS学习之旅
开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直 ...
- 我的AngularJS 学习之旅(二)
记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(D ...
- angularJS学习之旅(1)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- AngularJS学习之旅—AngularJS 表单(十六)
一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...
- AngularJS学习之旅—AngularJS 事件(十四)
1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...
- AngularJS学习之旅—AngularJS HTML DOM(十三)
1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...
- AngularJS学习之旅—AngularJS Table(十一)
1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...
- AngularJS学习之旅—AngularJS Select(十)
1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...
随机推荐
- 读取EXCEL数据到内存DataTable
protected void Page_Load(object sender, EventArgs e) { string filepath = Server.MapPath("~/file ...
- 【Oracle】oracle取最大值和最小值的几个方法汇总
(1)oracle使用keep分析函数取最值记录 -- 取工资sal最大的雇员姓名及其工资,以及工资sal最少的雇员姓名及其工资 select deptno, empno, ename, sal, m ...
- [转] 前端中的MVC
MVC是一种设计模式,它将应用划分为3个部分:数据(模型).展现层(视图)和用户交互(控制器).其中: M - MODEL(模型) V - VIEW(视图) C - CONTROLLER(控制器) 一 ...
- ZooKeeper学习总结 第二篇:ZooKeeper深入探讨(转载)
其实zookeeper系列的学习总结很早就写完了,这段时间在准备找工作的事情,就一直没有更新了.下边给大家送上,文中如有不恰当的地方,欢迎给予指证,不胜感谢!. 1. 数据模型 1.1. 只适合存储小 ...
- BZOJ2705: [SDOI2012]Longge的问题
Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). Input 一 ...
- Eclipse 报java.lang.OutOfMemoryError: PermGen space错
这块内存主要是被JVM存放Class和Meta信息的,Class在被Loader时就会被放到PermGen space中,它和存放类实例(Instance)的Heap区域不同,GC(Garbage C ...
- HDU 3743 Frosh Week (线段树+离散化)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3743 Frosh Week Time Limit : 2000/1000ms (Java/Other) ...
- css 一些灵动性的小方法
CSS: 1.当鼠标放到一个图片上的时候,他会给你显示一些图片的信息或者是一些其他的信息. <!DOCTYPE html> <html lang="en"> ...
- 如何完全卸载oracle11g?
步骤一: 停止Oracle的所有服务. 步骤二: 运行%oracle_home%\app\Administrator\product\11.2.0\dbhome_1\deinstall \deinst ...
- JAVA中的TreeSet
TreeSet简介 TreeSet是一个有序的集合,它的作用是提供一个有序的Set集合,它继承于AbstractSet抽象类实现了NavigableSet<E>, Cloneable, j ...