Angularjs integrates WeChat UI (weui)

This article recommends the use of angularjs to integrate all the processes of the new UI (weui, if you have the same requirements, refer to the whole process of integrating the new UI (weui) using angularjs. If you have the same requirements, refer

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.

1. Use angular. min. js 1.4.9

2. Angular-route.min.js 1.4.9

3. Angular-animate.min.js 1.4.9

4. Use weui.min.css 0.4.0
   

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:

  
   
   WeUI  
   
    
              
                  
        
Button
                    
                  
        
Cell
                    
                  
        
Toast
                    
                 
        
Dialog
                    
                  
        
SS
                    
                  
        
Msg
                    
                  
        
Article
                    
                  
        
ActionSheet
                    
                  
        
Icons
                    
                  
        
Panel
                    
                  
        
Tab
                    
                  
        
SearchBar