(17.06.12)MVC、庫和框架的區(qū)別、AngularJS、Angular提供的方法、angular的核心、Directive、Controller、Filter、交互

MVC????后臺

   M       Module          數(shù)據(jù)層
   V       View            視圖層
   C       Controller      控制層

前端開始用MVC

    M       數(shù)據(jù)層         交互
    V       視圖層         DOM操作
    C       控制層         邏輯

不用原生寫MVC
????1.不是所有人都懂MVC,用人需求變高。
????2.風(fēng)格不統(tǒng)一


庫和框架的區(qū)別?

    庫           輔助程序員開發(fā)         JQuery
    框架      限制程序員開發(fā)         Angular

AngularJS
????MVVM的框架

????Angular火。有人在推,Google

????用的人少了,自己作。更新。
????????主版本.次版本.修訂號

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

????本質(zhì)還是MVC,只不過衍生出很多叫法
????????MVC
????????MVVM
????????MVP
????????MV*


????面向過程
????面向?qū)ο?br> ????面向數(shù)據(jù)

????致力于解決所有交互所帶來的痛苦。
????????只需要關(guān)心數(shù)據(jù)就行。


????官網(wǎng):https://angularjs.org/
????下載:https://code.angularjs.org/
????文檔:https://code.angularjs.org/1.5.8/docs/api


Function????????Angular提供的方法

    angular.bind            矯正this

    angular.bootstrap       開啟angular應(yīng)用

    angular.copy            復(fù)制對象

    angular.element         小jquery

    angular.equals          比較是否相等

    angular.forEach         迭代

    angular.fromJson

    angular.isArray         檢測是否是數(shù)組

    angular.module          angular模塊

????玩的就是數(shù)據(jù)——數(shù)據(jù)就是一切

        ng-app          哪是angular管的
            一個頁面只能加一個
        ng-model        數(shù)據(jù)源
        ng-bind         數(shù)據(jù)綁定

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

angular的核心:
????依賴注入、雙向綁定


Directive????指令

    ng-app
    ng-model
    ng-bind
    ng-init         初始化
    ng-click        點擊
    ng-repeat       迭代
        {{$index}}      索引
        {{$first}}      是否是第一行
        {{$last}}       是否是最后一樣
        {{$even}}       是否是奇數(shù)行
        {{$odd}}        是否是偶數(shù)行

????數(shù)組有重復(fù)會有問題:
????????原因:默認(rèn)把值當(dāng)成索引了。
????解決:
????????ng-repeat="item in arr track by $index"

    ng-show         顯示
    ng-hide         隱藏
    ng-if           如果是真的就顯示,否則就已隱藏

    ng-controller   控制器

????環(huán)境:
????????原生環(huán)境
????????NG環(huán)境


Controller????????控制器

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

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

Filter????????過濾器

    {{item.price|currency}}
    currency            貨幣
        {{item.price|currency:'¥'}}
    date                日期

    filter              過濾器

    limitTo             限制數(shù)量

    number              1004354548

Angular的問題
????數(shù)據(jù)變了,但是DOM沒有渲染
????解決:
????????臟檢查


Service???????? 服務(wù)
????$interval ???? 定時器
????$timeout ???? 定時器


交互

    $http服務(wù)

    GET
        $http.get('url',{
            params:{
                參數(shù)
            }
        }).then((res)=>{
            res.data            數(shù)據(jù)
        },(err)=>{

        });
    POST
        $http({
            method:'POST',
            url:'',
            data:{
                參數(shù)
            },
            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            數(shù)據(jù)
        },(err)=>{

        });
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容