什么是 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. [BZOJ 3365] Distance Statistics

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3365 [算法] 点分治 [代码] #include <algorithm> ...

  2. 4.vim操作

    你想以最快的速度学习人类史上最好的文本编辑器VIM吗?你先得懂得如何在VIM幸存下来,然后一点一点地学习各种戏法. 我建议下面这四个步骤: 存活 感觉良好 觉得更好,更强,更快 使用VIM的超能力 当 ...

  3. BZOJ 3729 splay维护DFS序+博弈论

    思路: 这像是 阶梯Nim之类的东西 我们 直接把sg函数 设成mod(L+1)的 一棵子树 向下的奇数层上的石子xor起来 就是答案 有加点和改值的操作 就splay维护一下 //By Sirius ...

  4. 分布式memcache

    使用多台memchache服务器,形成memchache集群.目的是为了提升memchache所能使用的硬件资源数量.多台memcached服务器之间不相互通讯.分布式算法由客户端实现,(php来说, ...

  5. 又一个设计工具 Framer X Preview

    又一个设计工具 Framer X Preview 所说比 Sketch 和 Figma 都要好用,不知道是不是真的 ~~ To give you a little background, I've b ...

  6. Java NIO(五)套接字通道

    Socket通道 Socket通道和文件通道有着不一样的特征: Socket通道类可以运行于非阻塞模式,并且是可选的.这两个特征可以激活大程序(如网络服务和中间件组件)巨大的可伸缩性和灵活性,因此再也 ...

  7. 【fiddler】 fiddler总是在菜单栏下面弹出提示“The system proxy was changed,click to reenable fiddler capture”--转

    源地址:http://blog.csdn.net/htdeyanlei/article/details/52873060 标签: fiddler 2016-10-20 15:28 2747人阅读 评论 ...

  8. es6——map-set与对象对比

    {    //map,set,object对比    let item={t:1};    let map=new Map();    let set=new Set();    let obj={} ...

  9. python3配置爬虫开发环境

    爬虫:环境搭建 安装python3: 安装python版本:3.7.0 winsdows下的配置:

  10. 注解实战BeforeMethed和afterMethed

    package com.course.testng;import org.testng.annotations.AfterMethod;import org.testng.annotations.Be ...