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 归档日志满了后,将无法正常登入ORACLE,需要删除一部分归档日志才能正常登入ORACLE. 一.首先删除归档日志物理文件,归档日志一般都是位于archive目录下,AIX系统下文件格 ...
- U-Boot_bmp_logo_hacking
/*********************************************************************** * U-Boot_bmp_logo_hacking * ...
- BZOJ3879: SvT【后缀数组+单调栈】
Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始 ...
- Visual Studio Code 使用指南
安装 VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验. HTML Snippets:增强了zen-coding,增加了H5的自动补全,安 ...
- (转）C＋＋初始化与赋值
来源:http://www.cnblogs.com/chio/archive/2008/10/06/1305145.html 先来个区别说明:赋值操作是在两个已经存在的对象间进行的,而初始化是要创建一 ...
- 使用flex布局，垂直居中
要完成下面的样式: 1:绿色部分宽度固定,红色部分自适应宽度: 2:整体高度自适应,红色和绿色部分的内容垂直居中: html代码: <div class="main"> ...
- hasura graphql server 集成gatsby
hasura graphql server 社区基于gatsby-source-graphql 开发了gatsby-postgres-graphql 插件, 可以快速的开发丰富的网站 基本使用 安装h ...
- baidu手机浏览器安卓4.5版公布：由于快，所以爱
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDUyMzk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- 时间操作（JavaScript版）—页面显示格式：年月日 上午下午 时分秒 星期
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35222531 <!DOCTYPE ...
- Entity创建一对一关系
Area类 public virtual User User { get; set; } User类 public virtual Area Area { get; set; } Context类 m ...