MarkdownTest

Angular练习案例

技术栈：Bootstrap3，Angular1.6

##MVVM双向数据绑定

• model：数据
• view：视图
• viewModel：视图模型，将数据挂在viewModel，可以实现数据和模型的双向绑定

##兼容性 angular不兼容ie8及以下

###2月21日笔记

• ng-app
• ng-controller
• ng-model
• ng-bind
• ng-repeat
• ng-cloak

####ng-app ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。 所有 AngularJS 应用都必须要要一个根元素。 HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。 ####ng-controller ng-controller 指令用于为你的应用添加控制器。 在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。 ####ng-model ng-model 指令绑定了 HTML 表单元素到 scope 变量中。 如果 scope 中不存在变量, 将会创建它。 ####ng-bind ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。 如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。 ####ng-repeat ng-repeat 指令用于循环输出指定次数的 HTML 元素。 集合必须是数组或对象。

• ng-repeat每次循环生成一个作用域
• ng-repeat遍历数组用track by，防止数组内部出现重复项，(key, value) in arrs track by key
• 可用angular变量$index $first $middle $last $even $odd

####ng-cloak ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题

###2月22日笔记

####npm命令

• npm init -y 初始化无需确认
• npm info jquery 看详细信息
• npm install [email protected] 指定版本安装

####Angular #####事件 ngClick、ngDblclick、ngBlur、ngFocus、ngChange、ngCopy、ngCut、ngPaste、ngKeydown、ngKeyup、ngKeypress

#####属性操作 ng-disabled、ng-readonly

#####内置属性 $event

#####过滤器 过滤器：内置过滤器和自定义过滤器

####数组操作

• 增： push unshift
• 删： pop shift splice || filter
• 改： splice || map
• 查： find（es6）

####对象操作 Object.keys

• 枚举出所有属性，返回一个数组
• 值得注意的是，如果keys方法里传入的是字符串，也会返回数组，只是数组里的值是字符串中每个字符的索引

####日期时间 Date().now()返回当前时间