[AngularJS学习笔记] 基础学习01
2016-06-06开始学习AngularJS
AngularJS是会extend HTML的
ng-directives
先学习了四个
- ng-app：定义AngularJS Application的指令
- ng-model：绑定HTML控件数据的指令
- ng-bind：绑定数据到HTML view的指令
- ng-init: 初始化AngularJS application的变量
示例：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body> <div ng-app="" ng-init="lastName='Guo'">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<p>The name is <span ng-bind="lastName"></span></p>
</div> </body>
</html>
以上的示例里，
ng-app指令，作用是告诉AngularJS<div>这个元素是一个AngularJS application的“拥有者”。
ng-model指令，把输入框的value绑定到了application的一个变量名下
ng-bind指令，把<p>元素的innerHTML绑定到了application的某一个变量名下
ng-init指令，是初始化某些application变量
AngularJS Expressions
表达式在AngularJS里面用双花括号表示 {{ expression }}
表达式也可以写在指令里，例如：ng-bind="expression"
表达式可以包括对变量的绑定和运算，例如：
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
这个顺序应是这样的：
- ng-model绑定这个input为myCol
- 再把value绑定到myCol中
- 最后是style也绑定到myCol中
基本上是要是JS的表达式，Angular都可以放在{{}}中或者是ng-bind中
包括JS对象，JS数组等等
例如：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}; points=[1,15,19,2,40]">
<p>The name is <span ng-bind="person.lastName"></span></p>
<p>The third result is {{ points[2] }}</p>
</div>
AngularJS表达式和JavaScript表达式的比较：
- 两者都可以包含literals, operators, variables。
- AngularJS的表达式可以直接放在HTML里，但是JavaScript不行，必须跟HTML分离开。
- AngularJS的表达式不支持if else，loops和exceptions，但是JavaScript可以。
- AngularJS的表达式支持filter，JavaScript没有。
[AngularJS学习笔记] 基础学习01的更多相关文章
- JavaScript 学习笔记(基础学习)
一:来自W3School工具的学习 1:document.getElementById(id) : 访问某个标签的元素,然后对它进行操作 .innerHTML 对其内容进行修改 2:document. ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- Python学习笔记基础篇——总览
Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...
- 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)
注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...
- 《python基础教程（第二版）》学习笔记 基础部分（第1章）
<python基础教程(第二版)>学习笔记 基础部分(第1章)python常用的IDE:Windows: IDLE(gui), Eclipse+PyDev; Python(command ...
- java JDK8 学习笔记——助教学习博客汇总
java JDK8 学习笔记——助教学习博客汇总 1-6章 (by肖昱) Java学习笔记第一章——Java平台概论 Java学习笔记第二章——从JDK到IDEJava学习笔记第三章——基础语法Jav ...
- python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
- 20155234 2016-2017-2第十周《Java学习笔记》学习总结
20155234第十周<Java学习笔记>学习总结 教材学习内容总结 网络编程 在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定 ...
- #学习笔记#e2e学习使用（二）
前言: <#学习笔记#e2e学习使用(一)>主要记录了Vue项目的创建到e2e环境的搭建,以及期间遇到的各种问题和解决方法.本文建立在基础测试环境搭建完毕能正确运行的情况下,编写测试代码, ...
随机推荐
- Haxe - Actuate.Tween
方法解释: Actuate.tween( target : Dynamic , duration : Float , properties : Dynamic , ?overwrite : Bool ...
- 转TransactionProxyFactoryBean代理事务
<?xml version="1.0" encoding="GBK"?> <!-- 指定Spring配置文件的DTD信息 --> < ...
- 【转载】git/github初级运用自如
之前了解过github,并在上面看了一些项目的源代码,于是自己也在github上创建了账户,希望以后有机会也把自己的项目托管在上面去.但是前提你要先了解git/github,下面的内容是从我的好基友虫 ...
- YCM安装与配置
1.重新编译vim 2.通过vundle安装YCM 3.安装CMake 4.下载预先编译好的llvm+clang 5.看官网的命令,生成CMake的编译文件并编译 配置YCM: 要额外配置ycm_ex ...
- C# 计时器的三种使用方法
在.net中有三种计时器,一是System.Windows.Forms命名空间下的Timer控件,它直接继承自Componet;二是System.Timers命名空间下的Timer类. Timer控件 ...
- 面试题_82_to_87_Date、Time 及 Calendar 的面试题
82)在多线程环境下,SimpleDateFormat 是线程安全的吗?(答案)不是,非常不幸,DateFormat 的所有实现,包括 SimpleDateFormat 都不是线程安全的,因此你不应该 ...
- webbrowser代理c#代码实现
微软webbrowser控件也就是IE插件,他的所有功能就像IE类似,当然设置也是一样的,下面介绍下webbrowser如何设置代理,可不要用这个对抗广告联盟哦 You can change the ...
- java.lang.NoClassDefFoundError: javax/wsdl/OperationType
You should find the javax.wsdl package inside wsdl4j.jar Check for the line starting with 'Found IBM ...
- Web Api 接口文档制作
参考地址: http://blogs.msdn.com/b/yaohuang1/archive/2012/05/21/asp-net-web-api-generating-a-web-api-help ...
- codevs 1137 计算系数
什么时候NOIP也要出二项式定理了? 二项式定理+逆元. #include<iostream> #include<cstdio> #include<cstring> ...