Introduction
Not long ago, micro-mail introduced its own set of UI, I think a lot of developers to apply it in some front-end framework, such as react, Vue. Recently, I am learning angularjs, so, also want to integrate this UI into this framework, these days to try, simple to apply a function, now share to everyone, separation do not do, please expert advice.
For readers
Have a certain Angularjs foundation, and understand Ngroute, nganimate crowd.
Include file
Integration, referring to the official demo page, I also made a demo page, completely using angularjs do, no reference to other frameworks. Let's explain the introduction of the file.
First want to do with the official demo page to do a single page, the development of the discovery, put all the content into a file is messy, so, the use of the ANGULARJS routing function, the various small functions as a separate page, loaded in when needed. This is accomplished using the template loading feature. So, the navigation page code on the display is very clean, if you want to use which part of the function code, directly using the corresponding HTML page and JS script file can be convenient and fast.
The following is the code for the Navigation page:
<!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>
Most of the above code comes from the official home page code, because to use ANGULARJS, so added the corresponding properties, including ngapp,ngcontroller,ngclick,ngif and display the function of the Ngview presentation page.
In the code, the Showblock function is used in the Ngclick, the parameter is the currently clicked function string, the parameter of this function is not used after using the routing function, just add the code of hiding and displaying the navigation part and the function demonstration part in this function, see the following script code for details.
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;
}
This section is the function to implement the function code, respectively, control variable homeshow and viewshow to achieve navigation and function demo two parts of the display and hiding.
. 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
});
}
}])
The above is the animation effect code when the navigation section is displayed. The navigation section is initialized to absolute positioning, making it an animation that moves the left out of the display area and fades before disappearing. When you are finished viewing the feature demo, back to the navigation, animate the reverse. The Nganimate $animatecss service is used here, and the Enter event entry provided by this service is used and the event leave is removed. Other animation features are the same.
$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: '/'
})
This is the routing service, which corresponds to the a tag href attribute in HTML, so there is no use in this program for the parameters of the Showblock function, and this function is created only to increase the dynamic effect.
Next, look at the feature demo section of the page code.
<div class= "page" > <div class= "HD" >
This is the load waiting for the presentation of the demo page code, a total of two styles, one, display text; Second, there is a load waiting animation and prompted text display.
The page has two buttons, function is to exhale these two styles separately, each style exhale, stay 3 seconds after automatically disappear.
In the navigation page of JS, there is a controller and an animation function called the function page script code functions, respectively, the Controller function toast () and animation function Toastanimate (). The code for the script file is as follows.
Toast Controller
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);
}
Displays and hides the animation, using the $animatecss service
function toastanimate ($ANIMATECSS) {return
{enter in Nganimate
: function (element, Donefn) {return
$animateCss (element, {from
: {opacity:0}, to
: {opacity:1},
du Ration:. 3
});
leave:function (element, Donefn) {return
$animateCss (element, {from
: { Opacity:1}, to
: {opacity:0},
duration:. 3
});
}
}
Here, navigation and a feature demo page have been implemented. Because most of the UI is static and there is no dynamic, you just need to copy the official demo. Need to add dynamic code, now has only done this one, the follow-up will continue to increase to completion.
Code Open Source Address
Code has been uploaded to the GitHub, interested friends can click to view, the code also uploaded to the personal server, the description has a link address, you can directly click to view the effect.
As the project has just been set up, many things are not perfect, there are many unsatisfactory places, please understand. I hope to get your help and correct me.
Project Address: Https://github.com/limeng0403/Angularjs-weui
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
