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文件. 附上引用地址 ...
随机推荐
- 转：Oracle日期周详解以及周开始结束时间计算
目录(?)[-] ORACLE中周相关知识描述 日期格式化函数 日期时间运算函数 根据给定时间取一周的开始时间和结束时间 根据给定周数取一周的开始时间和结束时间 获取一年的最大周次 特别应该注意的地方 ...
- PyCharm首次使用（Hell world!）
作为PyCharm编辑器的起步,我们理所当然的先写一个Hello word,并运行它.(此文献给对IDE不熟悉的初学者) 1,新建一个项目 File --> New Project... 2,新 ...
- bulid-tool
Build tool 中文构建工具.构建工具能够帮助你创建一个可重复的.可靠的.携带的且不需要手动干预的构建.构建工具是一个可编程的工具,它能够让你以可执行和有序的任务来表达自动化需求.假设你想要编译 ...
- Linux设备树使用（二）
一.设备树与驱动的匹配1.设备树会被/scripts中的dtc可执行程序编译成二进制.dtb文件,之前设备树中的节点信息会以单链表的形式存储在这个.dtb文件中:驱动与设备树中compatible属性 ...
- Hive2：Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient
[root@node1 ~]# hive which: no hbase in (/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bi ...
- 用vbs打开文件
set ws=createobject("wscript.shell")ws.run"打开文件所使用的程序+空格+程序路径",x,ture Run方法有三个参数 ...
- c实现windows socket
服务端代码: /* * testSocketService.c * * Created on: 2012-8-16 * Author: 皓月繁星 */ #include <WINSOCK2.H& ...
- 【转】linux下终端命令快捷键
原文网址:http://daaoao.blog.51cto.com/2329117/554177 linux下使用终端不可避免. 使用终端快捷键,当然会使你如虎添翼.记住他们吧 终端快捷键 tab=补 ...
- CDN、浏览器缓存
CDN是什么? 谈到CDN的作用,可以用8年买火车票的经历来形象比喻: 8年前,还没有火车票代售点一说,12306.cn更是无从说起.那时候火车票还只能在火车站的售票大厅购买,而我所住的小县城并不通火 ...
- selenium常用获取元素点
//通过id WebElement element = driver.findElement(By.id("coolestWidgetEvah")); //通过className ...