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>

这个顺序应是这样的：

  1. ng-model绑定这个input为myCol
  2. 再把value绑定到myCol中
  3. 最后是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的更多相关文章

  1. JavaScript 学习笔记(基础学习)

    一:来自W3School工具的学习 1:document.getElementById(id) : 访问某个标签的元素,然后对它进行操作 .innerHTML 对其内容进行修改 2:document. ...

  2. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  3. Python学习笔记基础篇——总览

    Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...

  4. 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)

    注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...

  5. 《python基础教程（第二版）》学习笔记 基础部分（第1章）

    <python基础教程(第二版)>学习笔记 基础部分(第1章)python常用的IDE:Windows: IDLE(gui), Eclipse+PyDev; Python(command ...

  6. java JDK8 学习笔记——助教学习博客汇总

    java JDK8 学习笔记——助教学习博客汇总 1-6章 (by肖昱) Java学习笔记第一章——Java平台概论 Java学习笔记第二章——从JDK到IDEJava学习笔记第三章——基础语法Jav ...

  7. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  8. 20155234 2016-2017-2第十周《Java学习笔记》学习总结

    20155234第十周<Java学习笔记>学习总结 教材学习内容总结 网络编程 在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定 ...

  9. #学习笔记#e2e学习使用（二）

    前言: <#学习笔记#e2e学习使用(一)>主要记录了Vue项目的创建到e2e环境的搭建,以及期间遇到的各种问题和解决方法.本文建立在基础测试环境搭建完毕能正确运行的情况下,编写测试代码, ...

随机推荐

  1. 对于接收到的GPS信息详解

    最近一直在做gps驱动方面的东西,对于底层接收到的gps信息不是很了解,查询了资料对这些信息做出总结: 由于在室内,所以信号不是很好,接收不到卫星信号,必须站到窗口或者空旷的地方,这是gps的debu ...

  2. Android线性布局(Linear Layout)

    Android线性布局(Linear Layout) LinearLayout是一个view组(view group),其包含的所有子view都以一个方向排列,垂直或是水平方向.我们能够用androi ...

  3. 转：表单中Readonly和Disabled的区别（HTML中使用javascript解除禁止input输入框代）

    转:表单中Readonly和Disabled的区别 参考资料: disabled和readonly区别: 参考博文1地址:http://blog.csdn.net/symgdwyh/article/d ...

  4. Topcoder SRM 630 (500 floyed 暴力 _builtin_popcount())

    题意:给n个点,保证图联通,给点相连的距离,求一个最多的点,这些点之间的距离都是相同的. 分析: 下面的代码是我们房间第一的大神的,写的很简洁,我的思路和他的一样,但是我不知道错哪了. 思路是暴力枚举 ...

  5. ASP.NET Redis 开发(转载)

    Redis简介 Redis是一个开源的,使用C语言编写,面向“键/值”对类型数据的分布式NoSQL数据库系统,特点是高性能,持久存储,适应高并发的应用场景.Redis纯粹为应用而产生,它是一个高性能的 ...

  6. POJ 3253 Fence Repair【二叉堆】

    题意:给出n根木板,需要把它们连接起来,每一次连接的花费是他们的长度之和,问最少需要多少钱. 和上一题果子合并一样,只不过这一题用long long 学习的手写二叉堆的代码,再好好理解= = #inc ...

  7. jquery图表插件morris.js参数详解和highcharts图表插件

    一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...

  8. 8 种 NoSQL 数据库系统对比

    导读:Kristóf Kovács 是一位软件架构师和咨询顾问,他最近发布了一片对比各种类型NoSQL数据库的文章. 虽然SQL数据库是非常有用的工具,但经历了15年的一支独秀之后垄断即将被打破.这只 ...

  9. Java Web编程的主要组件技术——Hibernate入门

    参考书籍:<J2EE开源编程精要15讲> Hibernate是对象/关系映射(ORM,Object/Relational Mapping)的解决方案,就是将Java对象与对象关系映射到关系 ...

  10. hdu 4604 Deque（最长不下降子序列）

    从后向前对已搜点做两遍LIS(最长不下降子序列),分别求出已搜点的最长递增.递减子序列长度.这样一直搜到第一个点,就得到了整个序列的最长递增.递减子序列的长度,即最长递减子序列在前,最长递增子序列在后 ...