[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环境的搭建,以及期间遇到的各种问题和解决方法.本文建立在基础测试环境搭建完毕能正确运行的情况下,编写测试代码, ...
随机推荐
- C#中的Attribute和Java中的Annotation
在之前的博客中介绍过C#的Attribute(特性),简单的说,特性主要就是利用反射技术,在运行期获取关注类的相关标注信息,然后利用这些标注信息对关注的类进行处理,最近因为工作的原因,需要看一下Jav ...
- HTML常用标签及其全称
<a href="#">a 超级链接(anchor)</a> <abbr title="abbreviation的简写"& ...
- Lua for windows中SciTe开启支持python的方法
打开Options-Open Global Options #import python的#去掉即可
- inline-block在ie6中的经典bug
众所周知,给元素设置 inline-block ,可以让ie下的元素出发layout:1. 但是,当给元素设置 inline-block 后,在另外一个class 样式(非设置inline-block ...
- 设置MySQL主从同步
1. 配置主服务器 1.1 编辑my.cnf文件,配置主服务器ID. [mysqld] log-bin=mysql-bin server-id=1relay-log = relay-bin relay ...
- unique() 去重函数
unique()函数是一个去重函数,STL中unique的函数 unique的功能是去除相邻的重复元素(只保留一个), 还有一个容易忽视的特性是它并不真正把重复的元素删除.他是c++中的函数, 所以头 ...
- noi2002银河英雄传说(并查集)
首先表示对C++读入读出问题复杂程度的敬畏,看了好多没讲明白的,本题用cin竟然过不了评测,搞scanf的读入搞了好久.... 本题确实是一道经典的并查集题型,不多讲,拿来练练手用的(其中经历很惨) ...
- span元素定义宽高度
由于span是行内元素,不可能有高度和宽度的,在span标签里添加内容,可以撑出来宽高,想要定义宽高必须转话成块级元素. span{ display:block; } 或者使用 span{ displ ...
- hdu 3518(后缀数组)
题意:容易理解... 分析:这是我做的后缀数组第一题,做这个题只需要知道后缀数组中height数组代表的是什么就差不多会做了,height[i]表示排名第i的后缀与排名第i-1的后缀的最长公共前缀,然 ...
- JavaScript 现状：方言篇
导读 JavaScript 和其他编程语言有一个很大的不同,它不像单纯的一个语言,而像一个由众多方言组成大家族.从 2009 年 CoffeeScript 出现开始,近几年出现了大量基于 JavaSc ...