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——入门知识的更多相关文章

  1. angularJs学习笔记－入门

    1.angularJs简介 angularJs是一个MV*的javascript框架(Model-View-Whatever,不管是MVVM还是MVC,统归MDV(model drive view)) ...

  2. UnityShader学习笔记1 — — 入门知识整理

    注:资料整理自<Unity Shader入门精要>一书 一.渲染流程概念阶段:  应用阶段:(1)准备好场景数据:(如摄像机位置,物体以及光源等)   (2)粗粒度剔除(Culling): ...

  3. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  4. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  7. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  8. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  9. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

随机推荐

  1. redis 源代码分析(一) 内存管理

    一,redis内存管理介绍 redis是一个基于内存的key-value的数据库,其内存管理是很重要的,为了屏蔽不同平台之间的差异,以及统计内存占用量等,redis对内存分配函数进行了一层封装,程序中 ...

  2. [AngularJS] Angular 1.5 $transclude with named slot

    In Angular 1.5, there is no link and compile. So use if you transclude, you cannot access the fifth ...

  3. iOS、mac开源项目及库（感谢原作者的分享）

    目录 模糊效果 富文本 表相关 HUD与Toast 其他UI 其他动画 网络测试 网络聊天 Model 数据库 PDF 摄像照相视频音频处理 消息相关 消息推送服务器端 版本新API的Demo 测试及 ...

  4. Java基础知识强化36：StringBuffer类之StringBuffer的概述

    1. StringBuffer类概述: (1)String的缺陷: 我们如果对字符串进行拼接操作,每次拼接,都会构造一个新的String对象,既耗时,又浪费空间.如下图: (2)StringBuffe ...

  5. 服务 远程服务 AIDL 进程间通讯 IPC 深化

    示例 aidl接口文件 package com.bqt.aidlservice.aidl; parcelable Person;  package com.bqt.aidlservice.aidl; ...

  6. C#、.NET和ASP.NET三者之间的区别

    刚毕业后出去找工作面试的时候就遇到这个问题!.回答不上来.回来网上查的如下: 那么 .NET.C#和ASP.NET这三者之间区别不清楚,到底它们之间有什么联系呢? 1..NET是一个平台,一个抽象的平 ...

  7. HTML5和CSS3实例教程[总结二]

    基于contenteditable属性实现在位编辑 HTML5规范引入了contenteditable属性,它几乎可以用在任何元素上,只要添加这一属性 即可变为可编译区域 <!DOCTYPE h ...

  8. Request.ServerVariables 服务器环境变量

    Request.ServerVariables["Url"] 返回服务器地址 Request.ServerVariables["Path_Info"] 客户端提 ...

  9. vsftpd安装、多用户配置

    1.vsftpd安装 rpm -ivh vsftpd 2.2.2 11.el6_4.1.x86_x64.rpm 2.添加ftp用户 添加ftp用户组 groupadd ftpg 添加ftp用户 use ...

  10. ORACLE网络配置大全没有比这个更详细的【weber出品】

    一.起篇 现在怎么说也是互联网时代,数据库也要联网,很多朋友学习Oracle的时候无外乎搭建的是以下两种学习环境: 1.直接在windows环境下安装Oracle后直接sqlplus连接. 2.在wi ...