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的更多相关文章

  1. Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）

    在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...

  2. Android 通知栏Notification的整合 全面学习 （一个DEMO让你全然了解它）

    在android的应用层中,涉及到非常多应用框架.比如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架.通知机制,ActionBar框架等等. ...

  3. 【转】 [置顶] Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）

    在Android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...

  4. Cocos2d-x 学习（1）—— 通过Cocos Studio创建第一个Demo

    近期在工作上有了比較大的转变,自学情绪也慢慢高涨,本来一直在研究unity的技术.由于换了工作会開始接触cocos2d-x.但并不意味着停止研究unity,以后有时间还是会继续的. 公司的cocos2 ...

  5. angularjs学习总结 详细教程（转载）

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  6. Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs名词与概念（一）

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 2. 前言 Angularjs开发CRUD类型的 ...

  7. [转载]angularjs学习总结 详细教程

    http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...

  8. angularjs学习总结(~~很详细的教程)

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  9. 转: angularjs学习总结(~~很详细的教程)

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  10. Angularjs,WebAPI 搭建一个简易权限管理系统

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

随机推荐

  1. 【Python】【爬虫】爬取酷狗TOP500

    好啦好啦,那我们来拉开我们的爬虫之旅吧~~~ 这一只小爬虫是爬取酷狗TOP500的,使用的爬取手法简单粗暴,目的是帮大家初步窥探爬虫长啥样,后期会慢慢变得健壮起来的. 环境配置 在此之前需要下载一个谷 ...

  2. linux deploy---旧手机变废为宝

    前几天朋友送了我一部红米Note 1s,本来不想要,转念一想,不要白不要,就收了. 拿到之后我就想,这么一个1+8的手机能做什么呢? 翻遍了CSDN和简书,找到了一个性价比不错的方法:给旧手机装上一个 ...

  3. eclipse报错：unable to install breakpoint in .......due to missing line number attributes

    报错信息如下: 解决方案方案1.把断点都干掉,再启动.应该是代码更新后,断点位置没有代码了或位置改变了. 方案2.在Eclipse - Preferences - Java - Complier 下  ...

  4. springboot引入Oracle依赖

    最近学习spring boot,在网上找一些项目学习,有的项目引入了oracle驱动包,自己搭建一直不成功,百度发现说是权限问题无法下载. 然后参考下面博客终于解决:springboot引入Oracl ...

  5. MomentJS记录下开发中用到的日期

    1.计算当前周一到周日的日期 ​​​​​​​var weekOfday = moment().format('E');//计算今天是这周第几天 var last_monday = moment().s ...

  6. 仿QQ聊天程序（java）

    仿QQ聊天程序 转载:牟尼的专栏 http://blog.csdn.net/u012027907 一.设计内容及要求 1.1综述 A.系统概述 我们要做的就是类似QQ这样的面向企业内部的聊天软件,基本 ...

  7. OBS_Classic经典版框架

    一,简介 OBS(open boardcast server),是一个用于直播的开源软件. 官方网站:https://obsproject.com/ 代码托管地址:https://github.com ...

  8. iso15693芯片读写工具套件 icode-slix2读写 nfc type 5 tag读写

    iso15693芯片读写工具套件 icode-slix2读写 nfc type 5 tag读写校验套件 iso15693工具套件支持icode-slix,icode-slix2芯片的读写,支持iso1 ...

  9. LoadRunner通过验证参数判断事物的成功与失败

    if(atoi(lr_eval_string("{Param_DiscountID}")) > 0){ //lr_message("多机多酒:%s",lr ...

  10. Ubuntu 国内安装 kubernetes

    由于墙的原因,国内要安装 kubernetes 非常的麻烦,因此只要解决这个问题,就可以顺利安装 kubernetes 的 三个官法工具 kubelet.kubeadm.kubectl. 安装环境: ...