前端三大框架之一 Angular.js

一直说要给大家整理一下Angular的小方法,今天正好有空就给大家来分享下
Angular.js:

官方网站:www.angularjs.org

*** 在用Angular时，只盯住"数据" ***

Angular和原生js数据在一般情况下不互通

angular两个概念：
    1.双向绑定
        数据->页面      数据一变，页面就跟着变
        页面->数据      页面变了，数据也会跟着变
    2.依赖注入
        JS的函数：参数由调用决定的(定义没用)
        ng的函数：参数由定义决定的

ng-指令:
    ng-model        绑定数据源;
    ng-init         初始值;
    ng-app          引用模块    (必须有)
    ng-controller   引用控制器
    ng-repeat       循环     (ng-repeat循环出来的元素的事件，不能直接赋值，可以套个函数)
    ng-click        点击事件 (想用什么事件去除on在前面在上ng-)
    ng-bind         数据绑定 (不太好用,会覆盖原有的内容)   可用{{xxx}} 模板输出
    ng-show         显示
    ng-hide         隐藏
    ng-src          如果不加ng-也可以出现效果,会报错404
    ng-href         引用数据
    ng-class        需要放数组[className,className]
    ng-style        需要放json{width:200px,height:200px}
    ng-clack        防止页面加载过慢时出现模板输出{{xxx}}样式


Angular模块:
    angular.module('模板名字', [依赖模板])
        .controller('控制器名字', function (依赖项){            //定义控制器
            Code---------------
        })
        .filter('过滤器名字', function (){                     //定义过滤器
            return function (input, ){
                return 结果;
            };
        })
        .service(名字, function (){                           //定义服务
            Code--------------
        })
        .directive('名字',function (){                        //定义指令
            return {
                restrict: '类型', //ECMA
                template: '直接写模板',
                templateUrl: '模板地址',
                transclude: true/false,         //嵌入原内容
                replace:true/false              //
            };
        })
    });


Angular依赖项:
    $scope              
    $http               Angular中的交互
        $http.get
        $http.post
        $http.jonsp
    $interval           Angular中的定时器
    $timeout            Angular中的定时器

controller:         //控制器
    继承
        父controller里定义的东西，子controller能用
    通信
        父子级controller——特别简单，共享$scope
        无关的controller——麻烦，方法：自定义依赖

filter:             //过滤器
    {{数据|filter:"参数"}}      //输出模板的样式
       ↑            ↑
     input         arg
    
    angular.module('名称',[]).filter('过滤器名称',function(){
        return function(){
            return 返回展示的数据;
        }
    })
directive:
    directive中的ECMA
        1.元素型   自定义元素(标签)       //Element;
            
                
                
                
            
        
        2.class型                       //Class;

        3.属性型   自定义属性            //Attribute;
            
                
                
            

        
        4.注释型                        //Comment;

    directive中的嵌套:
        把原有的内容嵌入进来

        1.transclude: true             //当需要嵌入原有内容时在函数中添加;
        2.占位符
            标签      xxxxxx
                    xxx内容xxx

            直接用     xxxxxx
                    xxx内容xxx

自定义依赖(通信)
    route
        App、网页：状态

Angualr中的$http:
    $http.get
        ===GET方式===
        两种写法：
        1.字符串模板
        $http.get(`xxx?asf=sdf`).then(Fn);

        2.params传参
        $http.get('url', {params: {xxx},responseType:'json'}).then(Fn,Fn);  //需要加data
        $http.get('url', {params: {xxx},responseType:'json'}).success(Fn).error(Fn);  //直接使用
    $http.post
        ===POST方式===
        根据http协议的规定
        GET方式：1种编码方式    urlencoded编码
            weibo.php?a=12&b=5

        POST方式：3种编码方式
            Content-Type:application/x-www-form-urlencoded

            1.把angular默认content-type改了
                改成服务器认识的urlencoded编码

            2.把angular默认转码的函数改了
                {params: {a: 12, b: 5}} =>  '{"params": {"a": 12, "b": 5}}'  //标准的json;
                {params: {a: 12, b: 5}} =>  'a=12&b=5';         //转为服务器能识别的样式;

        如何修改:

            Angular.module('',[])
            .config(['$httpProvider', ($httpProvider)=>{
                //1.把angular默认content-type改了
                $httpProvider.defaults.headers.post['content-type']='application/x-ww...'

                //2.把angular默认转码的函数改了
                $httpProvider.defaults.transformRequest=function (data){
                    data=>{params: {}}

                    data.params => 'a=12&b=5'

                    return str;
                };
            }])
            .controller('',function (){
                //Code
            })

    $http.jonsp
        如何使用:
            Angular.module('', [])
                .controller('', ($scope, $http)=>{
                    $scope.wd='';
                    var url='自己找一个jsonp接口';

                    //当wd数据变化时
                    $scope.s=[];
                    $scope.$watch('wd', ()=>{
                        $http.jsonp(url, {params: {
                            wd: $scope.wd, cb: 'JSON_CALLBACK'
                        }}).then((res)=>{
                            $scope.s=res.data.s;
                        }, ()=>{
                        alert('失败');
                        });
                    });
                });

        *注:因Angular版本修改会导致无法使用建议使用低版本;

喜欢的帮我点击下哦,我还会更新一些常用的小方法哦!