摘要：控制器顯示與隱藏時的動畫，使用中的服務到此，導航和一個功能演示的頁面就已經實現了。由于大部分是靜態的，沒有動態，所以只需要將官方的演示照搬即可。更希望能得到您的幫助與指正。

自從開通了sf的文章專欄，總想在這個專欄里寫些自己的東西。不久前，微信推出了自己的一套UI，我看有很多開發者將其套用在了一些前端框架中，比如react、vue。最近自己在學習Angularjs，所以，也想把這個UI整合到這個框架，這幾天試了一下，簡單的套用了一個功能，現在分享給大家，分離做的不好，請高手指點。

有一定的Angularjs基礎，并且了解ngRoute、ngAnimate的人群。

整合的時候，參照官方的演示頁面，自己也做了一個演示頁面，完全使用Angularjs做的，沒有引用其它框架。下面先說明一下引入的文件。

使用angular.min.js 1.4.9

使用angular-route.min.js 1.4.9

使用angular-animate.min.js 1.4.9

使用weui.min.css 0.4.0

一開始想與官方的演示頁面一樣做一個單頁面的，開發之后發現，把所有內容放到一個文件里顯得雜亂，所以，使用了Angularjs的路由功能，把各個小功能獨立成頁面，在需要時加載進來。此處使用模板加載功能來實現。于是，導航頁面代碼就顯示很干凈，如果想要使用哪部分的功能代碼，直接使用相對應的html頁面及js腳本文件即可，方便、快捷。

下是導航頁面的代碼：

    
    
    
    




    

        

            
                

                    
                
                

                    Button
                
            
            
                

                    
                
                

                    Cell
                
            
            
                

                    
                
                

                    Toast
                
            
            
                

                    
                
                

                    Dialog
                
            
            
                

                    
                
                

                    Progress
                
            
            
                

                    
                
                

                    Msg
                
            
            
                

                    
                
                

                    Article
                
            
            
                

                    
                
                

                    ActionSheet
                
            
            
                

                    
                
                

                    Icons
                
            
            
                

                    
                
                

                    Panel
                
            
            
                

                    
                
                

                    Tab
                
            
            
                

                    
                
                

                    SearchBar
                
            
        
    
    

    
    
    
    
    

以上代碼大部分來自官方的首頁代碼，由于要使用Angularjs，所以增加了相應的屬性，包括ngApp,ngController,ngClick,ngIf以及顯示功能演示頁面的ngView。

代碼中，ngClick中使用了showBlock函數，參數是當前點擊的功能字符串，這個函數的參數在使用路由功能后，沒有使用，僅僅是在此函數中增加了隱藏與顯示導航部分以及功能演示部分的代碼，詳情請查看下面的腳本代碼。

angular.module("weuiapp", ["ngAnimate", "ngRoute"])
    .config(function($routeProvider) {
        $routeProvider
            .when("/", {
                controller: "home",
                templateUrl: ""
            })
            .when("/button",{
                controller: "button",
                templateUrl: "button.html"
            })
            .when("/cell", {
                controller: "cell",
                templateUrl: "cell.html"
            })
            .when("/toast", {
                controller: "toast",
                templateUrl: "toast.html"
            })
            .when("/msg", {
                controller: "msg",
                templateUrl: "msg.html"
            })
            .when("/article", {
                controller: "article",
                templateUrl: "article.html"
            })
            .when("/icons", {
                controller: "icons",
                templateUrl: "icons.html"
            })
            .when("/panel", {
                controller: "panel",
                templateUrl: "panel.html"
            })
            .otherwise({
                redirectTo: "/"
            })

    })
    .controller("home", function($scope) {
        $scope.homeShow = true;
        $scope.viewShow = false;

        $scope.showBlock = function() {
            $scope.homeShow = false;
            $scope.viewShow = true;
        }
    })
    .controller("toast", ["$scope", "$interval", toast])
    .animation(".aweui-show", ["$animateCss", toastAnimate])
    .animation(".home", ["$animateCss", function($animateCss) {
        return {
            enter: function(element, doneFn) {
                return $animateCss(element, {
                    from: { left: "100%", top: 0, opacity: 0 },
                    to: { left: 0, top: 0, opacity: 1 },
                    duration: .3
                });
            },
            leave: function(element, doneFn) {
                return $animateCss(element, {
                    from: { left: 0, top: 0, opacity: 1 },
                    to: { left: "-100%", top: 0, opacity: 0 },
                    duration: .3
                });
            }
        }
    }])
    .animation(".view", ["$animateCss", function($animateCss) {
        return {
            enter: function(element, doneFn) {
                return $animateCss(element, {
                    from: { left: "100%", top: 0, opacity: 0 },
                    to: { left: 0, top: 0, opacity: 1 },
                    duration: .3
                });
            },
            leave: function(element, doneFn) {
                return $animateCss(element, {
                    from: { left: 0, top: 0, opacity: 1 },
                    to: { left: "-100%", top: 0, opacity: 0 },
                    duration: .3
                });
            }
        }
    }])

$scope.showBlock = function() {
    $scope.homeShow = false;
    $scope.viewShow = true;
}

這一段便是函數要實現的功能代碼，分別控制變量homeShow以及viewShow來實現導航與功能演示兩部分的顯示與隱藏。

.animation(".home", ["$animateCss", function($animateCss) {
    return {
        enter: function(element, doneFn) {
            return $animateCss(element, {
                from: { left: "100%", top: 0, opacity: 0 },
                to: { left: 0, top: 0, opacity: 1 },
                duration: .3
            });
        },
        leave: function(element, doneFn) {
            return $animateCss(element, {
                from: { left: 0, top: 0, opacity: 1 },
                to: { left: "-100%", top: 0, opacity: 0 },
                duration: .3
            });
        }
    }
}])

以上是導航部分顯示時的動畫效果代碼。導航部分初始化為絕對定位，讓其在消失前先做一個向左移出顯示區域，并且漸隱的動畫。當查看完功能演示，回到導航時，進行動畫反轉。這里使用的ngAnimate的$animateCss服務，并且使用了此服務提供的進入事件enter以及移出事件leave。其它的動畫功能與其相同。

$routeProvider
    .when("/", {
        controller: "home",
        templateUrl: ""
    })
    .when("/button",{
        controller: "button",
        templateUrl: "button.html"
    })
    .when("/cell", {
        controller: "cell",
        templateUrl: "cell.html"
    })
    .when("/toast", {
        controller: "toast",
        templateUrl: "toast.html"
    })
    .when("/msg", {
        controller: "msg",
        templateUrl: "msg.html"
    })
    .when("/article", {
        controller: "article",
        templateUrl: "article.html"
    })
    .when("/icons", {
        controller: "icons",
        templateUrl: "icons.html"
    })
    .when("/panel", {
        controller: "panel",
        templateUrl: "panel.html"
    })
    .otherwise({
        redirectTo: "/"
    })

這是路由服務，對應html中的a標簽href屬性，所以，此程序中沒有使用showBlock函數的參數，已經沒有用處了，此函數只是為了增加了動態效果而創造的。

下面，再來看看功能演示部分的頁面代碼。

    

        
Toast
    
    

        點擊彈出Toast
        點擊彈出Loading Toast
    
    
    

        

        

            
            
已完成
        
    
    
    
    

        

        

            

                

                

                

                

                

                

                

                

                

                

                

                

            
            
數據加載中
        
    

這就是加載等待提示功能的演示頁面代碼，一共兩種樣式，其一，顯示文字；其二，有一個加載等待的動畫并且有提示文字顯示。

頁面有兩個按鈕，功能就是分別呼出這兩種樣式，每種樣式呼出后，停留3秒后自動消失。

在導航頁面的js中，有一個控制器和一個動畫函數調用了此功能頁面腳本代碼中的函數，分別是控制器函數toast()以及動畫函數toastAnimate()。腳本文件的代碼如下。

//toast控制器
function toast($scope, $interval) {
    $scope.toastHide = 0;
    $scope.loadingToastHide = 0;

    $scope.showToast = function() {
        $scope.toastHide = 1;

        $interval(function() {
            $scope.toastHide = 0;
        }, 3000, 1);
    }

    $scope.showLoadingToast = function() {
        $scope.loadingToastHide = 1;

        $interval(function() {
            $scope.loadingToastHide = 0;
        }, 3000, 1);
    }
}

//顯示與隱藏時的動畫，使用ngAnimate中的$animateCss服務
function toastAnimate($animateCss) {
    return {
        enter: function(element, doneFn) {
            return $animateCss(element, {
                from: { opacity: 0 },
                to: { opacity: 1 },
                duration: .3
            });
        },
        leave: function(element, doneFn) {
            return $animateCss(element, {
                from: { opacity: 1 },
                to: { opacity: 0 },
                duration: .3
            });
        }
    }
}

到此，導航和一個功能演示的頁面就已經實現了。由于大部分UI是靜態的，沒有動態，所以只需要將官方的演示照搬即可。需要增加動態代碼的，現在已只做了這一個，后續還會陸續增加至完成。

代碼已經上傳至github上，感興趣的朋友可以點擊查看，代碼同時也上傳到個人的服務器上，說明中有鏈接地址，可以直接點擊查看效果。

由于項目剛剛成立，很多東西沒有完善，還有很多不如意的地方，請諒解。更希望能得到您的幫助與指正。

項目地址：https://github.com/limeng0403/Angularjs-weui