angular 動態組件類型

出處：https://github.com/Penggggg/angular-component-practices

組件類型1：純函數功能，而沒有視圖部分，即Factory(相似於$http)

• promise.component.html
• 常見的有內置的$http，$q之類的。通常使用promise與做用域進行交互

組件類型2：不是常駐於視圖，而是動態插入的、有UI的一類組件，有輸入交互、不常被調用(相似於Model對話框)

• factory.component.html
• 併發性。這裏收到es6的啓發。在factory內使用了構造函數，來區分不一樣的實例。固然，factory接口返回的類型要根據需求來定：僅僅是一個promise?仍是返回一整個組件的實例
• 數據驅動。factory內部我使用了this.scope = $rootScope.$new()。並把每一個實例的模板和做用域進行綁定$compile(html())(scope)。感謝毛總，這招真是方便。咱們可以真正使用到angular的精髓：用數據來驅動咱們的視圖了
• 交互。該demo由於須要與用戶進行交互，所以返回了一個promise給調用者。固然實際要看狀況。
• 做用域。因爲該組件並不經常須要被調用，所以一旦組件'close'(從視圖上消失)，就scope.$destroy()、instance.remove()

組件類型3：不常駐於視圖，但會被常常調用，並且是動態插入的、無輸入交互、有UI的一類組件(相似於popover)

• factory.component2.html
• 對比。與上類型組件對比，該類組件更容易被調用(相似於微信右上角的popover)
• 併發性。要求更高，稍複雜。所以返回組件的實例，讓開發者可用調用組件內部的方法(open/close/...)。同時，鑑於需求特殊性，在open()方法處我傳入了$event做爲UI參數
• 做用域。因爲是隱藏地常駐與視圖，所以只當路由切換時才註銷實例。scope.$watch('$stateChangeSuccess', function(){scope.destroy()})
• 組件實例。賦值給做用域的變量 $scope.instance = Mypop.init()

組件類型4：實例之間存在某種關係、不常駐於視圖，動態插入、只有視覺交互、有UI的一類組件(相似於ant design的Notification)

• factory.component.3.html
• 對比。與上類組件對比，組件的每一個實例之間須要存在某種隊列關係，具體操做方法請參考上面的例子。
• 實例關係。如何維護實例之間的關係？筆者比較笨的方法是開啓另外一個factory實例，存放一個實例數據，來維護實例之間的關係var _sl = scope.list = []。而後該factory具有操做實例隊列的一些方法 _sl.push(token)或者 _sl.shift()。同時每一個實例都會監聽這個實例隊列 _s.$watchCollection('instanceList', function(){...})