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. springmvc、 springboot 项目全局异常处理

    异常在项目中那是不可避免的,通常情况下,我们需要对全局异常进行处理,下面介绍两种比较常用的情况. 准备工作: 在捕获到异常的时候,我们通常需要返回给前端错误码,错误信息等,所以我们需要手动封装一个js ...

  2. 关于使用ssm与spring时，配置tomcat 虚拟目录( doBase )中的一些坑

    一.使用SSM需要 配置虚拟目录时 tomcat的配置 在tomcat server.xml的<HOST></HOST>中加入以下内容 在配置完成之后,当我们访问URL  为  ...

  3. Git的基本使用 -- 创建本地仓库

    下载安装 Git-2.25.0-64-bit .exe 查看是否安装成功 git --version 创建本地仓库 创建一个文件夹用于存放项目文件 在创建好的文件中右键选择 Git Bash Here ...

  4. AD 快捷键设置

    TAA 设置自动标记原件位号 AR 设置元件向右对齐 AL 设置元件向左对齐 MS 移动所选择 CO 错误报告设置 CTRL + w 设置电气线 PN 添加net label TG 打开封装管理器 P ...

  5. 自己常用的Linux命令和Hadoop命令

    记录自己常用的Linux命令: ss的启动命令:ssserver -c /etc/shadowsocks.json jupyter notebook的启动命令:jupyter notebook --a ...

  6. Codeforces Round #618 (Div. 1)A（观察规律）

    实际上函数值为x&(-y) 答案仅和第一个数字放谁有关 #define HAVE_STRUCT_TIMESPEC #include <bits/stdc++.h> using na ...

  7. jmeter实现对Oracle数据库的操作

    实现目的 有时候,根据业务需要,可能需要直接对数据库进行性能测试,此时可利用jmeter对Oracle.MySQL等数据库进行相关测试. 脚本实现 添加JDBC Connection Configur ...

  8. Python - 反向生成UML类图

    法一. pyreverse https://www.logilab.org/blogentry/6883 pip install pylint(集成在里面了) cd pack pyreverse -o ...

  9. 6_15 给任务排序（UVa10305）<拓扑排序>

    John有n件事情要做,不幸的是这些事情并不是各自独立的,而是有相依性的.换句话说可能有某件事情一定要在另一件事情做完之后才能做.Input每组测试数据可能有好几列.第一列有2个整数n,m.(1 &l ...

  10. 包、logging模块、hashlib模块、openpyxl模块、深浅拷贝

    包.logging模块.hashlib模块.openpyxl模块.深浅拷贝 一.包 1.模块与包 模块的三种来源: 1.内置的 2.第三方的 3.自定义的 模块的四种表现形式: 1.py文件 2.共享 ...