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. Documents

    centos 7 修改主机名 hostnamectl set-hostname myhostname ansible node -m raw -a "if [[ \$(cat /root/. ...

  2. IntelliJ IDEA之如何设置JVM运行参数

    步骤一: 点击IDEA右上角的 Edit Configurations 设置参数: -XX:+PrintGCDetails -Xmx128M -Xms128M 步骤二:在VM options中设置参数 ...

  3. Git 把码云上被fork项目源码merge到fork出来的分支项目

    Git 把码云上被fork项目源码merge到fork出来的分支项目 By:授客 QQ:1033553122 需求描述 被fork的项目有更新代码,希望把更新的代码merge到fork分支项目 解决方 ...

  4. nginx autoindex 配置目录浏览功能

    Nginx打开目录浏览功能 yum install httpd-tools -y cd /usr/local/openrestry/nginx/conf/ htpasswd -c passwd adm ...

  5. C/C++编程规范

    1.文件结构 C/C++程序通常分为两个文件,一个文件用于保存程序的声明,一个文件用于保存程序的实现. 1.1 版权和版本的声明 版权和版本的声明位于头文件和定义文件的开头,主要内容有:(1)版权信息 ...

  6. Travis CI Build Continuous Integration

    什么是持续集成 持续集成(Continuous Integration)是经常合并小的代码更改的实践,而不是在开发周期结束时合并大的更改.目的是通过以较小的增量开发和测试来构建更健康的软件.这就是Tr ...

  7. Go之Cookie和Session

    文章引用自 Cookie和Session Cookie和Session是Web开发绕不开的一个环节,本文介绍了Cookie和Session的原理及在Go语言中如何操作Cookie. Cookie Co ...

  8. 洛谷P1131 时态同步

    题意: 给一个n点的树,每条边都有边权,问从根出发需要增加多少长度,使得最终的儿子到根的距离是一样的 思路: 上来一个思路wa了3次,看完题解之后,又一次豁然开朗…… orz #include< ...

  9. 【Python协程的实现】

    " 补充:数据安全问题 进程: 多个进程操作同一个文件,会出现数据不安全 线程: 多个线程操作同一个全局变量,会出现数据不安全 对于共享的数据操作: 如果是 += *= /= -= 操作,都 ...

  10. cascadia-code 程序员友好字体

    下载地址:https://github.com/microsoft/cascadia-code/releases/download/v1911.21/Cascadia.ttf 下载后右键点击下载的文件 ...