2017-5-19 Angular.js 学习笔记
2017-05-19 本文已影响0人
GodlinE
Angular.js 使用步骤
//AngularJs 提供了一个全局对象 angular
//1.创建一个模块，第一个参数为模块名称，第二个参数为依赖模块
var app = angular.module('app',[]);
//2.创建控制器，作为连接 model 和 view 的桥梁,第一个参数为控制气啊名称，第二个参数为依赖的服务
app.controller('xxxController',['$scope',function($scope){
}])
//3.绑定模块
//4.绑定控制器
<body ng-app='app' ng-controller='xxxController'>
</body>
- 一个页面可以绑定多个模块，但是模块之间是不能嵌套的
- 通常一个 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 使用
<ul ng-switch='value' ng-repeat='(index,value) in array'>
<li ng-switch-when="css">{{value}}</li>
</ul>
AngularIJS 数据单向绑定
- AngularJS 是以数据作为驱动的 mvc 框架，所有模型里的数据经由控制器展示到视图中
- 数据绑定指的就是将模型中的数据与响应的视图惊醒关联
- AngularJS 当中的数据绑定分为
- 1.数据单向绑定
单向数据绑定是指将模型数据，按着写好的视图模版生成 HTML 标签，然后追加到 DOM 树中显示 - 2.数据双向绑定
双向绑定则可以实现模型数据和视图模版的双向传递
单向数据绑定的几种方式
- 1.插值语法{{属性}}：会闪烁 可以绑定多个值
- 2.ng-bind = '属性'：不会闪烁 只能绑定一个值
- 3.ng-bind-template:不会闪烁，可以绑定多个值
- ng-cloak ：防止闪烁
- 需要在 style 标签内添加 [ng-cloak]选择说行有 ng-cloak 的元素
[ng-cloak]{display:none}
双向数据绑定
<body ng-app="app" ng-controller="skController">
<!--视图数据绑定模型属性-->
<input type="text" ng-model="name">
<!--模型数据修改视图-->
<p>{{name}}</p>
</body>
<script src="angular.js"></script>
<script>
//双向绑定: 模型和视图的双向传递,
//模型数据绑定到视图
//视图数据可以绑定到模型中
//想要实现视图数据绑定到模型, 必须借助表单
//在表单中使用 ng-model='属性名称', input标签中绑定属性
//1.创建模块
var app = angular.module('app', []);
//2.创建控制器
app.controller('skController', ['$scope',function ($scope) {
$scope.name = 'sk666';
}]);
//3.绑定模块 ng-app='app'
//4.绑定控制器
</script>
MVVM
- MVVM 是 Model-View-ViewModel 的缩写
MVVM 最早由微软提出来，它借鉴了桌面应用程序的 MVC 思想，在前端页面中，把 Model 用 纯 JavaScript 对象表示， View 负责显示，两者做到了最大限度的分离
把 Model 和 View 关联起来的就是 ViewModel。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 的修改同步回 Model。
