AngularJs学习笔记1——入门知识
1.什么是AngularJs
AngularJs 诞生于2009年，由Misko Hevery 等人创建，后被Google收购，是一个优秀的Js框架，用于SPA（single page application）适用于以数据操作比较频繁的应用程序。基本操作思路与DOM和jQuery的“先查找元素再操作元素”不同，AngularJs是“创建数据、绑定数据、修改数据、更新数据”——一切操作都以数据位中心。
2.AngularJs的四大特性
①采用MVC设计模式
②双向数据绑定
③依赖注入
④模块化设计
主要从这四个特性出发学习AngularJs的应用。但是前提是要先明白AngularJs的表达式和指令，不先学变量，怎么去写函数。
3.表达式和指令
3.1 准备工作
在开始学习之前，先下载AngularJs的框架，我现在学习的是1.4版本，尽管2版本已经出来了，但是1.4的版本还是有许多人在用的。下载完成后，在页面中<head>标签中引用。同时，这里需要提前学习一下两个指令：ng-app 和 ng-init
ng-app：①指定作用范围②自动载入并启动ng，用在html或者body标签。ng-app只识别第一个，所以一般放在body或者html中，即：
<html ng-app>
ng-init ：初始化变量
<div ng-init="a=3"></div>
3.2 表达式
表达式的语法：{{表达式}}
作用：在当前位置输出当前表单时结果
<p>{{3+4}}</p>
如果你已经引入angular.js文件，并设置html或body为ng-app，那么在页面中会计算表达式的值，输出7
3.3指令
AngularJS 通过被称为 指令 的新属性来扩展 HTML，通过内置的指令来为应用添加功能， 允许你自定义指令（后面会学习）。
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
常用的指令：ngApp、ngRepeat、ngIf、ngShow、ngHide、ngClick、ngChecked、ngDisabled、ngSrc等等。
常用指令的几个注意事项：
1) ng-bind指令：用来将表达式的值输出到当前元素的innerHTML中，如果说出现闪动情况时(ng-init)用，但一般不用
2) no-repeat:循环，把no-repeat放在哪个标签里，就重复哪个标签。如果是对象时，可以写成(key,value) in list
如左图，循环输出一个数组的值到列表中，右图为结果
但是当数组中有重复的数字时，这种方法就会报错了，如下：
通过track by $index 方法输出重复变量，如下：
3) ng-if:判断表达式的值，为true时显示在DOM树上，为false时不显示
AngularJs学习笔记1——入门知识的更多相关文章
- angularJs学习笔记－入门
1.angularJs简介 angularJs是一个MV*的javascript框架(Model-View-Whatever,不管是MVVM还是MVC,统归MDV(model drive view)) ...
- UnityShader学习笔记1 — — 入门知识整理
注:资料整理自<Unity Shader入门精要>一书 一.渲染流程概念阶段: 应用阶段:(1)准备好场景数据:(如摄像机位置,物体以及光源等) (2)粗粒度剔除(Culling): ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
随机推荐
- [RxJS] Observables can throw errors
Whenever we are writing code, we need to remember that things may go wrong. If an error happens in a ...
- 百度之星资格赛 hdu 4826 Labyrinth 动态规划
/********************* Problem Description 是一仅仅喜欢探险的熊.一次偶然落进了一个m*n矩阵的迷宫,该迷宫仅仅能从矩阵左上角第一个方格開始走,仅仅有走到右上 ...
- I/O输出端口照明LED
方案特点:I/O输出端口照明LED.而区间0.2秒闪烁!(非计时器延迟) (P1.0销被连接到LED) LED EQU P1.0 ;宏定义 ORG 0000H LJMP MAIN ORG 0200H ...
- Java基础知识强化59：String（字符串）和其他类型的相互转化
1. String类型 ---> 其他类型 (1)使用基本类型包装类的parseXXX方法 e.g:String(字符串)转化为int(整型) String MyNumber ="12 ...
- C#_Socket网络编程实现的简单局域网内即时聊天，发送文件，抖动窗口。
最近接触了C#Socket网络编程,试着做了试试(*^__^*) 实现多个客户端和服务端互相发送消息 发送文件抖动窗口功能 服务端: using System; using System.Collec ...
- pd的django To do list 教程------（1）说明与展示
1:开发环境:windows7+django1.8+Python2.7+mysql数据库 2:开发工具:pycharm 3:说明与展示 以上就是最后的页面,可以完成添加,删除,编辑,已完成(勾选che ...
- F# 既能解释执行，也能编译执行
F# 除了是函数式语言和面向对象语言之外,还有个突出的特点是:既能解释执行,也能编译执行. 一般说来,一种语言只能选择其一种.比如说C++.C#是编译执行,不能解释执行,象Matlab.R是解释执 ...
- Ubuntu 添加sudo用户
第一种方法: 添加sudo用户 当你安装Ubuntu的时候,它会自动添加第一个用户到sudo组,允许这个用户通过键入其自身帐户密 码来获得超级用户(root)身份.然而,系统不会再自动添加其他的用户到 ...
- css控制图片变灰色，彩色
<A href="链接地址"><IMG src="p1.jpg" border="0"></A> < ...
- 一、webpack那点事-安装、环境搭建
前言: 还记得两年前刚来公司才几个月,经理就安排我去做JS地图相关的维护和开发工作,然后就跟着一个公司老鸟(没俩月他离职了)熟悉地图相关的功能. 本人嘛,那会前端JS实际开发经验也才几个月,然后当我看 ...