AngularJS1 学习笔记1
什么是 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的更多相关文章
- angularjs1学习笔记--持续更新
angularJS使用的MVC为何不属于二十三种设计模式之一? MVC被GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable ...
- AngularJS1.X学习笔记1-整体看看
听说 明天是愚人节,这与我有什么关系呢!我可 不想被愚弄,但是但是,我这么笨怎么才能不被愚弄呢?左思右想,我决定从现在开始闭关,闭关干啥哩?学习!学习AngularJS.以前学习过Angular的,不 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- docker compose的使用--在线安装未完成
Compose 是一个用户定义和运行多个容器的 Docker 应用程序.在 Compose 中你可以使用 YAML 文件来配置你的应用服务.然后,只需要一个简单的命令,就可以创建并启动你配置的所有服务 ...
- 如何在ubuntu中安装mysql与mysql workbench
安装过程如下 sudo apt-get install mysql-server 安装过程中随后设置mysql的密码 之后sudo apt-get install mysql-client 安装好之后 ...
- datatable dataRow
DataRow[] Drs = DtStockProduct.Select(Condition11); DtResult = DtStockProduct.Clone(); datatble tabl ...
- .NET Core开发:项目实践
初始化项目 本来想详细讲一讲dotnet core的,但我对于dotnet core的研究还不到一星期,半吊子,脑子又笨,就不写那些理论出来误人子弟了,还是直接来一篇实践给大家做个参考.废话不多说,直 ...
- ROS-Gazebo-turtlebot3仿真
前言:Gazebo是一款强大的3D仿真器,支持机器人开发所需的机器人.传感器和环境模型,并且通过搭载的物理引擎可以得到逼真的仿真结果.即便Gazebo是一款开源仿真器,却具有高水准的仿真性能,因此在机 ...
- Android local socket学习总结
转载请注明出处: http://blog.csdn.net/xiexh0921/article/details/7513628 ################################## ...
- Spark RDD概念学习系列之RDD的本质特征
不多说,直接上干货!
- Jq自定义的方法绑定树结构
1.先上效果图 (借鉴博客) 2.这边不做样式的只做结构 function toTreeData(data) { var pos = {}; var tree = []; var i = 0; wh ...
- gdal集成kml库的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 最近要读取kml文件,具体就是把kml文件当作一个矢量文件来读取.我发现gdal是支持集成kml库的.不过集成这个km ...
- Android设计模式——工厂方法模式
1.定义:工厂方法模式就是定义一个用于创建对象的接口,让子类决定实例化哪个类. 2.看代码: 产品抽象类 public abstract class Product { /** * 产品类抽象方法 * ...