Angularjs的学习，这一篇文章就够了

Angularjs的使用

HTML

概念

• HTML：超文本标记语言

• 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

• 标记语言是由标签构成的语言，标记语言不是编程语言

文件标签

• 构成html最基本的标签

• html：html文档的跟标签

• head：头标签，用于指定html文档的一些属性，引入外部的资源

• tiltle：标题标签

• body：体标签

文本标签

• 和文本有关的标签

• 注释：<!-- 注释 -->
  <h1> to <h6>:字体大小，1-6字体大小逐渐递减
  <p>:段落标签，换段落
  <br>：换行标签
  <hr>:显示一条水平线 
      属性 color width size align（center，left，      right），修改元素的样式
  <b>:字体加粗
  <i>:斜体
  <font>:字体标签，可以修改字体的属性
      属性（color，size，face：字体类型）
  <center>:居中标签

• div：和css结合使用，默认一个div占满一整行，块级标签

• span：和css结合使用，文本信息在一行展示，行内标签 内联标签

• 显示	说明	实体名称	实体编号
  	半方大的空白	&ensp	&#8194
  	全方大的空白	&emsp	&#8195
  	不断行的空白格	&nbsp	&#160
  <	小于	&lt	&#60
  >	大于	&gt	&#62
  &	&符号	&amp	&#38
  "	双引号	&quot	&#34
  ©	版权	&copy	&#169
  ®	已注册商标	&reg	&#174
  ™	商标（美国）	™	&#8482
  ×	乘号	&times	&#215
  ÷	除号	&divide	&#247

图片标签

• <img src=""/>：展示图片
      属性：align alt width 

• 相对路径

  • 以.开头的路径

  • ./:代表当前目录

  • ../:代表上一级目录

列表标签

• 有序列表

  • ol：声明是一个有序列表，属性：type start

  • li

• 无序列表

  • ul：声明是一个有序列表，属性：disc square circle

  • li

链接标签

• 定义一个超链接

• <a herf="">:定义一个超链接，不是自闭和标签
      属性：target，指定打开资源的方式

表格标签

• table：定义表格，可以通过一些属性进行控制表格的样式

  • width：宽度

  • border：边框

  • cellpadding：定义内容和单元格的距离

  • cellspacing：定义单元格之间的距离，如果指定为0，则单元格的线会合成一条

  • bgcolor：背景色

• tr：定义一行

• td：定义一个单元

  • colspan：合并列

  • rowspan：合并行

• th：定义表头单元格，第一行

• tfoot

• tbody

• thead

表单标签

• 表单：用于采集用户输入的数据的。用于和服务器进行交互，范围代表采集用户数据的范围

• 使用标签：form

• 属性：action method

• 表单项中的数据想要被提交，必须指定其那么属性

• 表单项标签

• input：通过type属性值，改变元素展示的样式

  • type属性

  • text：文本输入框

  • password：密码框

  • radio：单选框

  • checkbox：复选框

  • label：指定输入项的文字描述信息

  • file:文件选择框

  • hidden：隐藏域

  • submit：提交按钮，可以提交表单

  • button：按钮，可以绑定时间

  • image：图片提交按钮，可以通过src提供图片

  • color：取色器

  • date:日期类型

  • datetime：日期类型，带年月日

  • email：邮箱

  • number：定义数字，只能填写数值。

• select：下拉列表

  • <select name="">
        <option select>  <option/>
    <select/>

• textarea：文本域

  • cols:指定列数，每一行有多少字符

  • rows：默认多少行

CSS

概念

• 层叠样式表

• 多个样式可以作用在同一个html的元素上，同时生效

• 好处

• 功能比较强大

• 解耦

CSS的使用

• css与html结合方式

• 内联样式

  • 在标签内使用style

  • 作用域只能作用域一个标签内部

• 内部样式

  • 在head标签内，定义style标签体内容就是css代码

  • 作用域只能作用域一个页面

• 外部样式

  • 在head标签内，定义link标签，引入外部的资源文件

  • link rel="stylesheet" herf="">

  • 通过import引入

• 三种方式作用的范围越来越大

CSS基本语法

• 选择器{
      属性名1：属性值1；
      属性名2：属性值2；
      ...
  }

• 选择器：筛选具有相似特征的元素

选择器

• 筛选具有相似特征的元素

• 分类

• 基本选择器

  • id选择器：选择器具体的id属性值的元素，建议在一个html中id值唯一，语法：#id属性值{}

  • 元素选择器，语法：标签名称{}

  • 类选择器，选择具有相同class属性值的元素，语法：.calss属性值{}

  • 优先级 id选择器>类选择器>元素选择器

• 扩展选择器

  • 选择所有元素，语法：*{}

  • 并集选择器，语法：选择器1，选择器2{}

  • 子选择器，筛选选择器1下的选择器2，语法：选择器1 选择器2{}

  • 父选择器，筛选选择器2上的选择器1，语法：选择器1>选择器2{}

  • 属性选择器，选择元素名称，属性名=属性值的元素，语法：元素名称[type='text']{}

  • 伪类选择器，选择一些元素具有的状态，语法：元素：状态{}

    • 状态

    • link：初始化的状态

    • visited：被访问过的状态

    • active：正在访问的状态

    • hover：鼠标悬浮状态

属性

• 字体，文本

  • font-size：字体大小

  • color：颜色

  • text-align：对齐方式

  • line-height：行高

• 背景

  • background

• 边框

  • border：设置边框，复合属性

• 尺寸

  • width:宽度

  • height：高度

• 盒子：控制布局

  • margin：外边距

  • padding：内边距，默认情况下内边距会影响整个盒子的大小

  • float：浮动，left，right

JS

概念

• 一门客户端脚本语言，运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎

• 可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

基本语法

• 与html结合方式

  • 内部样式，通过《script》标签，可以定义多个标签，有先后顺序，一般放在后面

  • 外部样式，通过src进行外部文件的引入

• 注释

  • 单行注释 //

  • 多行注释 /* */

• 数据类型

  • 原始数据类型（基本数据类型）

  • number：数字，整数/小数/nan

  • string：字符串，没有字符概念

  • boolean：true和false

  • null：一个对象为空的占位符

  • undefined：未定义，一个变量没有被初始化值，则会默认赋值为undefined

  • 引用数据类型（对象）

• 变量

  • 弱类型语言

  • var 变量名=初始化值；

• 运算符

  • 一元运算符（++，--）

  • 算数运算符（+，-）

  • 赋值运算符（=，+=）

  • 比较运算符（》，《，=）

  • 逻辑运算符（&& || ！）

  • number：0或nan为假，其他为真

  • string：除了空字符串，其他为真

  • null或者undefined：都是false

  • 对象：所有的对象都为true

  • 三元运算符（？ ：）

• 流程控制语句

  • if...else..

  • switch:可以接受任意类型的数据

  • while

  • do..while

  • for

基本对象

• Array：数组对象

  • 创建

  • var arr = new Array（元素列表）；

  • var arr = new Array（默认长度5）；

  • var arr =[1,2,3]；

  • 特点

  • 数组元素的类型是可变的

  • 数组长度是可变的

• Boolean

• Date

  • 创建

  • var date = new date（）；

• Function

  • 创建

  • var fun = new Function（形式参数，方法体）；

  • function 方法名称（形式参数）{方法体}；

  • var 方法名 = function（形式参数）{方法体}；

  • 调用：方法名（参数）

  • 特点：方法形式参数不需要写数据类型。定义相同名称方法，后面的方法会把前面的是方法覆盖掉。没有用到的形式参数可以不填。

• Number

• Math

  • 不用创建，通过Math.方法就可以了

• String

• Regexp

  • 正则表达式

• Global

  • 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用

BOM

• 浏览器对象模型，将浏览器的各个组成部分封装成对象

• 组成

• window：窗口对象

  • 特点：不需要创建对象，可以直接使用，通过window.方法名（），window引用可以省略。可以获取其他BOM对象。

  • 与弹出框有关的方法

    • alert（）：显示带有一段消息和确认按钮的警告框

    • confirm（）：显示带有一段消息以及确认按钮和取消按钮的对话框，如果用户点击确认按钮，方法返回true，用户取消，方法返回false

    • prompt（）：显示可提示用户输入的对话框

  • 与打开关闭的方法

    • close（）：关闭当前浏览器窗口

    • open（）：打开浏览器窗口，会返回新窗口的当前对象

  • 与定时器有关的方法

    • setTimeout（）：在指定的毫秒数后调用函数或计算表达式

    • clearTimeout（）：取消由setTimeout（）方法设置的timeout

    • setInterval():按照指定周期进行执行

    • clearInterval():取消定时器

• navigator：浏览器对象

• screen：显示器屏幕对象

• history：历史记录对象

  • 方法

  • back（）：加载history列表中的前一个url

  • forward（）：加载history列表中的下一个url

  • go（）：加载history列表中的某个页面

  • 属性

  • length：返回当前窗口历史列表中的url的数量

• location：地址栏对象

  • 方法

  • reload（）：重新加载当前文档

  • 属性

  • href：刷新页面，可以指定url路径地址

DOM

• 文档对象模型，将标记语言文档的各个组成部分，封装为对象。可以使用这些对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

• DOM标准被分为三个不同的部分

  • 核心DOM：针对任何结构化文档的标准模型

  • Document:文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment：注释对象

  • Node：节点对象，其他五个对象的父对象

  • XML DOM：针对XML文档的标准模型

  • HTML DOM：针对HTML文档的标准模型

• 功能：控制html文档的内容

• 获取页面标签对象Element

  • document.getElementById（"id值"）

• 获取对象之后我们要进行操作

  • 操作属性值

  • 明确获取的对象是哪一个？

  • 查看API文档，找其中有哪些属性可以设置

  • 操作标签体内容

  • 获取元素对象

  • 使用innerHTML属性修改标签体内容

核心DOM模型

• Document：文档对象

  • 在html dom模型中可以使用window对象来获取

  • document

  • 方法

  • getElementById（）：根据id属性值获取元素对象。id属性值一般唯一

  • getElementsByTagName（）：根据元素名称（标签名称）获取元素对象，返回的是一个数组

  • getElementsByClassName（）：根据Class属性值获取元素对象们，返回值是一个数组

  • getElementsByName（）：根据name属性值获取元素对象，返回值是一个数组

  • 创建其他DOM的方法

  • createAttribute（name）

  • createComment（）

  • createElement（）

  • createTextNode（）

  • 属性

• Element：元素对象

  • 通过document对象获取和创建

  • 方法

  • removeAttribute（key）：删除Dom属性

  • setAttribute（key，value）：动态的设置Dom属性

• Node：节点对象，其他5个对象的父对象

  • 他定义的对象，其他几个子对象都能使用

  • 特点

  • 所有dom对象都可以被认为是一个节点

  • 方法，CRUD DOM树

  • appendChild（）：向节点的子节点列表的结尾添加新的子节点

  • removeChild（）：删除子节点

  • replaceChild（）：新节点替换一个子节点

  • 属性

  • parentNode：可以获取节点的父节点

HTML DOM

• 标签体的设置和获取：innerHTML

• 使用html元素对象的属性

• 控制元素样式

事件监听机制

• 功能：某些组件被行了某些操作后，触发某些代码的执行

  • 事件：某些操作。如单机等

  • 事件源：组件。如按钮

  • 监听器：代码

  • 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某些事件

• 如何绑定事件？

• 直接在html标签上，指定事件的属性，属性值就是js代码

• 事件种类

  • onclick：单击事件

  • ondlclick：双击事件

  • onblur：失去焦点

  • unfocus：获取焦点

  • unload：加载事件，一张页面完成加载

  • onmousedown：鼠标按钮被按下

  • onmouseup：鼠标按键被松开

  • onmousemove：鼠标被移动

  • onmouseover：鼠标移到某个元素之上

  • onmouseout：鼠标从某个元素移开

  • onkeydown：某个键盘按键被按下，鼠标按钮被按下

  • onkeyup：某个键盘按钮被松开

  • onkeypress：某个键盘按键被按下并松开

  • onchange：域的内容被改变

  • onselect：文本被选中

  • onsubmit：确认按钮被点击

  • onreset：重置按钮被点击

Angularjs

AngularJS是什么?

• Google开源的 前端JS 结构化 框架

• 动态展示页面数据, 并与用户进行交互

• AngularJS特性(优点)

  • 双向数据绑定

  • 声明式依赖注入

  • 解耦应用逻辑, 数据模型和视图

  • 完善的页面指令

  • 定制表单验证

  • Ajax封装

HelloWorld

• 导入angular.js, 并在页面中引入

• 在<html><body>中ng-app指令

• 定义ng-model='xxx'/{{xxx}}

四个重要概念

双向数据绑定

• View（视图）： 页面（标签、指令，表达式）

• Model(模型) ：作用域对象（属性、方法）

• 数据绑定： 数据从一个位置自动流向另一个位置

  • View-->Model

  • Model-->View

• 单向数据绑定： 只支持一个方向

  • View-->Model ： ng-init

  • Model-->View : {{name}}

• 双向数据绑定

  • Model<-->View : ng-model

• angular是支持双向数据绑定的

依赖注入

• 依赖的对象被别人(调用者)自动注入进入

• 注入的方式;

  • 内部自建：不动态

  • 全局变量：污染全局环境

  • 形参：这种最好

• angualr就是通过声明式依赖注入， 来得到作用域对象

• 形参名不能随便定义（只是针对当前这种写法）

** MVC模式**

• M: Model, 即模型, 在angular中:

  • 为scope

  • 储存数据的容器

  • 提供操作数据的方法

• V: View, 即视图, 在angular中:

  • 为页面

  • 包括: html/css/directive/expression

  • 显示Model的数据

  • 将数据同步到Model

  • 与用户交互

• C: Controller, 即控制器, 在angular中:

  • 为angular的Controller

  • 初始化Model数据

  • 为Model添加行为方法

MVVM模式

• M: Model, 即数据模型, 在angular中:

  • 为scope中的各个数据对象

• V: View, 即视图, 在angular中:

  • 为页面

• VM: ViewModel, 即视图模型, 在angular中:

  • 为scope对象

• 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层

四个重要对象

作用域

• 是一个js实例对象

• 这个对象的属性、方法， 页面都可以直接引用、操作

• ng-app指令： 内部创建一个根作用域（$rootScope）, 是所有其它作用域的父对象

控制器

• 也是一个对象，是我们View与Model之间的桥梁

• 当我们使用了ng-controller指令， 内部就会创建控制器对象

• 但我们同时得提供控制器的构造函数（必须定义一个$scope的形参）

• 每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象。

模块

• 也是一个对象

• 创建模块对象： angular.module('模块名', [依赖的模块])

• 通过模块添加控制器：

  • module.controller('MyController', function($scope){//操作$scope的语句})

• angular的整体设计也是多模块的

  • 核心模块： angular.js

  • 扩展模块： angular-router.js, angular-message.js, angular-animate.js

三个页面语法

表达式

• {{js表达式}}

• 从作用域对象中读取对应的属性数据来显示数据

• 不支持if/for/while

• 支持三目表达式

指令

• 什么指令 ： 自定义标签属性/标签

• 常用的指令：

  • ng-app: 指定模块名，angular管理的区域

  • ng-model： 双向绑定，输入相关标签

  • ng-init： 初始化数据

  • ng-click： 调用作用域对象的方法（点击时） 可以传$event

  • ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）

  • ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）

  • ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域

    • $index, $first, $last, $middle, $odd, $even

  • ng-show: 布尔类型， 如果为true才显示

  • ng-hide: 布尔类型， 如果为true就隐藏

  • ng-class: 动态引用定义的样式 {aClass:true, bClass:false}

• ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'}

• ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event

• ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event

过滤器

• 作用: 在显示数据时可以对数据进行格式化或过滤

  • 单个--->格式化（将别的类型的数据转换为特定格式的字符串）

  • 多个----》格式化/过滤

  • 不会真正改变被操作数据

• {{express | 过滤器名：补充说明}}

• 常用过滤器：

  • currency 货币格式化(文本)

  • number数值格式化(文本)

  • date 将日期对象格式化(文本)

  • json: 将js对象格式化为json(文本)

  • lowercase : 将字符串格式化为全小写(文本)

  • uppercase : 将字符串格式化全大写(文本)

  • limitTo 从一个数组或字符串中过滤出一个新的数组或字符串

    • limitTo : 3 limitTo : -3

  • orderBy : 根据指定作用域属性对数组进行排序

    • {{[2,1,4,3] | orderBy}} 升序

    • {{[2,1,4,3] | orderBy：‘-’}} 降序

    • {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'id'} id升序

    • {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'-price'} price降序

  • filter : 从数组中过滤返回一个新数组

    • {{[{id:22,price:35}, {id:23, price:45}] | filter:{id:'3'}} //根据id过滤

    • {{[{id:22,price:35}, {id:23, price:45}] | filter:{$:'3'}} //根据所有字段过滤