From 3b1e76b03c823fe17e81a4f68c66647b42e98897 Mon Sep 17 00:00:00 2001 From: Zack Yang Date: Fri, 6 May 2016 22:58:41 +0800 Subject: [PATCH] fix(refactor): refactor to use angular component system --- app/sanji-window/index.js | 8 ++--- .../sanji-window-loading.tpl.html | 3 +- .../sanji-window-state.component.js | 16 +++++++++ .../sanji-window-state.controller.js | 12 ++++--- .../sanji-window-state.directive.js | 34 ------------------- app/sanji-window/sanji-window.component.js | 12 +++++++ app/sanji-window/sanji-window.controller.js | 14 +++++--- app/sanji-window/sanji-window.directive.js | 29 ---------------- app/sanji-window/sanji-window.tpl.html | 11 +++--- package.json | 10 +++--- 10 files changed, 62 insertions(+), 87 deletions(-) create mode 100644 app/sanji-window/sanji-window-state.component.js delete mode 100644 app/sanji-window/sanji-window-state.directive.js create mode 100644 app/sanji-window/sanji-window.component.js delete mode 100644 app/sanji-window/sanji-window.directive.js diff --git a/app/sanji-window/index.js b/app/sanji-window/index.js index 51718a3..9dc9314 100644 --- a/app/sanji-window/index.js +++ b/app/sanji-window/index.js @@ -9,13 +9,13 @@ import './sanji-window-loading.tpl.html'; import SanjiWindowService from './sanji-window.service'; import SanjiWindowController from './sanji-window.controller'; import SanjiWindowStateController from './sanji-window-state.controller'; -import SanjiWindowDirective from './sanji-window.directive'; -import SanjiWindowStateDirective from './sanji-window-state.directive'; +import SanjiWindowComponent from './sanji-window.component'; +import SanjiWindowStateComponent from './sanji-window-state.component'; let app = angular.module('sanji.window', [ngMaterial, ngMdIcons, 'cgBusy']); app.factory('sanjiWindowService', SanjiWindowService.factory); app.controller('SanjiWindowController', SanjiWindowController); app.controller('SanjiWindowStateController', SanjiWindowStateController); -app.directive('sanjiWindow', SanjiWindowDirective.directiveFactory); -app.directive('sanjiWindowState', SanjiWindowStateDirective.directiveFactory); +app.component('sanjiWindow', SanjiWindowComponent); +app.component('sanjiWindowState', SanjiWindowStateComponent); export default app = app.name diff --git a/app/sanji-window/sanji-window-loading.tpl.html b/app/sanji-window/sanji-window-loading.tpl.html index 1fc6e43..5741bfe 100644 --- a/app/sanji-window/sanji-window-loading.tpl.html +++ b/app/sanji-window/sanji-window-loading.tpl.html @@ -1,5 +1,6 @@ diff --git a/app/sanji-window/sanji-window-state.component.js b/app/sanji-window/sanji-window-state.component.js new file mode 100644 index 0000000..0ed5b8f --- /dev/null +++ b/app/sanji-window/sanji-window-state.component.js @@ -0,0 +1,16 @@ +const SanjiWindowStateComponent = { + transclude: true, + require: { + parent: '^sanjiWindow' + }, + bindings: { + defaultState: '@', + stateName: '@', + linkName: '@', + icon: '@' + }, + template: `
`, + controller: 'SanjiWindowStateController', + controllerAs: 'vm' +}; +export default SanjiWindowStateComponent; diff --git a/app/sanji-window/sanji-window-state.controller.js b/app/sanji-window/sanji-window-state.controller.js index 3d0bf27..a5f34d3 100644 --- a/app/sanji-window/sanji-window-state.controller.js +++ b/app/sanji-window/sanji-window-state.controller.js @@ -1,17 +1,19 @@ -const $inject = ['$log', '$scope']; +const $inject = []; class SanjiWindowStateController { constructor(...injects) { SanjiWindowStateController.$inject.forEach((item, index) => this[item] = injects[index]); + this.sanjiWindowMgr = null; } - init(topCtrl, attrs) { - this.sanjiWindowMgr = topCtrl.sanjiWindowMgr; + $onInit() { + this.sanjiWindowMgr = this.parent.sanjiWindowMgr; + console.log(this.sanjiWindowMgr); if (undefined !== this.stateName) { - topCtrl.register({ + this.parent.register({ name: this.stateName, linkName: this.linkName, icon: this.icon, - isDefault: undefined !== attrs.defaultState ? true : false + isDefault: undefined !== this.defaultState ? true : false }); } } diff --git a/app/sanji-window/sanji-window-state.directive.js b/app/sanji-window/sanji-window-state.directive.js deleted file mode 100644 index a2a971f..0000000 --- a/app/sanji-window/sanji-window-state.directive.js +++ /dev/null @@ -1,34 +0,0 @@ -const injectMap = new WeakMap(); -const $inject = []; -class SanjiWindowStateDirective { - constructor(injects) { - SanjiWindowStateDirective.directiveFactory.$inject.forEach((item, index) => { - SanjiWindowStateDirective[item] = injects[index]; - injectMap.set(SanjiWindowStateDirective[item], injects[index]); - }); - this.restrict = 'EA'; - this.replace = true; - this.transclude = true; - this.scope = {}; - this.require = ['sanjiWindowState', '^sanjiWindow']; - this.controller = 'SanjiWindowStateController'; - this.controllerAs = 'vm'; - this.bindToController = { - stateName: '@', - linkName: '@', - icon: '@' - }; - this.template = `
`; - } - - link(scope, element, attrs, ctrl, transclude) { - ctrl[0].init(ctrl[1], attrs); - } - - static directiveFactory(...injects) { - SanjiWindowStateDirective.instance = new SanjiWindowStateDirective(injects); - return SanjiWindowStateDirective.instance; - } -} -SanjiWindowStateDirective.directiveFactory.$inject = $inject; -export default SanjiWindowStateDirective; diff --git a/app/sanji-window/sanji-window.component.js b/app/sanji-window/sanji-window.component.js new file mode 100644 index 0000000..59738f2 --- /dev/null +++ b/app/sanji-window/sanji-window.component.js @@ -0,0 +1,12 @@ +const SanjiWindowComponent = { + transclude: true, + bindings: { + windowId: '@', + windowName: '@', + showLoadingBtn: '@' + }, + templateUrl: 'sanji-window.tpl.html', + controller: 'SanjiWindowController', + controllerAs: 'vm' +}; +export default SanjiWindowComponent; diff --git a/app/sanji-window/sanji-window.controller.js b/app/sanji-window/sanji-window.controller.js index 53a9fd1..fd49260 100644 --- a/app/sanji-window/sanji-window.controller.js +++ b/app/sanji-window/sanji-window.controller.js @@ -3,10 +3,11 @@ class SanjiWindowController { constructor(...injects) { SanjiWindowController.$inject.forEach((item, index) => this[item] = injects[index]); this.sanjiWindowMgr = this.sanjiWindowService.create(this.windowId, {name: this.windowName}); - this.$scope.$on('$destroy', () => { - this.sanjiWindowMgr.clearStates(); - this.sanjiWindowService.destroy(this.sanjiWindowMgr.getId()); - }); + } + + $onDestroy() { + this.sanjiWindowMgr.clearStates(); + this.sanjiWindowService.destroy(this.sanjiWindowMgr.getId()); } register(state) { @@ -18,7 +19,10 @@ class SanjiWindowController { } refresh() { - this.$rootScope.$broadcast('sj:window:refresh', {id: this.windowId, promise: this.sanjiWindowMgr.promise}); + this.$rootScope.$broadcast('sj:window:refresh', { + id: this.windowId, + promise: this.sanjiWindowMgr.promise + }); } } SanjiWindowController.$inject = $inject; diff --git a/app/sanji-window/sanji-window.directive.js b/app/sanji-window/sanji-window.directive.js deleted file mode 100644 index 2013cdf..0000000 --- a/app/sanji-window/sanji-window.directive.js +++ /dev/null @@ -1,29 +0,0 @@ -const injectMap = new WeakMap(); -const $inject = ['$log']; -class SanjiWindowDirective { - constructor(injects) { - SanjiWindowDirective.directiveFactory.$inject.forEach((item, index) => { - SanjiWindowDirective[item] = injects[index]; - injectMap.set(SanjiWindowDirective[item], injects[index]); - }); - this.templateUrl = 'sanji-window.tpl.html'; - this.restrict = 'EA'; - this.replace = true; - this.transclude = true; - this.scope = {}; - this.controller = 'SanjiWindowController'; - this.controllerAs = 'vm'; - this.bindToController = { - windowId: '@', - windowName: '@', - showLoadingBtn: '@' - }; - } - - static directiveFactory(...injects) { - SanjiWindowDirective.instance = new SanjiWindowDirective(injects); - return SanjiWindowDirective.instance; - } -} -SanjiWindowDirective.directiveFactory.$inject = $inject; -export default SanjiWindowDirective; diff --git a/app/sanji-window/sanji-window.tpl.html b/app/sanji-window/sanji-window.tpl.html index ede7fb0..27f70cf 100644 --- a/app/sanji-window/sanji-window.tpl.html +++ b/app/sanji-window/sanji-window.tpl.html @@ -2,13 +2,16 @@ -

{{vm.windowName}}

+

- + - - + + diff --git a/package.json b/package.json index 719278b..a2f7ded 100644 --- a/package.json +++ b/package.json @@ -31,18 +31,18 @@ "babel-loader": "~5.3.3", "babel-runtime": "~5.8.34", "codecov.io": "~0.1.6", - "commitizen": "~2.7.2", + "commitizen": "~2.8.0", "css-loader": "~0.23.0", "cz-conventional-changelog": "~1.1.5", "eslint": "~1.10.3", "eslint-loader": "~1.2.1", "extract-text-webpack-plugin": "~1.0.1", "file-loader": "~0.8.5", - "ghooks": "~1.0.3", + "ghooks": "~1.2.0", "html-webpack-plugin": "~1.7.0", "karma": "~0.13.15", "karma-coverage": "~0.5.3", - "karma-mocha": "~0.2.1", + "karma-mocha": "~1.0.0", "karma-mocha-reporter": "~2.0.0", "karma-phantomjs-launcher": "~1.0.0", "karma-sinon-chai": "~1.2.0", @@ -52,7 +52,7 @@ "ng-cache-loader": "0.0.15", "node-bourbon": "~4.2.3", "node-libs-browser": "~1.0.0", - "node-sass": "~3.4.2", + "node-sass": "~3.7.0", "phantomjs": "~2.1.3", "publish-latest": "~1.1.2", "raw-loader": "~0.5.1", @@ -60,7 +60,7 @@ "semantic-release": "^4.3.5", "style-loader": "~0.13.0", "url-loader": "~0.5.7", - "webpack": "~1.12.9", + "webpack": "~1.13.0", "webpack-dev-server": "~1.14.0", "webpack-notifier": "~1.3.0" },