首先聊聊angularjs是啥。

首先AngularJS 是一个 JavaScript 框架。(PS：其实就是外部引用的js文件)

所以AngularJS的使用依然是外部引用js文件。

附上引用地址

  1. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJS的使用：

首先上代码。(容我先举个栗子)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>angularJS</title>
  6.  
  7. </head>
  8. <body>
  9.     <div ng-app="">
  10.         <p>试试效果吧：<input type="text" ng-model="My_model" /></p>
  11.         <h1>这里是你的model值：{{My_model}}</h1>
  12.     </div>
  13.     <!--引用js-->
  14.     <script src="angular-1.3.0.js" type="text/javascript"></script>
  15. </body>
  16. </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，所以后面再叨叨)。

补充个小案例：(一个简单的计算器)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>angularJS</title>
  6.  
  7. </head>
  8. <body>
  9.     <div ng-app>
  10.         <div>
  11.             <input type="number" ng-model="num_1"/>
  12.             <span>&nbsp;&nbsp;+&nbsp;&nbsp;</span>
  13.             <input type="number" ng-model="num_2"/>
  14.             <span>&nbsp;&nbsp;=&nbsp;&nbsp;{{num_1 + num_2}}</span>
  15.         </div>
  16.         <p>&nbsp;</p>
  17.         <div>
  18.             <input type="number" ng-model="num_3"/>
  19.             <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
  20.             <input type="number" ng-model="num_4"/>
  21.             <span>&nbsp;&nbsp;=&nbsp;&nbsp;{{num_3 - num_4}}</span>
  22.         </div>
  23.         <p>&nbsp;</p>
  24.         <div>
  25.             <input type="number" ng-model="num_5"/>
  26.             <span>&nbsp;&nbsp;×&nbsp;&nbsp;</span>
  27.             <input type="number" ng-model="num_6"/>
  28.             <span>&nbsp;&nbsp;=&nbsp;&nbsp;{{num_5 * num_6}}</span>
  29.         </div>
  30.         <p>&nbsp;</p>
  31.         <div>
  32.             <input type="number" ng-model="num_7"/>
  33.             <span>&nbsp;&nbsp;÷&nbsp;&nbsp;</span>
  34.             <input type="number" ng-model="num_8"/>
  35.             <span>&nbsp;&nbsp;=&nbsp;&nbsp;{{num_7 / num_8}}</span>
  36.         </div>
  37.     </div>
  38.     <!--引用js-->
  39.     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
  40. </body>
  41. </html>

通过这个案例可以看出{{}}中间可以进行简单的数值运算。

补充：有人问到ng-app的作用域到底多大？

ng-app写在哪个标签，那个标签内都是angularjs的作用域，

　　   举个栗子：

<html ng-app></html>就是当前整个页面都是angularjs的作用域。

　　　 <body ng-app></body>就是整个body都是angularjs的作用域。

<div ng-app></div>就仅仅当前这个div是angularjs的作用域。

初次探秘就哔哔这么多。原创文章，感谢支持。大牛勿喷

angularjs探秘<一>的更多相关文章

  1. angularjs探秘<一>认识angularjs

    首先聊聊angularjs是啥. 首先AngularJS 是一个 JavaScript 框架.(PS:其实就是外部引用的js文件) 所以AngularJS的使用依然是外部引用js文件. 附上引用地址 ...

  2. angularjs探秘<五> 举足轻重的scope

    scope在angular中的作用可谓举足轻重,不理解scope就不会angular: scope是应用在 HTML (view) 和 JavaScript (controller)之间的纽带. sc ...

  3. angularjs探秘<四> 双向数据绑定

    双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...

  4. angularjs探秘<三> 控制器controller及angular项目结构

    先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

  5. angularjs探秘<二>表达式、指令、数据绑定

    距离第一篇笔记好久了,抽空把angular的笔记梳理梳理. ng-init:初始化指令,这里可以声明变量,且变量不用指定数据类型(类似js中的var用法). 数值变量与字符串相加默认做字符串拼接运算. ...

  6. 基于AngularJS的个推前端云组件探秘

    基于AngularJS的个推前端云组件探秘 AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担.AngularJS将帮助标准化的开发web应用结构并且提供了针 ...

  7. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  8. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  9. AngularJS过滤器filter-保留小数，小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

随机推荐

  1. C/C++的一些备忘

    今天使用source insight阅读videoserver源码,有一些符号ctrl+左键点击显示找不到,先是rebuild工程和同步,没有效果,然后Options->Preferences- ...

  2. [HTML]表格的一切

    如何设置HTML页面自适应宽度的table(表格): <table width="95%" border="1" cellpadding="2& ...

  3. Java基础知识点

    以下10点为JAVA 基础知识,后面将足以总结和完善以备面试 数据类型 (包装类,字符串,数组) 异常处理 Java IO和NIO 数据结构 (集合和容器 ) 多线程(并发) 网络通信(协议) 面向对 ...

  4. Poj(2771)，最大独立集

    题目链接:http://poj.org/problem?id=2771 Guardian of Decency Time Limit: 3000MS   Memory Limit: 65536K To ...

  5. ThinkPHP统一设置utf-8编码

    1.项目编码 在编辑器中设置编码utf-8 2.在浏览器中设置编码 //Thinkphp方法中添加header设置utf-8只有index方法解决了乱码 class UserAction extend ...

  6. 如何通过Button获取UITableViewCell

    发现一个奇怪的问题: 手机(ios7) 2015-06-17 15:11:29.323 ***[1412:60b]  [btn superview] =  UITableViewCellContent ...

  7. .Net自帶Ajax和GridView

    如圖所示,在新建web窗體后的工具欄中有一個 AJAX擴展 ScriptManager 在整個網頁中有且只有一個,使用母版頁和用戶控件中尤為注意, 例如在嵌套母版頁和用戶控件時只在最外層加上Scrip ...

  8. BZOJ 1855 股票交易（单调队列优化DP）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1855 题意:最近lxhgww又迷上了投资股票, 通过一段时间的观察和学习,他总结出了股票 ...

  9. HDU 3213 Box Relations（拓扑排序构造）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3231 题意:有n个长方体,四种限制条件.(1)I x y x和y有相交:(2)X/Y/Z  x y x ...

  10. BOM DOM

    http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html DOM Document Object Model 文档对象模型 一 ...