angularjs探秘<一>认识angularjs
首先聊聊angularjs是啥。
首先AngularJS 是一个 JavaScript 框架。(PS：其实就是外部引用的js文件) 所以AngularJS的使用依然是外部引用js文件。
附上引用地址
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
AngularJS的使用：
首先上代码。(容我先举个栗子)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>angularJS</title> </head>
<body>
<div ng-app="">
<p>试试效果吧：<input type="text" ng-model="My_model" /></p>
<h1>这里是你的model值：{{My_model}}</h1>
</div>
<!--引用js-->
<script src="angular-1.3.0.js" type="text/javascript"></script>
</body>
</html>
解析：
这个例子是个简单的angularjs取值model。
angularjs特性之一：可嵌入任何框架使用。
各位请看栗子，在div后面有个ng-app，这个是告诉浏览器从这里开始里面的代码都归angularjs管(不关你的事儿了，angularjs全权管理后面的区域)。至于ng-app的值目前本菜还没测试。后面测试了本菜会说明。有大神知道的也可以说下。也就是说ng-app加在哪里，哪块内容就使用angularjs。强调一点，ng-app一个页面有且只能有一个，不能出现多个ng-app。这里可以吧ng-app理解为main方法，入口程序有且只能有一个。
angularjs特性之二：mvc模式开发。
回到栗子，input标签是不是也有个ng开头的东东，没错这就是model，mvc里的model。不要怀疑，angularjs就是这么牛逼，就是这么强大。然后h1中间的{{}}就是获取model的值(相信很多玩过其他模板的大牛一看就明白)，详细解析：<input type="text" ng-model="My_model" />这里是ng-model就是model。而{{My_model}}是用来展现model的值。(好了表问我controler去哪儿了。说到controler会说到module，所以后面再叨叨)。
补充个小案例：(一个简单的计算器)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>angularJS</title> </head>
<body>
<div ng-app>
<div>
<input type="number" ng-model="num_1"/>
<span> + </span>
<input type="number" ng-model="num_2"/>
<span> = {{num_1 + num_2}}</span>
</div>
<p> </p>
<div>
<input type="number" ng-model="num_3"/>
<span> - </span>
<input type="number" ng-model="num_4"/>
<span> = {{num_3 - num_4}}</span>
</div>
<p> </p>
<div>
<input type="number" ng-model="num_5"/>
<span> × </span>
<input type="number" ng-model="num_6"/>
<span> = {{num_5 * num_6}}</span>
</div>
<p> </p>
<div>
<input type="number" ng-model="num_7"/>
<span> ÷ </span>
<input type="number" ng-model="num_8"/>
<span> = {{num_7 / num_8}}</span>
</div>
</div>
<!--引用js-->
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
</body>
</html>
通过这个案例可以看出{{}}中间可以进行简单的数值运算。
补充：有人问到ng-app的作用域到底多大？
ng-app写在哪个标签，那个标签内都是angularjs的作用域，
举个栗子：
<html ng-app></html>就是当前整个页面都是angularjs的作用域。
<body ng-app></body>就是整个body都是angularjs的作用域。
<div ng-app></div>就仅仅当前这个div是angularjs的作用域。
初次探秘就哔哔这么多。原创文章，感谢支持。大牛勿喷
angularjs探秘<一>认识angularjs的更多相关文章
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- AngularJS学习之旅—AngularJS 控制器(六)
1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...
- AngularJS学习之旅—AngularJS 指令(三)
1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...
- AngularJS学习之旅—AngularJS 表达式(二)
1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- angularjs探秘<一>
首先聊聊angularjs是啥. 首先AngularJS 是一个 JavaScript 框架.(PS:其实就是外部引用的js文件) 所以AngularJS的使用依然是外部引用js文件. 附上引用地址 ...
随机推荐
- shell 脚本实战笔记(4)--linux磁盘分区重新挂载
背景: Hadoop的HDFS文件系统的挂载, 默认指定的文件目录是/mnt/disk{N}. 当运维人员, 不小心把磁盘挂载于其他目录, 比如/mnt/data, /mnt/disk01, /mnt ...
- [Algorithm] A nonrecursive algorithm for enumerating all permutations of the numbers {1,2,...,n}
def permutationN(n): a=[None]*n for i in range(n): a[i]=i+1 sum=1 for j in range(n): sum*=(j+1) i=0 ...
- 很全面的WinRAR实用技巧系列 - imsoft.cnblogs
WinRAR也可以管理我的桌面时间长了,桌面上堆的东西实在太多,平时该如何管理呢?安装了WinRAR的朋友可以请它来帮忙,用它管理清除无用的桌面文件或图标. 以XP系统为例,系统所在目录是“c:\wi ...
- 与众不同 制作会唱歌的WinRAR - imsoft.cnblogs
为了使用方便,我们可能会把RAR压缩包制作成自解压文件.WinRAR自带的自解压模块虽然使用很方便,但千篇一律的外观看起来实在 乏味.其实,只要通过简单改造,你就可以制作出与众不同,声色俱佳的WinR ...
- 一致性哈希算法(Consistent Hashing Algorithm)
一致性哈希算法(Consistent Hashing Algorithm) 浅谈一致性Hash原理及应用 在讲一致性Hash之前我们先来讨论一个问题. 问题:现在有亿级用户,每日产生千万级订单,如 ...
- The Suspects 并查集
Severe acute respiratory syndrome (SARS), an atypical pneumonia of unknown aetiology, was recognized ...
- 2018-2019-2 网络对抗技术 20165212 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165212 Exp4 恶意代码分析 原理与实践说明 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或E ...
- 【MVC】使用MvcPager进行分页
1.添加引用: mvcPager 版本高的提供的功能也更多. 注:下载了第一个,但是里面的一些字段是只读的.(eg:PagedList<T> .TotalItemCount)这是不符合的. ...
- ehci及其伴随ohci主机控制器驱动分析
1. 正常插入 插上U盘产生中断调用usb_hcd_irq: usb_hcd_irq ehci_irq usb_hcd_resume_root_hub queue_work(pm_wq, &h ...
- AtomicStampedReference、AtomicMarkableReference 区别
AtomicMarkableReference 描述的是更加简单的是与否的关系,它的定义就是将数据变换为true 或 false,通常ABA问题只有两种状态,AtomicMarkableReferen ...