Angular在onos2.3版本上的开发（ubuntu16.04）

1.在ubuntu16.04系统上安装onos2.3版本。

     参考资料链接：https://wiki.onosproject.org/display/ONOS/Developer+Quick+Start

  • Bazel学习资料：http://bazel.build/docs/getting-started.html
  • onos2.0编译安装（npm install和 build问题解决）：https://blog.csdn.net/daihanglai7622/article/details/88642998
  • npm install问题的解决办法：到nodejs的官网https://nodejs.org/en/download/current/上下载最新版的tar.xz安装包，解压并在bashrc里配置环境变量($sudo gedit ~/.bashrc $ source ~/.bashrc)，更新npm的版本。
  • #set nodejs environment
    export NODE_HOME=/home/qingcheng/Applications/node    
    export PATH=${NODE_HOME}/bin:$PATH 
  • 重新安装Angular版本：$npm uninstall -g @angular/cli $npm cache clean --force $npm install -g @angular/cli@7.2.4

2. onos前台开发基础
（1）CLI终端：onos localhost
         onos> app activate gui2
         onos> app deactivate gui
         onos> app activate roadm
（2) GUI界面：http://localhost:8181/onos/ui
        用户名/密码：onos/rocks
        登陆UI界面，提示有新的应用，更新GUI界面，点击ok，页面刷新在导航处，有新的应用导航链接，点击进入到roadm应用的界面。 

   onos前台开发的参考资料链接：

   https://wiki.onosproject.org/display/ONOS/Guides

   https://github.com/opennetworkinglab/onos/tree/master/apps/roadm

   https://github.com/opennetworkinglab/onos/tree/master/web/gui2

   https://github.com/opennetworkinglab/onos

3.使用IDE编程。

  • 可以使用idea、pycharm等IDE。打开项目的路径为：~/onos/apps/roadm/web/roadm-gui

打开项目后会报错npm angular-cli包依赖问题，解决办法：在终端里输入

$npm uninstall -g angular-cli $npm install -g @angular/cli@latest

然后重新使用IDE打开项目，即可解决报错问题。

下一步即可按照angular docs的tour of heroes教程练习angular的开发。（app对应于roadm）

  • onos编译器的准备工作：
Download ONOS code & Build ONOS:
git clone https://gerrit.onosproject.org/onos
cd onos
bazel build onos

onos构建：进入~/onos，$bazel run onos-local

打开新的terminal窗口，$onos localhost

打开GUI界面，浏览器中 http://localhost:8181/onos/ui

 4.Angular 和 d3的结合，制作拓扑图

参考资料：

https://github.com/lsharir/angular-d3-graph-example (注：angular5)

https://github.com/Limer98/angular8-d3-graph (注：angular8，需要npm install bootstrap)

https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb

http://d3.decembercafe.org/pages/lessons/9.html

 改代码中遇到包找不到后看的网页：

https://www.positronx.io/angular-8-httpclient-http-tutorial-build-consume-restful-api/

https://appdividend.com/2019/06/07/angular-8-forms-tutorial-angular-reactive-and-template-forms-example/#Angular_8_Forms_example

 与项目整合后的源码地址：

https://github.com/MXY-LF/onos-web

https://github.com/ShufengLi/onos-LSF

5.其他学习资料

Spring Boot And Angular2项目实战——链接: https://pan.baidu.com/s/1aKCCA_maoaC_0OuczTlvag 提取码: 728k
https://github.com/opennetworkinglab/onos/tree/master/apps/roadm
这个是模版，可以看看readme.md的说明

posted on 2019-10-28 11:51  Limer98  阅读(520)  评论(0)  编辑  收藏  举报

导航