[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++：纯虚函数与抽象类
5.4.3 纯虚函数和抽象类 纯虚函数是一个在基类中说明的虚函数,它在该基类中没有定义,但是要求在派生类中根据需要对它进行定义,或仍然说明为纯虚函数. 声明纯虚函数的一般格式是: virtual 函数 ...
- OSSEC 安装执行./install.sh详细信息
下载好ossec安装文件后解压得到如下目录 [root@localhost ~]# cd ossec-hids-/ [root@localhost ossec-hids-]# ll total drw ...
- 转TransactionProxyFactoryBean代理事务
<?xml version="1.0" encoding="GBK"?> <!-- 指定Spring配置文件的DTD信息 --> < ...
- Altium designer总结
itwolf原创文章,转载请注明出处 大概有半年没有画过PCB板了,最近突然又要画一个简单的小板子,却发现好多东西已经不是很熟练了,现在把Altium designer软件的使用中要注意的问题和一些小 ...
- HDU 1255 覆盖的面积 （扫描线 线段树 离散化 矩形面积并）
题目链接 题意:中文题意. 分析:纯手敲,与上一道题目很相似,但是刚开始我以为只是把cnt>=0改成cnt>=2就行了,. 但是后来发现当当前加入的线段的范围之前 还有线段的时候就不行了, ...
- Android-Universal-Image-Loader
基本以后都不用了,所以自己就不总结了 http://www.cnblogs.com/kissazi2/p/3886563.html http://www.cnblogs.com/kissazi2/p/ ...
- LeetCode Binary Tree Preorder Traversal 先根遍历
题意:给一棵树,求其先根遍历的结果. 思路: (1)深搜法: /** * Definition for a binary tree node. * struct TreeNode { * int va ...
- C扩展Python
基本想法: 先看中文小介绍,再看英文详细文档. 1. 参考 首先参考THIS, IBM的工程师好像出了好多这样的文章啊,而且每次看到时间戳,我都想戳自己- -! 2. ERROR 可能遇到错误: fa ...
- test chemes
rcmobile://messages rcmobile://badge rcmobile://dialer rcmobile://open rcmobile://sms?type=new
- K2 学习笔记
转:http://www.cnblogs.com/kaixuanpisces/category/149223.html k2 简介 工作流介绍 k2流程设计简介 K2流程设计详细版(图文)一 K2流程 ...