node-webkit 使用requirejs 小結
來自: http://www.cnblogs.com/breakdown/p/4290478.html
1. node-webkit 啟動頁使用requrejs
將webapp中的require改為requirejs,因為requirejs本來就應該用requirejs的,require只是requirejs的一個別名。
requirejs(["angular","script/app","jquery"],function(angular,app){
angular.element().ready(function(){
angular.resumeBootstrap([app["name"]]);
});
});;
2. node-webkit前端 requirejs模塊中調用node-wbkit的原生api:
nw.gui 是node-webkit native api的模塊。
引入 nw.gui 可以通過var gui = require(‘nw.gui’); || global.window.nwDispatcher.requireNwGui()兩種方法
因為nw.gui并不是nodejs 的內置的全局模塊,使用require(‘nw.gui’)方法必須在啟動頁中的script標簽中執行, 所以如果想做到在一個requrirjs的amd模塊或者node-modules下的node文件中調用nw.gui只能使用global.window.nwDispatcher.requireNwGui()(詳見 https://github.com/rogerwang/node-webkit/issues/707)
demo :調用node-webkit api 生成原生菜單 ,窗體最小化
define(function(){
var winMenuCtrl=["$scope","$element",function($scope, element){
gui=global.window.nwDispatcher.requireNwGui() ;
var win = gui.Window.get();
$scope.minimize=function(){
win.minimize();
win.on('minimize', function () {
console.log("窗口最小化")
});
} /* 窗口最小化 */
creatMenu=function(){
var menubar = new gui.Menu({ type: 'menubar' }); /*創建一級菜單*/
var sub1 = new gui.Menu(); /*創建二級菜單*/
sub1.append(new gui.MenuItem({
label: '子菜單1',
click: function() {
var element = document.createElement('div');
element.appendChild(document.createTextNode('Test 1'));
document.body.appendChild(element);
}
}));/* 向二級菜單添加menuitem */
sub1.append(new gui.MenuItem({
label: '子菜單2',
click: function() {
var element = document.createElement('div');
element.appendChild(document.createTextNode('Test 1'));
document.body.appendChild(element);
}
}));/* 向二級菜單添加menuitem */
menubar.append(new gui.MenuItem({ label: '菜單1', submenu: sub1 })); /* 向一級菜單添加menuitem。*/
var win = gui.Window.get();
win.menu = menubar; /* 將一級菜單指定問窗口菜單 */
}
creatMenu()/* 生成原生菜單 */
}]
return winMenuCtrl
})
3.node-webkit 前端requrejs 模塊中調用nodejs 模塊
解決辦法: 保存nodejs 的require方法到全局變量 (在requirejs 加載之前)
window.requireNode = window.require;
配置文件中需要添加 "node-remote": "*.test.com",
在requirejs 模塊中使用window.requireNode加載nodejs的module,之所以沒有改變requirejs
一方面node是最先加載在webview啟動之前就加載完成了, 而requiejs是頁面啟動的時候才加載。
而另一方面 為了保證web端 與客戶端代碼一直 改動最小的原則
demo :amd模塊中調用nodejs 文件系統
define(function(require){
var d3TestCtrl=["$scope","$element",function($scope, element){
var d3=require("D3")
requireNode ('fs').readdir('D:/', function (err, files) {
if (err) {
document.write(err);
} else {
for (var i = 0; i < files.length; ++i) {
var div = document.createElement('div');
div.className = "item";
var content = document.createTextNode(files[i]);
div.appendChild(content);
element[0].appendChild(div);
div.onclick = function () {
}
}
}
})
}]
return d3TestCtrl
})