noVNC port for angular.js

Usage no npm install needed!

<script type="module">
  import testcraftAngularNoVnc from 'https://cdn.skypack.dev/testcraft-angular-no-vnc';


Angular noVNC

Port of Joel Martin's noVNC project for angularjs.

Sample app

Fullscreen mode


$ bower install angular-no-vnc


  • Multiple connections\displays over one page.
  • Config over directive attributes.
  • Full screen mode support.
  • Easily scale, fit to width\height.


Start vnc & ws proxy (server-side)

This module is a port of noVNC project that means you should use websockify proxy to convert over websockets. For me it is:

$ sudo apt-get install -y x11vnc
$ x11vnc -display :0 -N -forever &

To run the websockify install angular-noVNC globally via npm:

$ npm install -g angular-no-vnc #add websockify command
$ websockify --web=.. 44999 localhost:5900

--web=.. will allow you to use sample app in ../index.html for fast check by http://localhost:44999

Note that websockify listens on /websockify path by default. If you want to use another ws path please run websockify --path your_path 44999 localhost:5900

Additional info of usage websockify is here. Others server-side features you might found here.

Use in your application (client-side)

After running websockify, or other ws:// proxy server:

  • Add library to your html file and noVNC to your module dependency. var app = angular.module('myApp', ['noVNC']);

  • Add directive <vnc host="localhost" port="44999" is-connected="true"></vnc>

  • Reload page =)


Attribute Description Scope type Default value
host IP/name of host to connect. @ window.location.hostname
port Port of websockify port. @ window.location.port or 80\http, 443\https
password Connection password. @ ''
path Connection path @ ''
true-color True color representation. = true
view-only Disable keyboard and mouse events. = false
is-connected Connection switcher. = false
style Style of canvas\display element. = {}
states States of system actions. format: [{status: '', msg: ''},]. = []
display.scale Scale of display from 0.1 to 1. = 1
display.width Display width. = null
display.height Display height. = null
display.fitTo Fit display to width/height/scale. = null
display.fullScreen Full screen mode switcher. = null


Yes, they are should be in. This port is goes with code changes of big one (noVNC), that's why you need to use it carefully.

Nearby changes

  • Add loadable flash ws:// support.
  • Add mobile mode support.
  • Add clipboard transfer.
  • Write tests.
  • Add encription support.
  • Refactoring and many code improvements.

All improvements need free time. Your stars and issues increase my interest to work with project =)


  • Fork $ git clone git@github.com:rootStar-lock/angular-noVNC.git.
  • Navigate and install npm and bower dependencies. $ cd angular-noVNC && npm install.
  • Project driven by gulp build system. Run gulp --tasks to see whats we have.
  • Live sample app in index.html
  • Use gulp lint and gulp plato to check code complexity and common mistakes.

Forks and pulls will be accepted with love)