2017-5-19 Angular.js 学习笔记

Angular.js 使用步骤

//AngularJs 提供了一个全局对象 angular
//1.创建一个模块，第一个参数为模块名称，第二个参数为依赖模块
var app = angular.module('app',[]);
//2.创建控制器，作为连接 model 和 view 的桥梁,第一个参数为控制气啊名称，第二个参数为依赖的服务
app.controller('xxxController',['$scope',function($scope){

}])
//3.绑定模块 
//4.绑定控制器

• 一个页面可以绑定多个模块，但是模块之间是不能嵌套的
• 通常一个 html 里面值对应一个模块

Angular 指令概念

• HTML 在构建应用时存在诸多不足之处，AngularJS 通过扩展一系列的 HTML 属性或标签来弥补这些缺陷
• 所谓指令就是 AngularJs 自定义的 HTML 属性或标签，这些指令都是以 ng- 作为前缀的
• 内置指令： angular 开始为 html 内置好了一些特定功能的属性或者标签，当解析到 ng 代码时，会回头到 html 当中解析自己的指令

常用指令

ng-app 指定应用模块，至少一个
ng-controller 指定控制器
ng-show 控制元素是否显示，布尔类型
ng-hide 控制元素是否隐藏，布尔类型
ng-if 控制元素是否存在，布尔类型，弱为 false，在操作台也看不到此标签
ng-src 增强通篇路径，用普通 src 虽然会正确显示但是控制台会报错，原因是 html 文件是从上到下渲染的，渲染的时候看不到此路径，而之后解析的时候又能看到，所以会正确显示，但是也会报错
ng-herf 增强地址
ng-class 控制类名
使用方式： ng-class='{red:true}'
red为类名，true 为是否添加类名
ng-include 引入模版，html 中直接引入别的文件： ng-include="'header.html'",因为参数是引用路径所以要加引号
ng-disabled 表单禁用，input 的输入框禁用
ng-readonly 表单只读，input 输入框内容不可修改
ng-checked  单、复选框表单选中
ng-selected 下拉框表单选中

• ng-switch 选择指令
• ng-repeat 遍历指令

//配合 ng-switch-when 使用

      
{{value}}

AngularIJS 数据单向绑定

• AngularJS 是以数据作为驱动的 mvc 框架，所有模型里的数据经由控制器展示到视图中
• 数据绑定指的就是将模型中的数据与响应的视图惊醒关联
• AngularJS 当中的数据绑定分为
• 1.数据单向绑定
  单向数据绑定是指将模型数据，按着写好的视图模版生成 HTML 标签，然后追加到 DOM 树中显示
• 2.数据双向绑定
  双向绑定则可以实现模型数据和视图模版的双向传递

单向数据绑定的几种方式

• 1.插值语法{{属性}}：会闪烁 可以绑定多个值
• 2.ng-bind = '属性'：不会闪烁 只能绑定一个值
• 3.ng-bind-template:不会闪烁，可以绑定多个值
• 4. ng-cloak ：防止闪烁
• 需要在 style 标签内添加 [ng-cloak]选择说行有 ng-cloak 的元素[ng-cloak]{display:none}

双向数据绑定

{{name}}

MVVM

• MVVM 是 Model-View-ViewModel 的缩写
  MVVM 最早由微软提出来，它借鉴了桌面应用程序的 MVC 思想，在前端页面中，把 Model 用 纯 JavaScript 对象表示， View 负责显示，两者做到了最大限度的分离
  把 Model 和 View 关联起来的就是 ViewModel。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 的修改同步回 Model。