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

        });
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容