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 是一个 JavaScript 框架.(PS:其实就是外部引用的js文件) 所以AngularJS的使用依然是外部引用js文件. 附上引用地址 ...
- angularjs探秘<五> 举足轻重的scope
scope在angular中的作用可谓举足轻重,不理解scope就不会angular: scope是应用在 HTML (view) 和 JavaScript (controller)之间的纽带. sc ...
- angularjs探秘<四> 双向数据绑定
双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...
- angularjs探秘<三> 控制器controller及angular项目结构
先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
- angularjs探秘<二>表达式、指令、数据绑定
距离第一篇笔记好久了,抽空把angular的笔记梳理梳理. ng-init:初始化指令,这里可以声明变量,且变量不用指定数据类型(类似js中的var用法). 数值变量与字符串相加默认做字符串拼接运算. ...
- 基于AngularJS的个推前端云组件探秘
基于AngularJS的个推前端云组件探秘 AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担.AngularJS将帮助标准化的开发web应用结构并且提供了针 ...
- 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九（ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数，小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
随机推荐
- 7、XML加强/Web开发/Tomcat
1 XML加强 XML加强 1)Dom4j修改XML文档 写出xml文档: XMLWriter writer = new XMLWriter() writer.wrtite(doc); 增加: Doc ...
- jqeury.base
min.js //前台调用 var $ = function (args) { return new Base(args); } //基础库 function Base(args) { //创建一个数 ...
- YTU 2973: C语言习题5.25--文件操作2
2973: C语言习题5.25--文件操作2 时间限制: 1 Sec 内存限制: 128 MB 提交: 242 解决: 105 题目描述 文本文件score.dic 中存储了n名学生的信息(班级编 ...
- android的基础入门
一. A通信技术 1. 1G 仅限语音的蜂窝式通话标准 2. 2G (时分多路复用)数字语音传输技术和增加接收数据的功能 3. 3G 传输声音和数据的速度有很大的 提升 4. 4 ...
- 新注册域名greenopen.site,向专业道路进军
新注册域名greenopen.site,向专业道路进军,欢迎访问!届时可以通过 greenopen.site jsxyhelu.github.io 或者jsxyhelu.cnblogs.com 访问本 ...
- js九九乘法表
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- Mysql-学习笔记（==》约束 六）
-- 建立表的相关约束主键约束 PRIMARY KEY (主键自带索引 PK 关系数据库领域,要求一个表只有一个主键)CREATE TABLE t1( tid INT UNSIGNED NOT NUL ...
- 2016年10月26日 星期三 --出埃及记 Exodus 19:10-11
2016年10月26日 星期三 --出埃及记 Exodus 19:10-11 And the LORD said to Moses, "Go to the people and consec ...
- CALayer的分析
转载地址: http://my.oschina.net/u/2340880/blog/536048 iOS开发CoreAnimation解读之二——对CALayer的分析 一.UIView中的CAL ...
- STM32 NVIC
在stm32中是要配置nvic的.何为nvic,对于我这样的初学者来说,直观感受就是在设置为中断后 还需要配置 中断的优先级nvic就是搞这个的. 那么具体的需要配置些什么那? void NVIC_C ...