什么是 AngularJS?

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

代码实例:


<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>指令</title>
<script type="application/javascript" src="../js/angular.min.js"></script>
</head>
<body> <div >
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name + 55}}</h1>
</div> <div ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div> <div data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </div>
</body>
</html>
 

当网页加载完毕,AngularJS 自动开启。

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

ng-init 指令初始化 AngularJS 应用程序变量。

HTML5 允许扩展的(自制的)属性,以 data- 开头。 AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

AngularJS1 学习笔记1的更多相关文章

  1. angularjs1学习笔记--持续更新

    angularJS使用的MVC为何不属于二十三种设计模式之一? MVC被GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable ...

  2. AngularJS1.X学习笔记1-整体看看

    听说 明天是愚人节,这与我有什么关系呢!我可 不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不 ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  5. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  6. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  7. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  8. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. gridview in webform

    How to: Enable Default Paging in the GridView Web Server Control https://msdn.microsoft.com/en-us/li ...

  2. 终端安全工具 gartner 排名

    Reviews for Endpoint Detection and Response Solutions What is Endpoint Detection and Response Soluti ...

  3. Hadoop 三剑客之 —— 分布式文件存储系统 HDFS

    一.介绍 二.HDFS 设计原理     2.1 HDFS 架构     2.2 文件系统命名空间     2.3 数据复制     2.4 数据复制的实现原理     2.5 副本的选择     2 ...

  4. php基础知识(一)--2017-04-14

    1.Php的两种打开方式: 第一种方式:地址栏打开:http://localhost/0414/qq.php     地址栏输入localhost/  就是phpstudy下的www文件夹 第二种:新 ...

  5. MVC中添加模块区域,并设置RedirectToAction跳转

    废话少说,直接上图:

  6. Android蓝牙2.0连接以及数据接收发送

    1.加入权限 <uses-feature android:name="android.hardware.bluetooth_le" android:required=&quo ...

  7. CDR 2017压感笔和压感设备该怎么设置使用?

    您可以通过CorelDRAW 2017 中的以下工具来运用压感笔.笔或其他设备的压力:艺术笔(表达模式).橡皮擦.涂抹.转动.吸引.排斥.粗糙和弄脏.此外,您还可以通过艺术笔(表达模式)工具.橡皮擦. ...

  8. 用Javascript做一个“获取验证码”的按钮

    要求:①点击按钮后背景色会发生改变②有倒计时(一般为30秒) <!DOCTYPE HTML> <html> <head> <meta charset=&quo ...

  9. github删除项目or仓库

    1. 登录 github (要注册账号) 2. 登录后点击右上侧头像,选择 Your profile . 3. 选择Repositories,可以查看已有的库,选择要删除的库进入. 4. 选择Sett ...

  10. [CodeForces] 543B Destroying Roads

    脑洞+暴力. 因为边权是1,所以bfs一下,O(n^2)求任意两点间最短路,再枚举. ans最大是\(dis_{s1,t1}+dis_{s2,t2}\) 再考虑有公共边的情况,一定存在两个点 u, v ...