从无到有写一个运维APP(一)（下）

最新推荐文章于 2020-07-12 18:19:14 发布

heivy

最新推荐文章于 2020-07-12 18:19:14 发布

阅读量2.5k

点赞数

分类专栏： java 文章标签：运维 app Java

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://youerning.blog.51cto.com/10513771/1735450

三、目标代码

这里创建一个空白的的APP模板，上面因为没有指定，会默认选择tabs模板，也就是上面创建的APP，而官方提供的有以下模板

tabs (Default)
sidemenu
maps
salesforce
complex-list

APP名请自定义，本文为myblank
ionic start myblank blank

然后用文本编辑器打开该文件夹，以便编写相关内容:

这里写图片描述

我们主要编辑app.js index.html这两个文件，如下图:

这里写图片描述

为了方便调试，在创建的app目录执行以下命令

ionic serve

这样就会监听8100端口，并打开一个浏览器访问该页面
我们用chrom访问，按F12打开调试栏并设置成以下模式以便调试，如下图:

这里写图片描述

注意:在还没开始编辑之前，应该是空白的

首先编辑index页面
这一篇的内容主要做三个部分

一：默认显示内容(现在是负载，内存，磁盘)
二：侧栏菜单(现在是系统，日志，监控)
三：下面的底部(现在是主页，收藏，设置)

首先编辑js目录下的的app.js文件

将内容替换改为以下内容:

`//创建一个angularjs模块
var app = angular.module('myapp',['ionic',"chart.js"])

//创建一个控制器
app.controller("myCtrl",function($scope,$ionicModal){
 $scope.opt = [
   {title: "负载"},
   {title: "内存"},
   {title: "磁盘"}
  ];

 $scope.cont = [
   {title: "系统"},
   {title: "日志"},
   {title: "监控"}
  ];


});`

然后编辑index文件，将内容更改为以下内容:

这里写图片描述