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)的概览,并说明 ...
随机推荐
- Java基础知识强化68:基本类型包装类之Character概述和Character常见方法
1. Character概述: public final class Character extends Object implements Serializable,Comparable<Ch ...
- OD: Heap Exploit : DWORD Shooting & Opcode Injecting
堆块分配时的任意地址写入攻击原理 堆管理系统的三类操作:分配.释放.合并,归根到底都是对堆块链表的修改.如果能伪造链表结点的指针,那么在链表装卸的过程中就有可能获得读写内存的机会.堆溢出利用的精髓就是 ...
- 【转】tkinter实现的文本编辑器
此代码是看完如下教学视频实现的,所以算是[转载]吧: 效果: 代码: # -*- encodin ...
- Android(通用机能)
数据存储 本地数据存在都是私有化的. 共享方法1是构造数据源组件.方法2将数据放入扩展存储设备. Mashup 服务组件默认没有运行在独立进程或线程中,因此费时操作一般需要起线程.可配置指定新进程. ...
- php模块memcache和memcached区别分析
zm总结:尽量使用memcached就好了 1.目前大多数php环境里使用的都是不带d的memcache版本,这个版本出的比较早,是一个原生版本,完全在php框架内开发的.与之对应的带d的memcac ...
- java 连接sql server2008配置
Java 应用程序连接SQL Server2008 (Eclipse+JDK7.0+jdbc4.0.jar+Sql Server2008) 假设应用端的连接语句为: String url = &quo ...
- Swift中类的两段式构造(类的构造过程)
import Foundation /* 类的构造需要两个阶段: 第一阶段: 1.程序调用子类的某个构造器 2.为实例分配内存, 此时实例的内存还没有被初始化 3.指定构造器确保子类定义的所有实例存储 ...
- (原创) jetson tk1 初始化
1. 相关的网站: 1. Jetson TK1 support https://developer.nvidia.com/jetson-tk1-support 2.official Wiki fo ...
- dede分页
{dede:list pagesize ='} <div class="intro clearfix"> <ul class="pic"> ...
- 关于uC/OS的简单学习(转)
1.微内核 与Linux的首要区别是,它是一个微内核,内核所实现的功能非常简单,主要包括: 一些通用函数,如TaskCreate(),OSMutexPend(),OSQPost()等. 中断处理函数, ...