[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环境的搭建,以及期间遇到的各种问题和解决方法.本文建立在基础测试环境搭建完毕能正确运行的情况下,编写测试代码, ...
随机推荐
- Android getActionBar()报空指针异常
1. 加载完视图后,再去获取: 写在setContentView()后面. 2.sdk版本: Actionbar的主题在3.0以后才有,使用的时候要确保,最低的版本不能小于3.0. <uses- ...
- 结构体struct和typedef后面接指针的含义
typedef struct file { ... }FileInfo, *FileP; 上述程序中定义了一个结构体,结构体的名字为file,并且给其指针 取个别名为FileP,所以后续程序中出现Fi ...
- POJ2135 最小费用最大流模板题
练练最小费用最大流 此外此题也是一经典图论题 题意:找出两条从s到t的不同的路径,距离最短. 要注意:这里是无向边,要变成两条有向边 #include <cstdio> #include ...
- UVa 12186 Another Crisis
题意: 给出一个树状关系图,公司里只有一个老板编号为0,其他人员从1开始编号.除了老板,每个人都有一个直接上司,没有下属的员工成为工人. 工人们想写一份加工资的请愿书,只有当不少于员工的所有下属的T% ...
- ZJOI2006物流运输
唉,没想出来…… 注意到预处理的作用.还有CLJ大牛说的话:这么小的数据,想干什么都可以. SPFA预处理+DP 够经典 var f:..,..]of longint; a:..,..]of bool ...
- NoSQL 数据库系统对比
虽然SQL数据库是非常有用的工具,但经历了15年的一支独秀之后垄断即将被打破.这只是时间问题:被迫使用关系数据库,但最终发现不能适应需求的情况不胜枚举. 但是NoSQL数据库之间的不同,远超过两 SQ ...
- Selenium Tutorial (1) - Starting with Selenium WebDriver
Starting with Selenium WebDriver Selenium WebDriver - Introduction & Features How Selenium WebDr ...
- Remove Duplicates from Sorted List I & II
Title: Given a sorted linked list, delete all duplicates such that each element appear only once. Fo ...
- Spring各jar包的作用（转载）
spring.jar是包含有完整发布的单个jar 包,spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容,因为只有在开发环境下才会用到 spring-m ...
- ios 照片编辑的view封装
转:http://www.cnblogs.com/xiaobaizhu/archive/2013/07/03/3170101.html 该控件有旋转,缩放,拖动,剪裁的功能,封装成了一个ImageCr ...