我angularjs 1.4的應用程序也沒有使用像的WebPack常見的UI構建工具。我想介紹一些反應組件,這是我的方法。
我創建了一個文件,angularModuleOfReactComponents.js。 它進口反應的組分,然後進行一個角模塊(reactComponentsModule)拿着他們:
import MyComponent from './MyComponent.js';
import AnotherComponent from './AnotherComponent.js';
(function(){
var m = angular.module('reactComponentsModule', []);
m.value('reactMyComponent', MyComponent);
m.value('reactAnotherComponent', AnotherComponent);
})();
你應該能夠做到通過導入第三方庫類似的東西。你也可以編寫一個使用第三方庫的反應類並導入你的包裝類。
然後我使用Babel將我的jsx反應組件和我的angularModuleOfReactComponents.js轉換爲CommonJS,然後使用browserify轉換爲瀏覽器可以理解的內容。 (儘管我使用了構建工具,但它們並不涉及我的角度應用程序,而且,這不是我的永久機制,這是一個兩步過程,不允許在更改源代碼時自動重新編譯。爲概念驗證工作,我會盡快改進這一過程。)
在我的角度應用程序,我加載角的庫文件,隨即反應過來庫,然後NG-反應過來,然後我browserified angularModuleOfReactComponents.js然後我的應用程序的角碼(控制器,指令,服務等)。
要使用的反應組分,我聲明的依賴性上「反應」(由NG-反應)和「reactComponentsModule」:
var myModule = angular.module('myModule', ['react', 'reactComponentsModule']);
然後我可以注入取其成分(S)我需要:
myModule.controller('myController', ['$scope', '$log', 'reactMyComponent', function($scope, $log, reactMyComponent) {
$scope.myprops = {name:'Jack'};
}]);
在HTML中,NG-反應的反應組分指令使用,如:
<react-component name="reactMyComponent" props="myprops" watch-depth="reference" />