AngularJS學習日記（一）MVC

KIM曉峰發表於2018-11-26
AngularJSMVC
在東方海外開始AngularJS的實習，從這一篇開始，記錄一些學習的心得。

學習的第一個模組AG的MVC結構（model view control），AG的核心就是模組化和複用。

MVC示意圖

        檢視                                檢視
                        service
            
                控制器              控制器
                
                        資料模型
                        
而這其中都是通過$scope來進行實現。

其實AG就是講前端一些業務邏輯分解成一個個module，我最近個人的理解就是其實一個網頁，一個JS就是一個module，然後一個模組（譬如一個form，一個按鈕）就各自寫一個controller，可以說是各執其職。

在學習中，我聽到視訊裡面說到controller有幾個很重要的點：
    1.不要複用controll
    2.不要再controller中操作DOM（其實我對DOM還不是很理解，可能會專門開一篇試試學學一下DOM）
    3.不要資料格式化，有專門的AG表單控制元件
    4.不做過濾，AG已經有封裝好的過濾器 $filter
    5.不互相呼叫controller，強耦合
    
$scope是一個簡單的pojo類，他就是當前controller的一個類似儲存器一樣的東西，他可以呼叫這個節點內你定義的方法和屬性，這其中還有一個$rootscope節點，類似於樹狀圖的最頂端，如果在$scope內查詢不到想要的東西，他就會往上一個$scope查詢。在除錯中，還可以用這個語句來除錯$scope中的各個屬性的值：angular.element($0).scope()

路由，模組，依賴注入：
    其實就類似於spring的依賴注入。（理解還不是很透徹，待補充。）

雙向資料繫結：  
    就是當你在前臺頁面，用ng-model繫結了資料，當被繫結的資料進行了修改時，會觸發一個髒檢查，是資料及時更新，是一
很酷炫的功能。在學習中，寫了一些Demo，能夠利用雙向資料繫結，除了可以及時顯示被修改的資料外，也能對css做出修改。
還學習AG中兩個比較常用的標籤ng-class和ng-show。
    其實ng-class跟利用雙向資料繫結來修css是差不多的，只是可以利用AG封裝好的，就功能更為強大。
複製程式碼
<style>
    .error{
        background-color: #ff0000;
    }
    .warning{
        background-color: #00ff00;
    }
</style>
<body>
<div ng-controller="HeaderCtrl">
    <p ng-class="{error:isError,warning:isWarning}">{{messageText}}</p>
    <button class="btn btn-default" ng-click="showError()">Simulate Error</button>
    <button class="btn btn-default" ng-click="showWarning()">Simulate Warning</button>
</div>
</body>
複製程式碼
angular.module('NgClassModule',[])

    .controller('HeaderCtrl',['$scope',function ($scope) {

        $scope.isError = false;
        $scope.isWarning = false;

        $scope.showError = function () {
            $scope.messageText = 'This is an error',
            $scope.isError=true;
            $scope.isWarning = false;
        };

        $scope.showWarning = function () {
            $scope.messageText = 'Just a warning, Please carry on.';
            $scope.isWarning = true;
            $scope.isError =false;
        }
    }])
複製程式碼
ng-show讓我個人理解來說相當於一個開關按鈕：對一個狀態進行判斷，然後進行顯示和隱藏。
複製程式碼
<style>
    .error{
        background-color: #ff0000;
    }
    .warning{
        background-color: #00ff00;
    }
</style>
<body>
<div ng-controller="DeathrayMenuCtrl">
    <button ng-click="toggleMenu()">Toggle Menu</button>
    <ul ng-show="menuState.show">
        <li ng-click="stun()">stun</li>
        <li ng-click="disintegrate()">Disintegrate</li>
        <li ng-click="erase()">Erase from history</li>
    </ul>
</div>
複製程式碼
angular.module('NgshowModule',[])

    .controller('DeathrayMenuCtrl',['$scope',function ($scope) {

        $scope.menuState = {
            show:false
        }

        $scope.toggleMenu = function () {
            $scope.menuState.show = !$scope.menuState.show;
        }
    }])
複製程式碼
大致如此，第一次總結才發現其實自己也有許多遺漏，具體程式碼已經上傳gitlab：https://gitlab.com/KIMFANG/angularjsdemo







跟狗子一起努力。
複製程式碼

相關文章