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文件. 附上引用地址 ...
随机推荐
- Linux命令行操作进程
参见 12个进程管理命令介绍 Linux如何查看进程.杀死进程.启动进程等常用命令
- linux-锁屏时间设置
系统:ubuntu16.04 操作步骤 设置setting -> System Settings -> Brightness&lock, 在界面中选择想要的设置即可: 参考 1.百 ...
- QT-This application failed to start because it could not find or load the Qt platform plugin "windows"
前言 将qt的vs工程生成Release版本,不过出现错误,现将可以解决该问题的方法记录下来. 项目环境 系统:win7_64 软件:VS2013.QT5.6.2.qt-vs-addin-1.2.5 ...
- jsp之response方法
response简介 response对象:对客户端的请求作出回应,将Web服务器处理后的结果发回客户端. response对象:属于javax.servlet.HttpServletResponse ...
- PHP 7.0 升级备注
PHP 7.0.0 beta1 发布了,在带来了引人注目的性能提升的同时,也带来了不少语言特性方面的改变.以下由 LCTT 翻译自对官方的升级备注,虽然目前还不是正式发布版,不过想必距离正式发布的特性 ...
- 大家一起做训练 第一场 B Tournament
题目来源:CodeForce #27 B 有n个人比赛,两两之间都有一场比赛,一共 n * (n - 1) / 2 场比赛.每场比赛的记录方式是 a b,表示在a和b的比赛中,a胜出,b失败. 经过研 ...
- SQL Server常用SQL集合
================================================ 1.SQL查询一年之内的数据记录 select * from 表名 where CreateDate& ...
- （4）logging（日志模块）
日志分成几个常用的级别 debug 10 代表程序调试过程中的信息 info 20 代表普通日志信息,用户的访问等等 warning 30 警告日志,有可能出错,但是目前还没出错的 error 40 ...
- test20180922 交错的字符串
题意 分析 这个数据范围容易使人想到折半搜索. 我们将字符串分为前后两部分.如果前半部分中搜得的前缀串为{S1, S2},那么后半部分中搜得的后缀串必须为{rev(S2), rev(S1)},且为有序 ...
- JavaWeb学习总结(二)-修改Tomcat服务器的端口（半年之后再总结）
一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件(hibernate.cfg.xml是核心配置文件). 如果想修改Tom ...