本文主要包含Angularjs整合微信UI（weui）等相关知识,大猛 希望在学习及工作中可以帮助到您
引子
不久前，微信推出了自己的一套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>
</div>
以上代码大部分来自官方的首页代码，由于要使用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('.