应用框架技术

技术框架介绍

开放平台应用前端默认支持Bootstrap 3 CSS框架，可使用Bootstrap3中所有基础样式。

开发平台默认引入Fontawesome 4.17所有ICON，可使用FontAwesome 4.17 所有ICON.

开发平台默认引入Lodash框架，可直接使用Lodash所有API方法

开发平台默认引入jQuery框架，可直接使用jQuery语法选取元素

开放平台默认使用AngularJS 1.7版本作为开发框架。

代码解析

HTML代码

<!--使用Bootstrap中的row -->
<!--绑定Angular中的HeaderController -->
<div class="row" ng-controller="HeaderController">   
    <div class="col-xs-12"> <!--使用Bootstrap中的栅格 -->
        <h1>机器人三维应用</h1>
    </div>
    <div class="col-xs-12">
        <!--使用AngularJS绑定Controller中变量 -->
        <span class="title" ng-bind="entity.name"></span> 
    </div>
</div>

JavaScript代码

// 引入三维开发包three.js，使用RequireJS规则
define(['threejs'], function () {  

    // 取得Angular的app模块。模块名为固定
    var app = angular.module('app');

    // 创建HeaderController
    // 代码中的janus，代表引入AngularJS Service janus， 关于服务janus下一章节有详细介绍
    app.controller('HeaderController', ['$scope','janus', function ($scope,janus) { 
        //在$scope上创建对象
        $scope.entity = {
            name: '机器人三维应用',
            remarks:'机器人三维应用是用机器人的实时数据驱动三维运动。'
        };
        
        function loadDeviceList(){
            // 使用Janus API获得设备列表
            janus.loadDeviceList().then(function(result) {
              // 取得设备列表成功，result即是返回的数据
            });
        }
        
        loadDeviceList();
    }]);
})