不久前，微信推出了自己的一套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 content="width=device-width,initial-scale=1,user-scalable=0"> <title>WeUI</title> <link href="https://www.jb51.net/article/css/weui.css" /> </head> <style type="text/css"> .home, .view { position: absolute; width: 100%; left: 0; top: 0; } </style> <body ng-controller="home"> <div ng-if="homeShow"> <div> <a href="#/button" data-id="button" ng-click="showBlock('button')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_button.png" alt=""> </div> <p> Button </p> </a> <a href="#/cell" data-id="cell" ng-click="showBlock('cell')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_cell.png" alt=""> </div> <p> Cell </p> </a> <a href="#/toast" data-id="toast" ng-click="showBlock('toast')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_toast.png" alt=""> </div> <p> Toast </p> </a> <a href="javascript:;" data-id="dialog" ng-click="showBlock('dialog')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_dialog.png" alt=""> </div> <p> Dialog </p> </a> <a href="javascript:;" data-id="progress" ng-click="showBlock('progress')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_progress.png" alt=""> </div> <p> Progress </p> </a> <a href="#/msg" data-id="msg" ng-click="showBlock('msg')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_msg.png" alt=""> </div> <p> Msg </p> </a> <a href="#/article" data-id="article" ng-click="showBlock('article')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_article.png" alt=""> </div> <p> Article </p> </a> <a href="javascript:;" data-id="actionsheet" ng-click="showBlock('actionsheet')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_actionSheet.png" alt=""> </div> <p> ActionSheet </p> </a> <a href="#/icons" data-id="icons" ng-click="showBlock('icons')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_icons.png" alt=""> </div> <p> Icons </p> </a> <a href="#/panel" data-id="panel" ng-click="showBlock('panel')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_panel.png" alt=""> </div> <p> Panel </p> </a> <a href="javascript:;" data-id="tab" ng-click="showBlock('tab')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_tab.png" alt=""> </div> <p> Tab </p> </a> <a href="#/searchbar" data-id="searchbar" ng-click="showBlock('searchbar')"> <div> <img src="https://www.jb51.net/article/images/icon_nav_search_bar.png" alt=""> </div> <p> SearchBar </p> </a> </div> </div> <div ng-view ng-if="viewShow"></div> <script type="text/javascript" src="https://www.jb51.net/article/js/angular.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/js/angular-animate.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/js/angular-route.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/js/toast.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/js/example.js"></script> </body> </html>
以上代码大部分来自官方的首页代码，由于要使用Angularjs，所以增加了相应的属性，包括ngApp,ngController,ngClick,ngIf以及显示功能演示页面的ngView。