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. uvalive 4851 Restaurant（扫描法）

    题意:有一个M*M的网格,坐标[0...M-1,0...M-1] 网格里面有两个y坐标同样的宾馆A和B.以及n个餐厅,宾馆AB里面各有一个餐厅,编号1,2,其它餐厅编号3-n.如今你打算新开一家餐厅. ...

  2. POJ 2752 Seek the Name, Seek the Fame(next数组的理解)

    做此题,只要理解好next数组就行....................... #include <cstdio> #include <cmath> #include < ...

  3. RPM包查询

    一.查询包是否安装 [root@localhost Packages]# rpm -q httpd            ---> 查询已安装的包(命令包名) #选项: #    -q    查 ...

  4. （二）一个工作任务引起的乱战——C++程序编译为dll，让C#调用

    C++程序编译为C#可调用的dll的过程: 1.新建一个Win32 Console Application 项目,项目名为:DLLDemo,下一步选择Application type为DLL; 2.在 ...

  5. UIColor各种颜色转换

    1.Hex值颜色转换 #import <UIKit/UIKit.h> @interface UIColor (Extension) // 根据无符号的32位整数转换为对应的RGB颜色 + ...

  6. 不用标准库实现memmove，借助一个缓冲区temp，即使src和dest所指的内存有重叠也能正确拷贝

    void *mymemmove(void *dest,const void *src,size_t count) { char temp[count]; int i; char *d=(char *) ...

  7. 【分享】JS图片滑动渐显渐隐插件-附使用方法。

    前阵子总监要说做一个邀请函 效果 点击这里 鼠标拖拽进行浏览 它用的是Adobe edge软件生成的,代码量过大,冗余太多. 再加上我也没学过这个软件怎么使用,增加学习成本影响项目进度. 于是就自己写 ...

  8. Guava API学习之Ordering犀利的比较器 编辑

    Ordering是Guava类库提供的一个犀利强大的比较器工具,Guava的Ordering和JDK Comparator相比功能更强.它非常容易扩展,可以轻松构造复杂的comparator,然后用在 ...

  9. Html5 学习之 Html5功能判断插件 Modernizr

    ---恢复内容开始--- Modernizr 浏览器对HTML5和CSS3开发的功能检测类库 由于当前用户使用的浏览器版本较多,对H5和CSS3的支持也各不相同.前端的开发者,在使用一些新的特性的时候 ...

  10. App轮播图

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...