在LawAndRegulation项目中添加导航路由（Abp添加菜单）对应的客户端页面。javascript
建立文件
客户端页面在Abp模板项目中默认存放在Abp/Main/views文件夹下，在项目中咱们建立属于字典管理的新文件夹，名字命名为DictionaryManger。css
在文件夹中建立文件index.cshtml和同名的js文件index.js。html
建立的index.cshtml文件中只须要编写页面内容部分，idnex.js中编写当前页面逻辑。前端
建立index.cshtml须要注意：java
- 建立时选择“带有布局的MVC5视图页”选项，选择合适的母版（Views/Shared/_Layout.cshtml）;
- 删除原有内容；
一样添加index.js文件。node
编辑index.cshtml
在视图页面中编写你的html内容，在Abp母版项目中已经引入了Bootstrap，项目DictionaryManager在编写页面内容时，使用Bootstrap做为前端开发框架。jquery
在项目的Bundle.config文件中已经经过文件夹引入的方式引入了/App/Main文件夹下全部css文件因此页面编写须要编写的css能够直接在index.cshtml项目所在目录下建立文件添加，在本项目中咱们添加了dicCommon.css文件。angularjs
页面中使用Bootstrap模态框，想要详细学习模态框，请移步这里，有详细的使用介绍。bootstrap
css文件中定义了不少自定义样式，这些样式中的单位存在px和em，存在这样的问题是由于部份内容继承自原有代码，尚未时间进行统一更改，单位之间换算参考连接，这部份内容尚未进行验证。按照文中介绍，默认状况下1em=16px，但em是相对单位因此若是父元素定义font-size字段那么1em=父元素定义的大小。数组
添加html，代码以下：
<form id="dicForm" runat="server" ng-controller="app.views.dictionarymanager.index as vm"> <div class="row"> <div class="col-xs-12 dic_header" id="dicHeaderBtn"> <button type="button" class="btn btn-primary pull-left" id="btnAddDicCategory" ng-disabled="btnAddDicCategoryDisabled"> 新增字典分类 </button> <button type="button" class="btn btn-primary pull-left" id="btnAddDic" ng-disabled="btnAddDicDisabled" ng-click="AddDictinary()"> 新增字典 </button> <button type="button" class="btn btn-primary pull-left" id="btnEditDic" ng-disabled="btnEditDicDisabled"> 编辑 </button> <button type="button" class="btn btn-primary pull-left" id="btnDeleteDic" ng-disabled="btnDeleteDicDisabled"> 删除 </button> <button type="button" class="btn btn-primary pull-left" id="btnExport" ng-disabled="btnExportDisabled"> 导出 </button> <button type="button" class="btn btn-primary pull-left" id="btnImport"> 导入 </button> </div> <div class="col-xs-12 d-p-l"> <div class="col-sm-4 col-lg-3 dic_noderow" id="dicNodeRow"> <div id="dicTree"> </div> </div> <div class="col-sm-8 col-lg-9 d-p-l" id="divDetail"> <iframe id="showInfomation" ng-src="{{srcValue}}" name="iframeSelf"></iframe> </div> </div> </div> </form>
上面代码为bootstrap（css/html开源框架），其中dic-header、d-p-l、dic-noderow为自定义css其余为bootstrap原生要素及属性，若是想进一步学习bootstrap使用能够查看连接。上面代码除了使用布局及按钮以外，还使用了模态框，关于模态框菜鸟有介绍，移步连接。class内包含col-sm-12等col开头的样式，这些样式为bootstrap的网格系统，网格系统的具体介绍请查看上面bootstrap连接。
视图中涉及到的样式
bootstrap默认样式介绍：
- btn：原始按钮样式；
- btn-primary：基本按钮样式；
- pull-left：总体左滑动；相似于左对齐，好比页面中控件隐藏，则右侧控件像左侧滑动；
- col-xm-12在小型设备上的布局，视图总计为12，class中存在这个预约义类的要素至关于充满整个屏幕；
- col-lg-3为在大型设备上布局，结合上面的col-xm-使用就能够达到响应式（一个站点适应多个终端）的布局；
这些默认样式具体定义了什么能够查看bootstrap-theme.css（能够经过下载bootstrap框架获得这个文件）中源码进行查看。
自定义样式：
.r-p-l { padding-left: 10px; } div.col-xs-12.dic_header { padding-top: 10px; margin-left: 15px; padding-bottom: 50px; } div.dic_noderow, #dicTree { overflow-x: hidden; overflow-y: auto; max-width: 500px; }
自定义样式中咱们定义了如下属性：
- padding-left、padding-top、padding-bottom：盒子模型的内边距；
- margin-left：盒子模型的外边距；
- overflow-x、overflow-y：内容溢出是否裁剪；
视图中涉及的标签
- button：按钮标签；
- form：负责数据采集的一组标签；
- div：将视图划分为不一样区域；
还有其余bootstrap自定义样式，这里再也不详细介绍，若是有时间开设专门的博客介绍bootstrap。
要素包含ng-字符的属性属于angular，这些属性大部分把ng-去掉即为要素原生属性，咱们在视图中添加这些属性，就能够在控制器中直接对这些属性进行赋值，下一节咱们详细介绍这些属性的使用。
编辑index.js
当即执行函数-若是已经掌握跳过
首先在inde.js文件中编写一个当即执行函数，当即执行函数就是在函数定义的地方直接执行这个函数。做用及好处能够概括为隔离做用域，在私有做用域内变量及函数不会被污染，至关于起到命名空间的做用。
编写方式有如下几种（详细了解参考连接）：
//user () operational character (function(){})(); (function(){}()); //user ! operational character !(function(){})(); //uer + operational character +(function(){})(); //uer + operational character -(function(){})(); //uer + operational character var temp=(function(){})();
在咱们的js文件中咱们使用了第一种方式编写以及执行函数。
angular模块module
在js文件的当即执行函数中，咱们首先定义一个模块，在angularjs中模块是应用程序中不一样部分的容器，在这些容器中咱们能够添加controllers（控制器）、services（服务）、filters（过滤器）、directives（指令）等内容。
angular中模块经过angular.mudole(name,requires,configfn)方法建立：
- name：模块的名称，与视图中html标签的ng-app属性相关联；
- requires：模块的依赖关系，若是在调用方法时没有设置此参数，那么方法默认为获取这个模块；若是建立新模块并肯定没有依赖关系，那么须要设置这个参数为[]数组；
- configfn：负责在模块初始化时作一些配置，参数是方法或者数组，这个参数是数组，那么最后一个参数必须是方法。
angular控制器controller
控制器是对视图的数据和时间处理函数进行挂载，同时进行必定的业务功能的底层封装和处理，起到的做用就是加强视图，在视图的做用于中增长额外的功能，咱们用它来给做用于对象设置初始化状态，添加自定义行为。
建立完成angular模块后，调用模块方法controller建立控制器，controller的参数组成为：
- controllerName：控制器名称，控制器名称和ag-controller属性值相对应；
- controllerConstructor：第二个参数为一个回调函数，用于执行构造函数初始化内容；
angular做用域scope
在项目代码中，controller的参数是一个scope对象，scope是视图与控制器之间的纽带，scope是一个javascript对象，scope能够定义属性和方法，这些属性和方法能够在视图和控制器之间使用。
调用标签事件
通用事件
//angular angular.element("#id").click(); //jquery $("#id").click(); //原生 document.getElementById("#id").trigger("click");
标签特定事件
//angular angular.element("#id").on("eventName",function(event,data){}); //jquery $("#id").on("eventName",function(event,data){});
基于bootstrap的jQuery多级列表树插件
装载及初始化插件：
//初始化treeview angular.element("#dicTree").treeview({ data: getDictinary(), levels: 2, color: '#000000', backColor: '#FFFFFF', href:'#node-1' }); function getDictinary() { var tree = [ { text: "Parent 1", nodes: [{text: "Child 1",nodes: [{text: "Grandchild 1"}]}] } ]; return tree; }
以上为最简单结构，还有其余扩展属性能够查看连接，节点属性一节中有详细的介绍。
添加treeview控件的节点选择事件：
angular.element("#dicTree").on('nodeSelected', function (event, data) { alert(data.text); });
当节点被选择后能够触发事件调用该方法，在本项目中为了显示节点的详细信息。
持久化当前选择节点内容
所谓的持久化内容，也就是在当前视图的生命周期内保存视图中须要的内容。
在节点选择事件中对视图中form表单的隐藏标签赋值，首先添加隐藏标签到index.cshtml中：
<input type="hidden" id="currentNodeText" /> <input type="hidden" id="currentNodeId" /> <input type="hidden" id="currentHref" />
在节点改变事件绑定的方法中赋值：
angular.element("#dicTree").on('nodeSelected', function (event, data) { angular.element("#currentNodeText").val(data.text); angular.element("#currentNodeId").val(data.id); });
存储当前选择的节点是为了在视图做用域内持久化节点内容。
组件化模块（angular component）
解耦复杂系统时将多个功能模块拆分、重组的过程就叫作模块化，其中有多个属性、状态描述其内部特性。
组件化与传统的编写方式相比较，有什么优点呢，或者叫解决了什么问题，根据园内CooMark的总结以下：
- app中的某个部分如何重用（在这里咱们能够叫作，视图内的某个模块如何重用）；
- app中的scope做用域不是隔离的，变量和方法存在污染的可能；
- 解决了传统模式不能重用的问题；
- 简化了视图中的标签，便于维护；
- 组件间是隔离的，互不影响；
- 能够独立测试组件；
使用component：
- 文件名建议包含.component.js
- component命名采用驼峰式命名法，在视图中使用时采用“-”进行分割；
- template使用controller的实例$ctrl替代scope访问数据，别名可使用controllerAs进行自定义；
- component内的controller能够经过controller方法进行定义；
- templateUrl定义时须要注意，根目录为当前视图目录（若是是mvc项目，那么根目录就是母版目录_Layout.cshtml）；
定义模块：
var controllerId = 'app.views.dictionarymanager.index'; var myModule = angular.module("app");
注册组件到模块：
- template：元素组件自己；
- templateUrl：经过文件方式定义元素；
- controller：定义组件controller，这样组件内就能够经过默认的$ctrl方式调用数据；
- bingdings：绑定数据到元素，其中<为单向绑定，父做用域的变化影响子做用域；
- scope：组件内单独的做用域；
- controllerAs：重命名控制器；
- restrict：字符型，E 表示该指令是一个element; A 表示该指令是attribute; C 表示该指令是class; M 表示该指令是注视；
myModule.component('myComp', { //template: '<div>My name is {{$ctrl.text}}</div>',
templateUrl:'././App/Main/views/dictionarymanager/dicItem.html', controller: function () { this.name = 'shahar'; }, bindings: { text:'<' }
其中注册组件能够经过两种方式引入模板，第一种经过直接编写的方式，也就是代码中template的内容，也能够经过文件引入的方式，如图中templateUrl的方式。
视图中引入组件，视图中经过-分割驼峰式命名法的组件，并定义绑定的属性，绑定的属性能够经过controller的别名调用父scope内的数据进行绑定：
<my-comp text="vm.dicMainInfo"></my-comp>
父组件向组件传递数据：
myModule.controller(controllerId, ['$scope', function ($scope) { this.dicMainInfo = 'hello'; }]);
indes.js代码以下：
(function () { var controllerId = 'app.views.dictionarymanager.index'; angular.module("app").controller(controllerId, ['$scope', function ($scope) { $scope.AddDictinary = function () { alert("hello"); $scope.btnADCDis = false; }; function initialize() { $scope.srcValue = ""; $scope.btnAddDicCategoryDisabled = true; $scope.btnAddDicDisabled = true; $scope.btnEditDicDisabled = true; $scope.btnDeleteDicDisabled = true; $scope.btnExportDisabled = true; } initialize(); }]); })();
在上面的代码中实践了以上介绍的知识点，首先定义controllerId变量，窗体与视图中ag-controller属性相同的值，经过module定义模块，由于在mvc项目中app的div也就是区域已经在模板视图中定义，因此在定义模块时统一都是用app名称进行定义，再经过调用模块的controller方法建立控制器，控制器中传递scope参数，在回调函数中编写初始化代码及逻辑代码，做用域（scopde）中定义的属性及方法与视图中的属性及事件相关联，这样即实现了初始化属性又装载了事件方法。
错误处理
TypeError: $.fn.bootstrapTable is undefined， bootstrap-table-zh-CN.js文件加载错误是由于加载顺序形成的，加载顺序遵循首先加载bootstrap.js文件，而后加载bootstrap-table.js文件，最后加载 bootstrap-table-zh-CN.js文件。