(17.06.12)MVC、库和框架的区别、AngularJS、Angular提供的方法、angular的核心、Directive、Controller、Filter、交互

MVC    后台

   M       Module          数据层
   V       View            视图层
   C       Controller      控制层

前端开始用MVC

    M       数据层         交互
    V       视图层         DOM操作
    C       控制层         逻辑

不用原生写MVC
    1.不是所有人都懂MVC，用人需求变高。
    2.风格不统一

---

库和框架的区别?

    库           辅助程序员开发         JQuery
    框架      限制程序员开发         Angular

---

AngularJS
    MVVM的框架

    Angular火。有人在推，Google

    用的人少了，自己作。更新。
        主版本.次版本.修订号

        1.2.x           
            玩法直接变了
        1.3.x               
                javascript  
        2.x
                TypeScript

    本质还是MVC，只不过衍生出很多叫法
        MVC
        MVVM
        MVP
        MV*

---

    面向过程
    面向对象
    面向数据

    致力于解决所有交互所带来的痛苦。
        只需要关心数据就行。

---

    官网:https://angularjs.org/
    下载:https://code.angularjs.org/
    文档:https://code.angularjs.org/1.5.8/docs/api

---

Function        Angular提供的方法

    angular.bind            矫正this

    angular.bootstrap       开启angular应用

    angular.copy            复制对象

    angular.element         小jquery

    angular.equals          比较是否相等

    angular.forEach         迭代

    angular.fromJson

    angular.isArray         检测是否是数组

    angular.module          angular模块

---

    玩的就是数据——数据就是一切

        ng-app          哪是angular管的
            一个页面只能加一个
        ng-model        数据源
        ng-bind         数据绑定

        ng-bind平时用的少。
        用:{{}}

angular的核心:
    依赖注入、双向绑定

---

Directive    指令

    ng-app
    ng-model
    ng-bind
    ng-init         初始化
    ng-click        点击
    ng-repeat       迭代
        {{$index}}      索引
        {{$first}}      是否是第一行
        {{$last}}       是否是最后一样
        {{$even}}       是否是奇数行
        {{$odd}}        是否是偶数行

    数组有重复会有问题：
        原因：默认把值当成索引了。
    解决：
        ng-repeat="item in arr track by $index"

    ng-show         显示
    ng-hide         隐藏
    ng-if           如果是真的就显示，否则就已隐藏

    ng-controller   控制器

    环境:
        原生环境
        NG环境

---

Controller        控制器

    let app = angular.module('名字',[依赖]);

    app.controller('控制名字',($scope)=>{
        $scope      当前控制器的域
    });

---

Filter        过滤器

    {{item.price|currency}}
    currency            货币
        {{item.price|currency:'¥'}}
    date                日期

    filter              过滤器

    limitTo             限制数量

    number              1004354548

---

Angular的问题
    数据变了，但是DOM没有渲染
    解决:
        脏检查

---

Service         服务
    $interval      定时器
    $timeout      定时器

---

交互

    $http服务

    GET
        $http.get('url',{
            params:{
                参数
            }
        }).then((res)=>{
            res.data            数据
        },(err)=>{

        });
    POST
        $http({
            method:'POST',
            url:'',
            data:{
                参数
            },
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            transformRequest:function(data){
                var arr = [];
                for(var key in data){
                    arr.push(key+'='+data[key]);
                }
                return arr.join('&');
            }
        }).then((res)=>{
            res.data            数据
        },(err)=>{

        });