Some ideas on the development components of ANGULARJS

Welcome everyone to guide and discuss:)

　　First, preface

　　　　Due to the author's limited level, here are just a few ideas to share their own development components ~ Summary : No UI Component class, there is a UI component class, there is UI component type 2. Welcome to shoot Brick Spit groove O (∩_∩) o

Second, no UI component class

　　　　As the name implies, this type of component does not appear in any form in the user interface, but the general function of the implementation of, that is usually used, the need to develop the Factory. It is typically called by a controller to process and return data. The point is,fatory Some methods are best used $q (promise)to separate the business logic.

         Controller         ↓       ↑    data↓       ↑promise         ↓       ↑          Factory  

App.factory (' Hi ', [' $q ', ' $timeout ',function($q, $timeout) {functionShow (data) {varDeferred =$q. Defer (); $timeout (function(){          // ... Data processingdefer.resolve (Result)},16)       returndeferred.promise; }    return{show:function(data) {returnShow (Data)}}])

 function() {     function() {        hi.show (data)           . Then (function  (Result) {                //            }}        }])        

Third, there are UI component classes

the UI for such a component is primarily generated by the Factory interface and inserted into the body, similar to Ionic's Actionsheet menu or pop-up window. The main problems of this kind of components are as follows: How to use angular's features to display dynamic Data, templates and how to better enhance the reusability of components. Therefore, the main idea of the author is: 1. The template is stable and singleton (the generated template is saved in a property of Factory ). 2. We only need to change the content of the template with the data ($compile, $rootScope. $new ()). 3. Reusability is mainly manifested in the invocation of Factory   Its initial state must be unique (scope. $destroy/$rootScope. $new () or some other reset operation). Of course, using the $q (promise) to perform callbacks is still a good choice.

  controller↓ ↑option↓↑promise↓↑factory 
 
//Save the Singleton template in the Factory variable: 
 var a = ANGULAR.E  Lement (_html ()) 
//Every time the template function is generated 
 return a? A:angular.element (_html ()) 
//Every call to start function 
 Function Show (option) {
 var scope = $rootScope. $new ();//new scopes for managing views  Data 
 Scope.title = option.title;//config content 
 Scope.showornot = option.show//Configure dynamic Display 
 $compile (_html ()) (scope)//    Binding template and Scope 
} 
//Every time you close 
 function close (data) {
 Deferred.resolve (data); 
 Scope. $destory (); Destroy Scope 
} 
//template function 
 Function _html () {
 return [
 <div> ', 
 ' " <div ng-if= ' showornot ' ></div> "//Based on configuration, dynamic display 
" </div> "
 ].join (') 
}  

Iv. have UI component Class 2

　　　　The main difference between this type of component and the above is that the UI template is the responsibility of the Directive 's template parameter, which is the Factory tool developed by itself, and the Controller is the provider of the scope, For the next business writing based on the data. The component is then split into 3 parts.

        Directive  ↓   ↑             ↓↑      call   ↓   ↑promise     ↓↑  ↓   ↑ (data)      binding policy         for directive scope Factory              ↓↑　　
                              ↓↑
                          Next process

Some ideas on the development components of ANGULARJS