|
|
移动指挥系统 是一个基于AngularJS v1.6.6、Jquery、Bootstrap、Html5、css3的 Web指挥控制系统。目前由登录、移动指挥、图像点播、历史查询、用户管理和系统设置六个界面构成。
下面所讲解的项目代码，是Web插件安装目录下的 \nginx\html\custom\bj 这个项目，在下面的介绍中将使用bj项目来指代所介绍的项目，请悉知。
在介绍代码之前您必须对angularjs中以下知识点有所了解：1、AngularJS 通过被称为 指令 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
在我们的代码中也使用了很多自定义的指令，如设备列表、用户列表等，在项目目录下的ng-derective文件夹下定义了项目中使用的指令。
2、构建一个AngularJs SPA（单页面应用）的过程。
首先，使用内置ng-app指令
ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。
- <div ng-app="<font color="#ff0000">myApp</font>" ng-controller="myCtrl">
- {{ firstName + " " + lastName }}
- </div>
- <script>
- var app = angular.module("<font color="#ff0000">myApp</font>", []);
- app.controller("myCtrl", function($scope) {
- $scope.firstName = "John";
- $scope.lastName = "Doe";
- });
- </script>
3、AngularJS 中可以创建自己的服务
AngularJS服务，是一个可以在Angularjs框架下使用的全局唯一的Js对象。
bj项目下ng-services目录中就是service的定义。
ngServiceJsw.js 中定义了对jsw.js 封装的服务JswService。
4、AngularJS 中创建自定义的指令 bj项目下ng-derective目录下就是自定义的指令。
5、ng-repeat指令
ng-repeat 指令用于循环输出指定次数的 HTML 元素, bj项目的设备列表，用户列表，多屏幕都是用ng-repeat来实现的，ng-repeat使用参考文档。
结合上述的AngularJs概念，讲解bj项目中的一个简单的指令loginpanel指令
loginpanel指令的使用
下面是loginpanel指令定义相关的代码
ng-derective/login/ 下是loginpanel指令相关的文件，如下图所示。
login目录下包含
delogin.js
向AngularjsApp注册loginpanel指令，指定模版地址 templateUrl: ng-derective/login/template.html
scope:{
ontrylogin: '=',
dftinfo: '=',
gbinfo: '=',
loadresult: '='
}, //Angularjs 作用域的绑定策略，bj项目中使用的基本上都是"=",与父scope进行双向绑定
link: function(scope, element, attr){//scope：就是该指令实例的作用域， element是该指令元素的Jquery对象， attr是该指令元素属性集合的jquery对象
scope.onclicktrylogin = function(){
}// scope.onclicktrylogin 给scope添加了个onclicktrylogin属性，这个属性可以直接在html视图中使用 , 像是 <a>{{onclicktrylogin}}</a> 或者 <button ng-click="onclicktrylogin()"></button>
// <button ng-click="onclicktrylogin()"></button> 当该button被单击时，就会触发scope.onclicktrylogin()方法。
}
template.css //template.css template.html的样式文件 在index.html 中引入
template.html //模版文件
下面就图像点播 和 集群通话的前端实现做详细介绍
如图所示，图像点播由左侧的设备列表和右侧的多个播放窗口组成。左侧的设备列表用于显示在线设备，右侧的多个播放窗口用于播放实时的视频。
图像点播 相关的文件有
ng-controller/picController.js 定义了控制器picCtrl，依赖ng-services/ngServiceJsw.js，封装了打开关闭视频的接口 在index.html中通过ng-controller="picCtrl"，指定picctrl的作用域。
ng-derective/pulist/ 设备列表指令（tpulist），用于显示设备列表，依赖ng-services/ngProviderPulist.js 通过<tpulist></tpulist> 在ng-derective/options/pic/template.html 中使用。
ng-derective/options/pic/ 图像点播指令（picmodel），用于显示整个图像点播界面，依赖设备列表指令
通过 <picmodel></picmodel>在index.html中使用，在index.html中picCtrl控制器向<picmodel></picmodel>，提供picevent，listinfo目前已废弃。在picmodel通过，scope.picevents接收。
ng-derective/options/pic/template.css ng-derective/options/pic/template.html 请类比lognpanel指令，其作用是相同的。
ng-services/ngProviderPulist.js 用于生成设备设备列表数据对象，当设备状态改变时，也会更改数据对象
ng-services/ngServiceJsw.js 封装了jsw.js，向上层提供对smarteye平台访问的接口
实际上多个播放窗口就是多个div，这里使用了ng-repeat指令，ng-repeat 指令用于循环输出指定次数的 HTML 元素
每个播放窗口div的id都是通过，<div id={{col.id}}>...<div> 指定的。 col.id 在depic.js中scope.row中有定义。
阅读代码中如果遇到ng-xxxx的html元素属性，那么这就是Angularjs内置的指令，可以百度了解其作用。
未完待续。。。
|
|
poston 2018-9-25 21:01
favor
poston 2018-9-27 11:25
