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. AJAX-状态属性

    XMLHttpRequest对象的readyState属性 作用:表示xhr对象的请求状态 值:由0到4表示5个状态 0:请求尚未初始化 1:已经打开到WEB服务器的连接,正在向服务器发送请求 2:请 ...

  2. HTML学习（13）区块元素和内联元素

    HTML 区块元素 大多数 HTML 元素被定义为块级元素或内联元素. 块级元素在浏览器显示时,通常会以新行来开始(和结束). 实例: <h1>, <p>, <ul> ...

  3. 如何预测股票分析--长短期记忆网络(LSTM)

    在上一篇中,我们回顾了先知的方法,但是在这个案例中表现也不是特别突出,今天介绍的是著名的l s t m算法,在时间序列中解决了传统r n n算法梯度消失问题的的它这一次还会有令人杰出的表现吗? 长短期 ...

  4. java将小写金额转换为大写的工具类

    public class Tool {             private static final String UNIT = "万千佰拾亿千佰拾万千佰拾元角分";      ...

  5. GIL/Copy/私有/面向对象

    1. GIL Python语言和GIL没有关系.仅仅是由于历史原因在Cpython虚拟机(解释器),难以移除GIL. GIL:全局解释器锁.每个线程在执行的过程都需要先获取GIL,保证同一时刻只有一个 ...

  6. 转载：进程退出状态--waitpid status意义

    最近遇到一个进程突然退出的问题,由于没有注册signalhandler所以没有捕捉到任何信号. 但是从log中看到init waitpid返回的status为0x008b,以前对status不是很了解 ...

  7. markdown整理

    html标签# h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 一级标题:内容=== 二级标题:内容--- 强调文字:>内容 链接:[文字](链接地址) 图 ...

  8. md5模块（Python内置模块）和hashlib模块

    转自https://my.oschina.net/duhaizhang/blog/67214 MD5模块用于产生消息摘要,康用来判断文件是否相同. python的md5模块使用非常简单,包括以下几个函 ...

  9. ARM架构安装Anaconda3出现错误：cannot execute binary file: Exec format error

    ARM架构安装Anaconda3出现错误:cannot execute binary file: Exec format error 原因是:安装包格式不对. 在Anaconda官网上只有x86(32 ...

  10. Nginx开始（自己使用，简单开始）

    Nginx 1.网址 2.安装 如果需要资料的话可以直接来下载进行下载 前提 sudo yum install yum-utils 云主机重启之后需要执行 nginx -c /etc/nginx/ng ...