在LawAndRegulation项目中添加导航路由（Abp添加菜单）对应的客户端页面。
创建文件
客户端页面在Abp模板项目中默认存放在Abp/Main/views文件夹下，在项目中我们创建属于字典管理的新文件夹，名字命名为DictionaryManger。
在文件夹中创建文件index.cshtml和同名的js文件index.js。
创建的index.cshtml文件中只需要编写页面内容部分，idnex.js中编写当前页面逻辑。
创建index.cshtml需要注意：
- 创建时选择“带有布局的MVC5视图页”选项，选择合适的母版（Views/Shared/_Layout.cshtml）;
- 删除原有内容；
同样添加index.js文件。
编辑index.cshtml
在视图页面中编写你的html内容，在Abp母版项目中已经引入了Bootstrap，项目DictionaryManager在编写页面内容时，使用Bootstrap作为前端开发框架。
在项目的Bundle.config文件中已经通过文件夹引入的方式引入了/App/Main文件夹下所有css文件所以页面编写需要编写的css可以直接在index.cshtml项目所在目录下创建文件添加，在本项目中我们添加了dicCommon.css文件。
页面中使用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文件。