引子
自从开通了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剧本文件即可，轻易、快速。
下是导航页面的代码：
<!DOCTYPE html>
<html lang="en" ng-app="weuiapp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="./css/weui.css" />
</head>
<style type="text/css">
.home,
.view {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
</style>
<body ng-controller="home">
<div class="home" ng-if="homeShow">
<div class="weui_grids">
<a href="#/button" class="weui_grid js_grid" data-id="button" ng-click="showBlock('button')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_button.png" alt="">
</div>
<p class="weui_grid_label">
Button
</p>
</a>
<a href="#/cell" class="weui_grid js_grid" data-id="cell" ng-click="showBlock('cell')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_cell.png" alt="">
</div>
<p class="weui_grid_label">
Cell
</p>
</a>
<a href="#/toast" class="weui_grid js_grid" data-id="toast" ng-click="showBlock('toast')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_toast.png" alt="">
</div>
<p class="weui_grid_label">
Toast
</p>
</a>
<a href="javascript:;" class="weui_grid js_grid" data-id="dialog" ng-click="showBlock('dialog')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_dialog.png" alt="">
</div>
<p class="weui_grid_label">
Dialog
</p>
</a>
<a href="javascript:;" class="weui_grid js_grid" data-id="progress" ng-click="showBlock('progress')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_progress.png" alt="">
</div>
<p class="weui_grid_label">
Progress
</p>
</a>
<a href="#/msg" class="weui_grid js_grid" data-id="msg" ng-click="showBlock('msg')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_msg.png" alt="">
</div>
<p class="weui_grid_label">
Msg
</p>
</a>
<a href="#/article" class="weui_grid js_grid" data-id="article" ng-click="showBlock('article')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_article.png" alt="">
</div>
<p class="weui_grid_label">
Article
</p>
</a>
<a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" ng-click="showBlock('actionsheet')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_actionSheet.png" alt="">
</div>
<p class="weui_grid_label">
ActionSheet
</p>
</a>
<a href="#/icons" class="weui_grid js_grid" data-id="icons" ng-click="showBlock('icons')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_icons.png" alt="">
</div>
<p class="weui_grid_label">
Icons
</p>
</a>
<a href="#/panel" class="weui_grid js_grid" data-id="panel" ng-click="showBlock('panel')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_panel.png" alt="">
</div>
<p class="weui_grid_label">
Panel
</p>
</a>
<a href="javascript:;" class="weui_grid js_grid" data-id="tab" ng-click="showBlock('tab')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_tab.png" alt="">
</div>
<p class="weui_grid_label">
Tab
</p>
</a>
<a href="#/searchbar" class="weui_grid js_grid" data-id="searchbar" ng-click="showBlock('searchbar')">
<div class="weui_grid_icon">
<img src="./images/icon_nav_search_bar.png" alt="">
</div>
<p class="weui_grid_label">
SearchBar
</p>
</a>
</div>
</div>
<div class="view" ng-view ng-if="viewShow"></div>
<script type="text/javascript" src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/angular-animate.min.js"></script>
<script type="text/javascript" src="./js/angular-route.min.js"></script>
<script type="text/javascript" src="./js/toast.js"></script>
<script type="text/javascript" src="./js/example.js"></script>
</body>
</html>以上代码大部份来自官方的首页代码，因为要运用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函数的参数，已没有用处了，此函数只是为了增添了动态结果而制造的。
下面，再来看看功用演示部份的页面代码。
<div class="page">
<div class="hd">
<h1 class="page_title">Toast</h1>
</div>
<div class="bd spacing">
<a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showToast()">点击弹出Toast</a>
<a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showLoadingToast()">点击弹出Loading Toast</a>
</div>
<!--BEGIN toast-->
<div id="toast" ng-if="toastHide" class="aweui-show">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui_icon_toast"></i>
<p class="weui_toast_content">已完成</p>
</div>
</div>
<!--end toast-->
<!-- loading toast -->
<div id="loadingToast" ng-if="loadingToastHide" class="weui_loading_toast aweui-show">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<div class="weui_loading">
<div class="weui_loading_leaf weui_loading_leaf_0"></div>
<div class="weui_loading_leaf weui_loading_leaf_1"></div>
<div class="weui_loading_leaf weui_loading_leaf_2"></div>
<div class="weui_loading_leaf weui_loading_leaf_3"></div>
<div class="weui_loading_leaf weui_loading_leaf_4"></div>
<div class="weui_loading_leaf weui_loading_leaf_5"></div>
<div class="weui_loading_leaf weui_loading_leaf_6"></div>
<div class="weui_loading_leaf weui_loading_leaf_7"></div>
<div class="weui_loading_leaf weui_loading_leaf_8"></div>
<div class="weui_loading_leaf weui_loading_leaf_9"></div>
<div class="weui_loading_leaf weui_loading_leaf_10"></div>
<div class="weui_loading_leaf weui_loading_leaf_11"></div>
</div>
<p class="weui_toast_content">数据加载中</p>
</div>
</div>
</div>这就是加载守候提醒功用的演示页面代码，一共两种款式，其一，显现笔墨；其二，有一个加载守候的动画而且有提醒笔墨显现。
页面有两个按钮，功用就是离别呼出这两种款式，每种款式呼出后，停止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上，感兴趣的朋侪能够点击检察，代码同时也上传到个人的效劳器上，申明中有链接地点，能够直接点击检察结果。
因为项目方才建立，许多东西没有完美，另有许多不如意的处所，请谅解。更希望能获得您的协助与斧正。
