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. Django_类视图

    1. View 2. tamplate view 3. ListView

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

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

  3. STL之pair类型

    C++ pair 类型 ---心怀虔诚,细细欣赏! 编程实践: Practice:编写程序读入一系列string和int型数据,将每一组存储在一个pair对象中,然后将这些pair对象存储在vecto ...

  4. java中一个类中的 this. 是什么作用

    2)this代表的是本类的实例对象,不是什么调用本类的方法的对象.当你用new创建一个对象的时候,对象就已经在内存了.(具体的你的血jvm和反射).构造方法只是为了给对象里的属性赋值.在类里任何地方出 ...

  5. Python，正则表达式 - (?:)示例

    例如正则表达式a(?:b),匹配后没有包含'b'的分组 >>> string 'ab ac' >>> import re >>> string = ...

  6. python lib timeit 测试运行时间

    目录 1. 简介 1.1. python interface 2. 案例 2.1. timeit() /repeat() 2.2. timer() 1. 简介 27.5. timeit - Measu ...

  7. 吴裕雄 python 机器学习——核化PCAKernelPCA模型

    # -*- coding: utf-8 -*- import numpy as np import matplotlib.pyplot as plt from sklearn import datas ...

  8. Linux 下使用 ffmpeg 大批量合并 ts 文件, mp4切割文件为m3u8

    见范例 ffmpeg -i "concat:file001.ts|file002.ts|file003.ts|file004.ts......n.ts" -acodec copy ...

  9. 每天进步一点点------CORDIC (一)

    三角函数计算,Cordic 算法入门 三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来计算任意角度的三角函数的值.这种表格在人们刚刚产生三角函数的概念的时候就已经有了,它们通常 ...

  10. Python3.6打开EAIDK-610开发板(计算机通用)摄像头拍照并保存

    环境:python3.6 代码: import cv2 import os output_dir ='/home/openailab/Desktop/huahui/came/' i = cap = c ...