AngularJS学习:第一个demo
1. 引入angular.js
相应版本下载地址: https://code.angularjs.org/
2. 编写html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<script src="js/angular.js"></script>
</head>
<body>
<div>
<!-- 引入ng-app标识,表示在作用域范围内可以使用angularJS标签,是有使用范围的 -->
<div ng-app>
<!-- 绑定需要angularJS操作的对象 -->
<input ng-model="gender" type="text" placeholder="Your gender">
<br />
<!-- 输出被angularJS绑定的对象值 -->
<h2>Your name: {{gender}}</h2>
</div>
<!-- 分割线 -->
<hr color="green" size="7">
<!-- 另外一个div块(为了说明ng-app是有作用范围的) -->
<div>hello</div>
{{gender}}
</div>
</body>
</html>
3. 运行效果
<1> 不输入任何信息,运行结果:
<2> 输入信息,运行结果:
4. 小结:
<1> ng-app是有范围的:
ng-app只在其作用域范围内有效。代码中有2个div块,第一个div块中有ng-app,第二个没有,所以第一个里面能(通过{{}})取到输入框中gender的值,第二个不能。
<2> 作用域:
html中成对的标签块,比如<html></html>,<body></body>,<head></head>,<div></div>等等,这些标签对之间就叫做作用域。
<3> 对象:
作用域中的属性即为对象,比如<input>,<button>等等
AngularJS学习:第一个demo的更多相关文章
- Android 通知栏Notification的整合 全面学习 (一个DEMO让你完全了解它)
在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...
- Android 通知栏Notification的整合 全面学习 (一个DEMO让你全然了解它)
在android的应用层中,涉及到非常多应用框架.比如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架.通知机制,ActionBar框架等等. ...
- 【转】 [置顶] Android 通知栏Notification的整合 全面学习 (一个DEMO让你完全了解它)
在Android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...
- Cocos2d-x 学习(1)—— 通过Cocos Studio创建第一个Demo
近期在工作上有了比較大的转变,自学情绪也慢慢高涨,本来一直在研究unity的技术.由于换了工作会開始接触cocos2d-x.但并不意味着停止研究unity,以后有时间还是会继续的. 公司的cocos2 ...
- angularjs学习总结 详细教程(转载)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs名词与概念(一)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 2. 前言 Angularjs开发CRUD类型的 ...
- [转载]angularjs学习总结 详细教程
http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...
- angularjs学习总结(~~很详细的教程)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- 转: angularjs学习总结(~~很详细的教程)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- Angularjs,WebAPI 搭建一个简易权限管理系统
Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一) 1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...
随机推荐
- nginx的学习
什么是反向代理? 参考这个帖子的‘刘志军’的回答 https://www.zhihu.com/question/24723688 nginx的配置 http://baijiahao.baidu.com ...
- Django_类视图
1. View 2. tamplate view 3. ListView
- Java数组转集合之Arrays.asList()用法
Arrays.asList()用法 使用Arrays.asList()的原因无非是想将数组或一些元素转为集合,而你得到的集合并不一定是你想要的那个集合. 而一开始asList的设计时用于打印数组而设计 ...
- Bugku-一段Base64-Writeup
转载请注明出处:http://www.cnblogs.com/WangAoBo/p/7207874.html bugku - 一段Base64 - Writeup 题目: 分析: 本来看到题目名字和分 ...
- ubuntu 切换用户
app切换root ubuntu: sudo su - app sudo su - root centos : sudo su ############ root 切换app sudo su - ap ...
- 微信小程序实例test
index.js //index.js //获取应用实例 const app = getApp() var pageConfig = { data: { motto: 'Hello World', u ...
- C/S编程
https://blog.csdn.net/antony1776/article/details/73717666 实现C/S程序,加上登录注册聊天等功能. 然后要做个协议的样子出来. 比如说注册功能 ...
- Mobius反演定理-BZOJ2154
This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 莫比乌斯定理(未 ...
- 微信小程序传code 拿token 后台报40029 状态吗,是为什么?
看看是不是code用了两次,还有种可能,检查一下后台的appid
- Codeforces Round #624 (Div. 3) A. Add Odd or Subtract Even(水题)
You are given two positive integers aa and bb . In one move, you can change aa in the following way: ...