angular Dynamic Component Types Detailed Explanation of of Four Component Types

Component Type 1: Pure function functionality with no view part, i.e. Factory (similar to $http)

promise.component.html

Common ones are built-in $http, $q and so on. Use promise to interact with scope

Component Type 2: Not resident in view, but dynamically inserted, Class 1 component with UI, input interaction, infrequently invoked (similar to Model dialog box)

factory.component.html

Concurrency. Inspired by es6 here. Constructors are used in factory to distinguish different instances. Of course, the type returned by the factory interface depends on the requirements: just one promise? Or return an instance of the entire component of 1

Data driven. Inside factory I used this. scope = $rootScope. $new (). And bind the template and scope of each instance $compile (html ()) (scope). Thanks to Mr. Mao, it's really convenient. We can really use the essence of angular: driving our views with data

Interaction. The demo returns 1 promise to the caller because it needs to interact with the user. Of course, the reality depends on the situation.

Scope. Because this component doesn't need to be called very often, 1 component 'close' (disappears from view) is scope. $destroy (), instance. remove ()

Component Type 3: Class 1 component with UI (similar to popover) that is not resident in the view, but is frequently called, dynamically inserted, has no input interaction, and has UI

factory.component2.html

Contrast. Compared with the above types of components, this kind of components are easier to call (similar to popover in the upper right corner of WeChat)
Concurrency. It is more demanding and slightly more complicated. Thus, an instance of the component is returned so that the developer can call the method inside the component (open/close/...). At the same time, I passed in $event as the UI parameter at the open () method due to the particularity of the requirements

Scope. Because it is hidden resident with view, the instance is only logged out when the route is switched. scope. $watch ('$stateChangeSuccess', function () {scope. destroy ()})

Component instance. Variable assigned to scope $scope. instance = Mypop. init ()

Component Type 4: Some relationship between instances, non-view resident, dynamic insertion, only visual interaction, Class 1 components with UI (similar to Notification for ant design)

factory.component.3.html

Contrast. Compared with the above class components, each instance of the component needs to have a certain queue relationship. Please refer to the above example for specific operation methods.

Instance relationship. How to maintain the relationship between instances? The stupid method is to open another factory instance and store one instance data to maintain the relationship between instances var _ sl = scope. list = []. The factory then has 1 method to operate the instance queue _ sl. push (token) or _ sl. shift (). At the same time, each instance listens on this instance queue _ s. $watchCollection ('instanceList', function () {...})