前端学习(三十七）angular（笔记）

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)=>{

});

---------------------------------------------------

Angular
    优势是做SPA

spa         单页应用
==================================================
controller         通信
    父子级通信

子级给父级发送数据
        发送
            $scope.$emit('名字',值);

父级给子级发送数据
        发送
            $scope.$broadcast('名字',值);

接收
        $scope.$on('名字',function(ev,data){
            data
        });

===============================================
jsonp
    https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su

================================================
    filter                 过滤器
        
        自定义过滤器
        app.filter('过滤器名字',function(){
            return function(input){
                操作input的值。
                return 值;
            };
        });

capitalizes         首字母大写

getCnDay             获取中文星期

trim                 去除首尾空格
==================================================
    自定义指令
        directive

app.directive('名字',function(){
            return {
                link:function(scope,ele,attr){

}
            };
        });

===================================================
深入Controller
    传统写法不能压缩，因为angular核心是依赖注入

app.controller('main',['$scope','$http',function(scope,http){

}]);

controller的另一种写法
    var app = angular.module('app',[],function($controllerProvider){
        $controllerProvider.register('控制器名字',function($scope){

});
    });

filter的另一种写法
    var app = angular.module('app',[],function($controllerProvider,$filterProvider){
        $filterProvider.register('名字',function(){
            return function(input,param){

};
        });
        $controllerProvider.register('控制器名字',function($scope){

});
    });

directive另一种写法
    var app = angular.module('app',[],function($controllerProvider,$filterProvider,$compileProvider){

$compileProvider.directive('名字',function(){
            return {
                link(scope,ele,attr){

}
            };
        });

$filterProvider.register('名字',function(){
            return function(input,param){

};
        });
        $controllerProvider.register('控制器名字',function($scope){

});
    });
==============================================