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编译器的准备工作:
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://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的说明