angular中的一些DOM操作

## angular中的DOM操作


jqLite可以理解成是阉割、精简版的jquery,如果你有需求比如说想要获取兄弟元素，但jqLite没有提供这个方法，可以通过变通的方式，比如可以先找parent()，然后再找childern()来实现


```javascript
//这是用jquery来写的
$(document).ready(function () {
            var $ele = $('#demo');
            $ele.on('mouseenter', function () {
                $ele.css('background', 'blue');
            });
            $ele.on('mouseleave', function () {
                $ele.css('background', 'red');
            });
        })
```
转换成angular的jQLite则书写方式如下：
```javascript
angular.element(document).ready(function () {
            var $ele = angular.element(document.querySelector('#demo'));
            $ele.on('mouseenter', function () {
                $ele.css('background', 'blue');
            });
            $ele.on('mouseleave', function () {
                $ele.css('background', 'red');
            });
        })
```




## angular开发流程
- angular开发流程当中最重要的是 --> 数据建模
- 如何进行数据建模
    + 看到input --> ng-model --> 
    + 看到数据，是不能写死的，必须要通过后台进行渲染的 --> 表达式 --> 数据模型


## mvvm




1、不理解也没关系


mvc代码组织的一种，分成三大块


比如说我们把笔记本用MVC的思想进行拆分：
cpu c控制器
硬盘 数据模型
显示器 视图


mvc只是把代码简单的分成三大块
流程：
1、控制器通过ajax从后台拿到数据(数据模型)
2、控制器负责把数据渲染到页面上(视图)






但是我们在写代码的时候会发现我们操作DOM比较麻烦，所以，为了更进一步的简化我们的代码，我们会考虑把代码拆分得更细一点，同时，构造出来一个viewModel,这个viewModel和视图是一一对应对应的映射关系，
流程：
1、控制器负责从后台拿到数据(model)
2、控制器把数据转换成viewModel(也就是用来和视图进行一一对应的数据)




只要我们做完了这二步即可，我们不用考虑怎么把数据渲染到页面上面，因为框架会自动帮助我们把viewModel(也就是$scope)中的东西和视图进行一一对应


记住下面的结论：
1、基本上所有的前端用的是 --> mvvm：双向数据绑定就意味着用了MVVM
2、基本上所有的后端框架用的是 --> mvc
3、双向数据绑定意味着MVVM
4、angular用的是MVVM，而不是MVC






## 按按文件类型、按功能进行划分代码
按文件类型划分
按功能划分


tab
lunbo


按功能划分更好一点
项目比较简单


按功能进行划分


三种：
传统方式
面向对象


最后一种方式








4种
1.2.x
面向对象的方式
安全的方式






<div ng-class='{a:true}' class="b">


ng-class
1. 不止限于ng-repeat
2. <div class="a b">
3. 只要看到样式在变，就应该想到用ng-class


## 和ng-class类似的东西
- <a href="{{myUrl}}"> -->　ng-href
- <img src="{{myImgSrc}}"> --> ng-src