Home > Developer > JavaScript
Angularjs integrated UI (weui) and angularjsweui
Introduction
Not long ago, I launched my own UI. I think many developers have applied it to some front-end frameworks, such as react and vue. I have recently learned Angularjs, so I also want to integrate this UI into this framework. I have tried it over the past few days and have simply applied a function. Now I want to share it with you, separation is not good, please give advice.
Suitable for readers
Have a certain degree of Angularjs basics, and understand ngRoute and ngAnimate audiences.
Include files
During integration, I also made a demo Page Referring to the official demo page, which was completely done using Angularjs without referencing other frameworks. The following describes the introduced file.
At first, I wanted to create a single page like the official demo page. After development, I found that it was messy to put all the content in a file. Therefore, I used the routing function of Angularjs, separate small functions into pages and load them as needed. The template loading function is used here. Therefore, the code on the navigation page is very clean. If you want to use the functional code, you can directly use the corresponding html page and js script file, which is convenient and fast.
The Code on the navigation page is as follows:
<!DOCTYPE html>Most of the above Code comes from the official homepage code. Because Angularjs is used, corresponding attributes are added, including ngApp, ngController, ngClick, ngIf, and ngView on the demonstration page of the display function.
In the code, ngClick uses the showBlock function. The parameter is the function string of the current click. The function parameter is not used after the routing function is used, this function only adds the code for hiding and displaying the navigation section and the function demonstration section. For more information, see the following script code.
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 functional code to be implemented by the function. The variables homeShow and viewShow are respectively controlled to display and hide the navigation and function demonstration sections.
.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 displayed in the navigation section. The navigation part is initialized to absolute positioning, so that it will first perform an animation to remove the display area from the left and fade away before it disappears. After viewing the function demonstration, go back to the navigation and reverse the animation. The ngAnimate $ animateCss service is used here, And the enter event and remove event leave provided by this service are used. Other animation functions 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 a routing service, which corresponds to the href attribute of the tag in html. Therefore, the showBlock function parameter is not used in this program and is no longer useful, this function is only created to increase the dynamic effect.
Next, let's take a look at the page code in the function demonstration section.
<Div class = "page"> <div class = "hd">
This is the demo Page code for loading the wait prompt function. There are two styles in total: one is to display the text; the other is to load the wait animation and display the prompt text.
There are two buttons on the page. The function is to call out the two styles respectively. After each style is called out, it will automatically disappear after three seconds.
In the js on the navigation page, a controller and an animation function call the functions in the script code on this function page, namely, the controller function toast () and the animation function toastAnimate (). The script file code 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) ;}// display and hide the animation. Use the $ animateCss service 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 });}}}At this point, navigation and a function demonstration page have been implemented. Because most of the UIS are static and not dynamic, you only need to copy the official demonstration. You need to add dynamic code. Now you only need this one, and it will be added later.
Code Open Source Address
The Code has been uploaded to github. If you are interested, you can click to view the Code. The Code is also uploaded to your server. The link address is included in the description. You can click to view the effect.
Since the project was just established, many things are not perfect, and there are still many unsatisfactory places, please forgive me. Hope you can get your help and corrections.
Project address: https://github.com/limeng0403/Angularjs-weui
Articles you may be interested in:
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
