- In this Demo,”We will learn to install ng-prettyjson editor and use it for displaying a simple json data”.
- The ng-prettyjson editor is built on top of the Ace Editor by Cloud 9 as a AngularJS directive.
- We need to install few dependencies to use the ng-prettyjson.The dependencies are AngularJS and requireJS.
- The following screenshot shows the AngularJS installation in a terminal using NPM.
- The following screenshot shows the RequireJS installation in a terminal using NPM.
- Now we can install ng-prettyjson using npm install ng-prettyjson –save command.The following screenshot shows the terminal with ng-prettyjson installation.
- For demonstration we have created PrettyJSONAngularDemo project.The structure of this project looks like following screenshot.
- The index.html contains the code for instantiating prettyjson editor.The content of index.html is as follows.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ng-prettyjson ace editor demo</title>
<link rel="stylesheet"
href="node_modules/ng-prettyjson/dist/ng-prettyjson.min.css">
</head>
<body ng-controller="MyController">
<pre pretty-json="jsonObj"
edition="true"
on-edit="doWith(newJson)" />
</body>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="node_modules/requirejs/require.js" charset="utf-8"></script>
<script type="text/javascript" src="node_modules/ng-prettyjson/src/ace.js" charset="utf-8"></script>
<script type="text/javascript" src="node_modules/ng-prettyjson/dist/ng-prettyjson.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ngPrettyJson']);
myApp.controller("MyController",function($scope){
$scope.jsonObj = {"name":"sandeep"};
});
</script>
</html>
- The output of the code looks like following screenshot with some JSON displayed in the editor in VIEW mode..
- The editor on EDIT mode looks like following screenshot:-
- The demo code can be downloaded from the following URL.
https://github.com/saan1984/PrettyJSONAngularDemo
