Eero at 13:49, 23 September 2013

2013-09-23T13:49:48Z

Eero: Created page with "The AngularJS Topic Map browser is a JTM based [http://angularjs.org/ AngularJS] app designed to provide a simple Topic Map browser for the user to navigate. The app loads a T..."

2013-09-23T13:48:55Z

Created page with "The AngularJS Topic Map browser is a JTM based [http://angularjs.org/ AngularJS] app designed to provide a simple Topic Map browser for the user to navigate. The app loads a T..."

New page

The AngularJS Topic Map browser is a JTM based [http://angularjs.org/ AngularJS] app designed to provide a simple Topic Map browser for the user to navigate. The app loads a Topic Map presented in a simple JTM file and presents a simple UI built on [http://getbootstrap.com/2.3.2/ Twitter Bootstap]. Thus no instance of a [http://www.wandora.org/wiki/JTM_topic_map_service_module JTM service] is required for it's use.

==Installation and running==

The app is contained in the <code>app</code> subfolder, and is run by opening `index.html` in a browser. The app relies heavily on ajax requests which blocked by default in Chrome when opening pages from the filesystem. As a workaround the provided Node.js server should be run with `node scripts/web-server.js`.

The app is then accsessible in
localhost:8000/app/index.html

The project also supports building a stripped down distribution version of the app using Node.js and Grunt.

* The required dependencies are installed with <code>npm install -g grunt-cli</code> for a global installation of the Grunt command line interface

* <code>npm install</code> for the remaining dependencies.

* The compilation process is finally run with <code>grunt dist</code> which copies and compiles the required files to the build directory.

==Configuration and customization==

The main configuration and translation is stored in <code>config.json</code>

* <code>dataUrl</code> is used to specify the JTM file as a relative path.
* <code>sis</code> is used to specify special topics as type-instance and super-sub

associations and players. <code>root</code> is the root topic at the root of the subclass-superclass association tree.

* <code>langs</code> is used to specify the languages topics used in the app

* <code>defaultLang</code> is used to specify the default langauge

* <code>translation</code> is used to translate UI text elements to other languages.

A translation object should have the text literal written in the template files as one key-value-pair and it's translations as their respective key-value-pairs.

Further customization requires understaning of the Angular MVC framework.

==Example==

Run the server with <code>node scripts/web-server.js</code> from the app directory

[[File:angular1.png |500px ]]

Open <code>localhost:8000/app/index.html</code> to view the base topic specified in the <code>config.json</code> file.

[[File:angular2.png |500px ]]

* Browse the '''Art of Noise Bibliography''' topic by clicking on it. Note Angular's routing system remembering the topic si in the URL fragment making it possible to bookmark the page and browse the Topic Map with back and forward navigtion.
* Change the language from the menu at the top. Scopes available as languages in the browser are specified in <code>config.json</code>

[[File:angular3.png |500px ]]

* Browse the class and instance relations in the side bar. This is similar to the side bar in Wandora. Both relations and roles are also specified in <code>config.json</code>.
* Filter the track instances using the filter field provided by the app.

[[File:angular4.png |500px ]]

==The build process==

The <code>app</code> folder contains a version of the app suitable for development and testing.

[[File:angular5.png |500px ]]

It's usually useful to create a minified distribution package of the app for deployment purposes. The project folder includes a Gruntfile for producing this. We install the project dependecies for node as instructed in [[#Installation_and_running | Installation and running]]

[[File:angular7.png |500px ]]

We can now server the project using the <code>web-server.js</code> script and visit the distribution app at <code>localhost:8000/build/index.html</code>

[[File:angular8.png |500px ]]

@@ Line 3: / Line 3: @@
 ==Installation and running==
-The app is contained in the <code>app</code> subfolder, and is run by opening `index.html` in a browser. The app relies heavily on ajax requests which blocked by default in Chrome when opening pages from the filesystem. As a workaround the provided Node.js server should be run with `node scripts/web-server.js`.
+The app is contained in the <code>app</code> subfolder, and is run by opening <code>index.html</code> in a browser. The app relies heavily on ajax requests which blocked by default in Chrome when opening pages from the filesystem. As a workaround the provided Node.js server should be run with <code>node scripts/web-server.js</code>.
 The app is then accsessible in

AngularJS topic map browser - Revision history

Eero at 13:49, 23 September 2013

Eero: Created page with "The AngularJS Topic Map browser is a JTM based [http://angularjs.org/ AngularJS] app designed to provide a simple Topic Map browser for the user to navigate. The app loads a T..."