上一篇我们实现了文件的新建,保存,打开功能.
在这篇里我们将实现以下功能:
跟之前的studio模块类似,我们在modules模块下增加system目录.
比studio多了model.js文件,用来实现系统模块的一些功能.
在app.js里加载system模块
123456 | angular.module('hmd', ['ui.router','hmd.directives','hmd.studio','hmd.system'])...//引入模块hmd.regModule('studio');hmd.regModule('system');... |
路由、导航栏angular.js用得不熟,导航栏的状态根据route来切换一直不知道怎么实现比较优雅.我直接在app.js里增加了一个导航栏切换的方法,每个route的onEnter事件里自行调用这个方法.
123456 | //TODO:更优雅的导航栏切换逻辑hmd.changeStatus = function (state) { var $navList = $('#navlist'); $navList.find('li').removeClass('active'); $navList.find('.' + state).addClass('active');}; |
system/route.js
1234567891011 | hmd.system.config(function ($statePRovider, $urlRouterProvider) { $stateProvider .state('system', { url: "/system", templateUrl: "modules/system/views/system.html", controller: 'system', onEnter: function () { hmd.changeStatus('system'); } });}); |
studio/route.js
12345 | ...onEnter: function () { hmd.changeStatus('studio');}... |
然后在index.html里配置好导航
123456 | ...<ul class="nav navbar-nav" id="navlist" > <li class="studio"><a href="#/studio">编辑器</a></li> <li class="system"><a href="#/system">系统设置</a></li></ul>... |
导航栏最终效果:
每次打开文件都会被记住,下次重新启动程序时将默认打开最后一次打开的文件.
system设置的读取和保存
我们先在system/model.js实现保存和读取设置的功能.
12345678910111213141516171819202122232425262728293031323334 | var util = require('./helpers/util'), fs = require('fs'), system = hmd.system, //存储设置的文件 dataFile = system.dataPath + '//system.json';//初始化存储目录if (!fs.existsSync(system.dataPath)) { fs.mkdirSync(system.dataPath);}//默认设置var defaultSystemData = { //最后一次打开的文件 lastFile: null};//读取设置system.get = function () { return $.extend(defaultSystemData,util.readJsonSync(dataFile));};//保存设置system.save = function (data) { data = data || defaultSystemData; util.writeFileSync(dataFile, JSON.stringify(data));}; //设置最后打开的文件system.setLastFile = function (filepath) { var systemData = system.get(); systemData.lastFile = filepath; system.save(systemData);}; |
system实现了get和save方法,所有的设置都存储在一个简单的对象里,代码里并没有对这个对象做缓存,每次都是从文件里读取,因为这简单的文件还远达不到影响读取速度的情况.
然后我们修改editor的setFile方法,暴露setFiled事件给外部使用.
1234567891011121314 | //设置当前文件setFile:function(filepath){ if(filepath && fs.existsSync(filepath)){ var txt = util.readFileSync(filepath); this.filepath = filepath; this.cm.setValue(txt); this.fire('setFiled',this.filepath); } else{ this.filepath = null; this.cm.setValue(''); this.fire('setFiled'); }} |
最后修改studio/directives.js的hmdEditor,实现这个功能.
12345678910 | studio.directive('hmdEditor', function () { return function ($scope, elem) { //读取最后一次打开的文件 var systemData = hmd.system.get(); hmd.editor.init({el:elem[0]},systemData.lastFile); //保存最后一次打开的文件 hmd.editor.on('setFiled',function(filepath){ hmd.system.setLastFile(filepath); }); ... |
样式文件在目录app/lib/codemirror/theme.目录里每一个样式文件代表一种编辑器样式,还记得当初实现editor的init时,样式已经是通过配置传入的.
12345 | ...if(options.theme != 'default'){$('head').append('<link href="lib/codemirror/theme/'+options.theme+'.CSS" rel="stylesheet" />');}... |
现在我们只要把theme参数存储到配置里,并提供给用户修改就可以.
在system/model.js里的默认配置增加一个theme字段.
123456789 | ... //默认设置 var defaultSystemData = { //最后一次打开的文件 lastFile: null, //当前样式 theme:'ambiance' };... |
修改system/views/system.html模版,增加样式表单
12345678910111213 | <div class="content studio-wrap"> <form class="system-form" name="systemForm"> <div class="form-group"> <label>编辑器样式</label> <select ng-model="systemSetting.theme" name="theme"> <option value="ambiance">ambiance</option> <option value="mbo">mbo</option> <option value="neat">neat</option> </select> </div> <button type="submit" class="btn btn-default" ng-click="save(systemSetting)">保存</button> </form></div> |
这里的select控件我们先写了3个选项.现在先实现这个修改样式的功能,等完成这个功能后再把选项列表做成自动生成.
对应的system/controllers.js(开发了3天了,终于第一次用到controller了)
123456 | system.controller('system', function ($scope) { $scope.systemSetting = system.get(); $scope.save = function (systemSetting) { system.save(systemSetting); };}); |
controller里读取system的数据,并赋值给$scope.systemSetting,用于表单的数据绑定.由于angular实现了数据的双向绑定,因此用户编辑表单时,绑定的数据也会跟着更新.这样我们的save方法里只要将表单绑定的数据保存回system即可.
button按钮绑定save方法ng-click="save(systemSetting)".
这里可以稍微感受到angular让我们节省了很多工作量.
修改controller
1234567891011121314151617 | var system = hmd.system,fs = require('fs');system.controller('system', function ($scope) { //读取theme目录,生成样式列表 var files = fs.readdirSync('./app/lib/codemirror/theme'),themes={}; files.forEach(function (file) { if(~file.indexOf('.css')){ file = file.replace('.css',''); themes[file] = file; } }); $scope.themes = themes; $scope.systemSetting = system.get(); $scope.save = function (systemSetting) { system.save(systemSetting); };}); |
从theme目录里读取所有样式列表,生成键值对,然后赋值给$scope.themes
修改视图模版:
12 | <select name="theme" ng-model="systemSetting.theme" ng-options="k as v for (k, v) in themes"></select> |
<
新闻热点
疑难解答
