Client framework usage guide

Client framework usage guide. Issue-Id : CLIENT-163 Change-Id: Id5acaa5b3ee3f62279d3bdcb98558a1c2984cf69 Signed-off-by: Seshu-Kumar-M <seshu.kumar.m@huawei.com>
author: Seshu-Kumar-M <seshu.kumar.m@huawei.com> 2017-02-11 03:06:54 +0530
committer: Seshu-Kumar-M <seshu.kumar.m@huawei.com> 2017-02-11 03:06:54 +0530
commit: 231321f8475c72a9b253b71ca7f99f2745e44535 (patch)
tree: a463412932f256dacf6e2f3f72e40ca845628a69 /common/src/main/webapp/usageguide/browser
parent: fa9aeb9d5b6aba71f4fcb5ee775de823eb82cf19 (diff)
22 files changed, 3178 insertions, 0 deletions
diff --git a/common/src/main/webapp/usageguide/browser/index.html b/common/src/main/webapp/usageguide/browser/index.html
new file mode 100644
index 00000000..891ae0e2
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/index.html
@@ -0,0 +1,52 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Usage Guide</title>
+    <link href="thirdparty/css/bootstrap.min.css" rel="stylesheet"/>
+    <!--Pulling Awesome Font -->
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <link href="thirdparty/css/zTreeStyle.css" rel="stylesheet"/>
+    <link href="thirdparty/css/magic-check.css" rel="stylesheet"/>
+    <link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
+    <link href="framework/css/open-ostyle.css" rel="stylesheet"/>
+
+    <script src="thirdparty/js/angular.min.js"></script>
+    <script src="thirdparty/js/angular-ui-router.min.js"></script>
+    <script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
+    <script src="thirdparty/js/jquery_1.12.4.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script type="text/javascript" src="thirdparty/js/bootstrap.min.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/rest.js"></script>
+    <script src="thirdparty/js/mustache.js"></script>
+    <script src="thirdparty/js/jquery.ztree.core-3.5.js"></script>
+
+</head>
+
+<body ng-app="POCApp" onload="loadTemplate()">
+
+<ui-view></ui-view>
+</body>
+</html>
+\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/browser/js/app.js b/common/src/main/webapp/usageguide/browser/js/app.js
new file mode 100644
index 00000000..75c95fed
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/js/app.js
@@ -0,0 +1,1484 @@
+/*
+
+    Copyright 2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+*/
+
+
+var app = angular.module("POCApp", ["ui.router", "ngTable"])
+
+    /*.run(function($rootScope, $location, $state, LoginService) {
+        $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
+            if (toState.authenticate && !LoginService.isAuthenticated()){
+                // User isn’t authenticated
+                $state.transitionTo("login");
+                event.preventDefault();
+            }
+        });
+    })*/
+    .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
+        //$routeProvider.caseInsensitiveMatch = true;
+        $urlMatcherFactoryProvider.caseInsensitive(true);
+        $urlRouterProvider.otherwise('/login');
+        //$locationProvider.html5Mode(true).hashPrefix('!');
+        $stateProvider
+            .state('login', {
+                url : '/login',
+                templateUrl : 'templates/login.html',
+                controller : 'LoginController',
+                authenticate: false
+            })
+            .state('register', {
+                url : '/register',
+                templateUrl : 'templates/register.html',
+                controller : 'registerController',
+                authenticate: false
+            })
+            .state("home", {
+                url: "/home",
+                templateUrl : "templates/home.html",
+                controller : "homeCtrl",
+                authenticate: true
+            })
+            .state("home.tree", {
+                url: "/tree",
+                templateUrl : "templates/tree.html",
+                controller : "treeCtrl",
+                authenticate: true
+            })
+            .state("home.accordion", {
+                url: "/accordion",
+                templateUrl : "templates/accordion.html",
+                controller : "accordionCtrl",
+                authenticate: true
+            })
+            .state("home.tabs", {
+                url: "/tabs",
+                templateUrl : "templates/tabs.html",
+                controller : "tabsCtrl",
+                authenticate: true
+            })
+            .state("home.vtabs", {
+                url: "/vtabs",
+                templateUrl : "templates/verticalTab.html",
+                controller : "vTabCtrl",
+                authenticate: true
+            })
+            .state("home.table", {
+                url: "/table",
+                templateUrl : "templates/table.html",
+                controller : "tableCtrl",
+                authenticate: true
+            })
+            .state("home.buttons", {
+                url: "/buttons",
+                templateUrl : "templates/buttons.html",
+                controller : "buttonsCtrl",
+                authenticate: true
+            })
+            /*state for radio button and checkboxes-------------------------------------------------*/
+            .state("home.radiobuttons", {
+                url: "/radiobuttons",
+                templateUrl : "templates/radioButtons.html",
+                controller : "radioCtrl",
+                authenticate: true
+            })
+            .state("home.checkboxes", {
+                url: "/checkboxes",
+                templateUrl : "templates/checkBoxes.html",
+                controller : "checkBoxCtrl",
+                authenticate: true
+            })
+            .state("home.dropdown", {
+                url: "/dropdown",
+                templateUrl: "templates/dropdown.html",
+                controller: "dropdownCtrl",
+                authenticate: true
+            })
+
+            .state("home.list", {
+                url: "/list",
+                /*template:"<h3>Under Progress</h3>",*/
+                templateUrl : "templates/list.html",
+                controller : "listCtrl",
+                authenticate: true
+            })
+
+            .state("home.provinceMgmt", {
+                url: "/management",
+                templateUrl : "templates/management.html",
+                controller : "managementCtrl",
+                authenticate: true
+            })
+            .state("home.tooltip", {
+                url: "/textarea",
+                templateUrl : "templates/textarea.html",
+                controller : "toolCtrl",
+                authenticate: true
+            })
+
+            .state("home.notification", {
+                url: "/notification",
+                templateUrl : "templates/notification.html",
+                controller : "notificationCtrl",
+                authenticate: true
+            })
+            .state("home.functional", {
+                url: "/functional",
+                templateUrl : "templates/functional.html",
+                controller : "functionalCtrl",
+                authenticate: true
+            })
+            .state("home.labels", {
+                url: "/labels",
+                templateUrl : "templates/label.html",
+                authenticate: true
+            })
+
+
+    })
+    .controller('LoginController', function($scope, $rootScope, $stateParams, $state, LoginService) {
+        $rootScope.title = "AngularJS Login Sample";
+
+        $scope.formSubmit = function() {
+            LoginService.login($scope.user)
+                .then(function (data) {
+                    if (data) {
+                        $scope.error = '';
+                        $scope.user.username = '';
+                        $scope.user.password = '';
+                        $state.transitionTo('home.tree');
+                    }
+                    else {
+                        $scope.error = "Incorrect username/password !";
+                    }
+                }, function (reason) {
+                    $scope.error = "Incorrect username/password !";
+                });
+        };
+
+    })
+    .controller('registerController', function($scope, $state, LoginService){
+        $scope.formSubmit = function() {
+            if($scope.user.password === $scope.user.confpassword) {
+                LoginService.registerUser($scope.user)
+                    .then(function (data) {
+                        $state.transitionTo("login");
+                    }, function () {
+                        console.log("Failed to register");
+                    });
+            }
+            else {
+                console.log("Password not matched...");
+                var dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+                var data = {'title':'Error',showClose:true, 'closeBtnTxt':'Ok', 'icon':'glyphicon glyphicon-exclamation-sign','iconColor':'icon_error','msg':'Password and Confirm password does not match.', buttons:[]};
+                var html = Mustache.to_html(dialog_tpl, data);
+                $(html).modal({backdrop: "static"});   //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*/
+            }
+        };
+    })
+    .controller("homeCtrl", function($scope, $state, DataService){
+        $scope.message = "Home Page";
+
+        /*$scope.geticonClass = function() {
+            if($( "#panel1" ).hasClass( "in" )){
+                return "openo_accordion_ui-icon-expand";
+            }
+            else{
+               return "openo_accordion_ui-icon-expand.current";
+            }
+
+
+        }*/
+
+
+
+        /* $scope.accordionLoaded  = function() {
+             if(modelTemplate != null) {
+                 console.log("left menu loading..");
+                 menuaccordion();
+                 return true;
+             }
+             console.log("left menu not loading..");
+             return false;
+         }
+
+         function menuaccordion() {
+             var accordion_tpl = $(modelTemplate).filter('#menu_accordion').html();
+
+             $.getJSON('./data/homelinks.json', function (accordion) {
+                 var html = Mustache.to_html(accordion_tpl, accordion.accordion_data);
+                 $('#accordionmenuid').html(html);
+             });
+         }*/
+
+    })
+
+    /* Tree Controller */
+    .controller("treeCtrl", function($scope,DataService,$log){
+        $scope.message = "Tree Data";
+        var setting = {};
+        /*$scope.treeLoaded = function() {
+            if(modelTemplate != null) {
+                console.log("Tree data loading..");
+                tree();
+                return true;
+            }
+            console.log("Tree data not loading..");
+            return false;
+        }*/
+        $scope.init = function() {
+            $scope.param="treeData";
+            $scope.shortNote="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.treeData = data.data;
+                    tree();
+                    console.log("inside tree");
+                    $log.info($scope.treeData);
+                });
+            DataService.getAllJSONData($scope.shortNote)
+                .then(function(data1){
+                    $scope.treeTip = data1.data.treeTip;
+                    console.log("inside treeTip");
+                    $log.info(data1);
+                });
+        }
+        function tree() {
+            zNodes = $scope.treeData;
+            $.fn.zTree.init($("#tree1"), setting, zNodes);
+
+        }
+    })
+
+    /* Accordian Controller */
+    .controller("accordionCtrl", function($scope,DataService, $log){
+
+        $scope.message = "Accordion";
+
+        $scope.accordionLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("accordion loading..");
+
+                accordion();
+                return true;
+            }
+            console.log("accordion not loading..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="accordionData";
+            $scope.accordionTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.accordion = data.data;
+                    accordion();
+                    console.log("inside accordion");
+                    $log.info(data);
+                });
+            DataService.getAllJSONData($scope.accordionTip)
+                .then(function(data){
+                    $scope.accordionTipData = data.data.accordionTip;
+                    console.log("inside accordion");
+                    $log.info(data);
+                });
+        }
+
+        function accordion() {
+
+            var accordion_tpl = $(modelTemplate).filter('#accordion').html();
+            console.log("in acc" );
+            var html = Mustache.to_html(accordion_tpl, $scope.accordion.accordion_data);
+            $('#accordion').html(html);
+        }
+    })
+    .controller("tabsCtrl", function($scope, $state, DataService, $log){
+        $scope.message = "Tabs";
+        $scope.tabLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Tab is loading..");
+                loadTabData();
+                return true;
+            }
+            console.log("Not ready..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="tabData";
+            $scope.tabTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.tabdata = data.data;
+                    loadTabData();
+                    console.log("inside tabs");
+                    $log.info(data);
+                });
+            DataService.getAllJSONData($scope.tabTip)
+                .then(function(data){
+                    $scope.tabTipData = data.data.tabTip;
+                    $log.info(data);
+                });
+        }
+
+        function loadTabData() {
+            var tab_tpl = $(modelTemplate).filter('#tabs').html();
+            var html = Mustache.to_html(tab_tpl, $scope.tabdata.tabData);
+            $('#tabArea').html(html);
+        }
+
+    })
+    .controller("vTabCtrl", function($scope, $state, DataService){
+        $scope.message = "Vertical Tabs";
+
+        $scope.vtabLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Vertical Tab is loading..");
+                loadvTabData();
+                return true;
+            }
+            console.log("Not ready..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="vtabData";
+            $scope.vtabTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(vtabdata){
+                    $scope.data = vtabdata.data;
+                    loadvTabData();
+                    console.log("inside vTab");
+                });
+            DataService.getAllJSONData($scope.vtabTip)
+                .then(function(vtabdata){
+                    $scope.vtabTipdata = vtabdata.data.vtabTip;
+                    console.log("inside vTab");
+                });
+        }
+
+        function loadvTabData() {
+
+            var vtab_tpl = $(modelTemplate).filter('#vtabs').html();
+            var html = Mustache.to_html(vtab_tpl, $scope.data.vtabData);
+            $('#vtabArea').html(html);
+        }
+    })
+    .controller("tableCtrl", function($scope, $state, DataService,  NgTableParams){
+        $scope.message = "Tables";
+
+        $scope.tableLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Table is loading..");
+                loadTableData();
+                return true;
+            }
+            console.log("Not ready..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="tableData";
+            $scope.tableTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.tableData = data.data;
+                    loadTableData();
+                    console.log("inside table");
+                });
+
+            DataService.getAllJSONData($scope.tableTip)
+                .then(function(data){
+                    $scope.tableTipData = data.data.tableTip;
+                    console.log("inside table");
+                });
+        }
+
+        function loadTableData() {
+
+            var table_tpl = $(modelTemplate).filter('#table').html();
+
+            var html = Mustache.to_html(table_tpl, $scope.tableData.basic_table_data);
+            $('#basictableArea').html(html);
+
+            var html = Mustache.to_html(table_tpl, $scope.tableData.str_table_data);
+            $('#strippedtableArea').html(html);
+            /* $scope.tableParams = new NgTableParams({count: 5, sorting: {FirstName: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+             }, { counts:[5, 10, 20, 50], dataset: $scope.tableData.str_table_data});*/
+
+
+            /*var html = Mustache.to_html(table_tpl, $scope.tableData.cond_table_data);
+             $('#condensedtableArea').html(html);*/
+            $scope.tableParams = new NgTableParams({
+                count: 5, sorting: {language: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+            }, {counts: [5, 10, 20, 50], dataset: $scope.tableData.cond_table_data});
+        }
+        }
+    )
+
+    /* Buttons Controller */
+    .controller("buttonsCtrl", function($scope,DataService,$log){
+        $scope.message = "Types of Buttons";
+        $scope.buttonTip="shortNote";
+
+        $scope.init = function() {
+            $scope.param="buttonsData";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.buttons = data.data;
+                    defaultButtons();
+                    visualButtons();
+                    sizeButtons();
+                    iconButtons();
+                    console.log("inside accordion");
+                    $log.info(data);
+                });
+            DataService.getAllJSONData($scope.buttonTip)
+                .then(function(data){
+                    $scope.buttonTipData = data.data.buttonTip;
+                    console.log("inside table");
+                });
+        }
+
+        function defaultButtons(){
+            console.log("Default buttons Loaded..");
+            //Here your view content is fully loaded !!
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+            var def_icon_button_tpl = $(modelTemplate).filter('#defaultIconButtons').html();
+
+            var html = Mustache.to_html(def_button_tpl, $scope.buttons.default_btn_data.def_button);
+            $('#defaultButtonArea').html(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, $scope.buttons.default_btn_data.def_print_button);
+            $('#defaultButtonArea').append(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, $scope.buttons.default_btn_data.def_print_button_right);
+            $('#defaultButtonArea').append(html);
+        }
+
+
+        function visualButtons(){
+            console.log("Loaded..");
+            //Here your view content is fully loaded !!
+            var visual_button_tpl = $(modelTemplate).filter('#visualButtons').html();
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_pri_btn_data);
+            $('#visualButtonArea').html(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_sec_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_succ_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_inf_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_warn_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_dang_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, $scope.buttons.visual_btn_data.vis_link_btn_data);
+            $('#visualButtonArea').append(html);
+        }
+
+        function sizeButtons() {
+            var size_button_tpl = $(modelTemplate).filter('#sizeButtons').html();
+
+            var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_small_btn_data);
+            $('#sizeButtonArea').html(html);
+
+            var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_large_btn_data);
+            $('#sizeButtonArea').append(html);
+
+            var html = Mustache.to_html(size_button_tpl, $scope.buttons.diffSize_btn_data.size_block_btn_data);
+            $('#sizeButtonArea').append(html);
+
+        }
+
+        function iconButtons() {
+            var icon_button_tpl = $(modelTemplate).filter('#iconButtons').html();
+
+            var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.search_icon_btn_data);
+            $('#iconButtonArea').html(html);
+
+            var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.search_icon_styled_btn_data);
+            $('#iconButtonArea').append(html);
+
+            var html = Mustache.to_html(icon_button_tpl, $scope.buttons.icon_btn_data.print_icon_btn_data);
+            $('#iconButtonArea').append(html);
+
+        }
+
+        $scope.defaultButtonsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("default buttons loading..");
+                defaultButtons();
+                return true;
+            }
+            console.log("default buttons not loading..");
+            return false;
+        }
+
+        $scope.visualButtonsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("visual buttons loading..");
+                visualButtons();
+                return true;
+            }
+            console.log("visual buttons not loading..");
+            return false;
+        }
+
+        $scope.sizeButtonsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("size buttons loading..");
+                sizeButtons();
+                return true;
+            }
+            console.log("size buttons not loading..");
+            return false;
+        }
+
+        $scope.iconButtonsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("icon buttons loading..");
+                iconButtons();
+                return true;
+            }
+            console.log("icon buttons not loading..");
+            return false;
+        }
+    })
+    /* Drop down----------------------*/
+    .controller("dropdownCtrl", function($scope, DataService) {
+        $scope.message = "You selected drop down";
+        $scope.subIsLoaded = function () {
+            if (modelTemplate != null) {
+                console.log("Loading..");
+                loadDrop();
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="dropdownData";
+            $scope.dropdownTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.dropdown = data.data;
+                    loadDrop();
+                });
+            DataService.getAllJSONData($scope.dropdownTip)
+                .then(function(data){
+                    $scope.dropdownTipData = data.data.dropdownTip;
+                    console.log("inside table");
+                });
+        }
+        function loadDrop() {
+            var drop_tpl = $(modelTemplate).filter('#dropDown').html();
+            var dropHeader_tpl = $(modelTemplate).filter('#dropDownHeader').html();
+            var dropSimple_tpl = $(modelTemplate).filter('#simpleDropdownTmpl').html();
+
+            var html = Mustache.to_html(drop_tpl, $scope.dropdown.dropped_down_data);
+            $('#dropArea').html(html);
+
+            var html = Mustache.to_html(drop_tpl, $scope.dropdown.dropped_up_data);
+            $('#dropAreaUP').html(html);
+
+            var html = Mustache.to_html(dropHeader_tpl, $scope.dropdown.dropHeader_data);
+            $('#dropAreaHeader').html(html);
+
+            var html = Mustache.to_html(dropSimple_tpl, $scope.dropdown.dropSimple_data);
+            $('#plainDropDown').html(html);
+
+        }
+    })
+    .controller("radioCtrl", function($scope, DataService, $log) {
+        $scope.message = "You selected radio button tab";
+        var lodedOnce = false;
+        $scope.subIsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+                loadRadioBtn();
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="radioData";
+            $scope.radioTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.radioButton = data.data;
+                    loadRadioBtn();
+                    console.log("inside button");
+                    $log.info(data);
+                });
+
+            DataService.getAllJSONData($scope.radioTip)
+                .then(function(data){
+                    $scope.radioTipData = data.data.radioTip;
+                    console.log("inside table");
+                });
+        }
+        function loadRadioBtn(){
+            console.log("lodedOnce : "+lodedOnce);
+
+            var radio_button_tpl = $(modelTemplate).filter('#radioButtons').html();
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_default_data);
+            $('#radioBtnArea').html(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_primary_data);
+            $('#radioBtnArea').append(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_success_data);
+            $('#radioBtnArea').append(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_danger_data);
+            $('#radioBtnArea').append(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_Warn_data);
+            $('#radioBtnArea').append(html);
+
+            var html = Mustache.to_html(radio_button_tpl, $scope.radioButton .radio_btn_info_data);
+            $('#radioBtnArea').append(html);
+
+        }
+    })
+    .controller("checkBoxCtrl", function($scope, DataService) {
+        $scope.message = "You selected checkbox tab";
+        $scope.subIsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+                loadCheckBox();
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+        $scope.init = function() {
+            $scope.param="checkboxData";
+            $scope.checkboxTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.checkBox = data.data;
+                    loadCheckBox();
+                });
+            DataService.getAllJSONData($scope.checkboxTip)
+                .then(function(data){
+                    $scope.checkboxTipData = data.data.checkboxTip;
+                    console.log("inside table");
+                });
+        }
+        function loadCheckBox() {
+            var check_box_tpl = $(modelTemplate).filter('#checkBoxes').html();
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_default_data);
+            $('#CheckBoxArea').html(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_primary_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_success_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_danger_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_warn_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, $scope.checkBox.checkbox_info_data);
+            $('#CheckBoxArea').append(html);
+
+            /*$.getJSON('./data/checkboxData.json', function(c_data) {
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_default_data);
+             $('#CheckBoxArea').html(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_primary_data);
+             $('#CheckBoxArea').append(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_success_data);
+             $('#CheckBoxArea').append(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_danger_data);
+             $('#CheckBoxArea').append(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_warn_data);
+             $('#CheckBoxArea').append(html);
+
+             var html = Mustache.to_html(check_box_tpl, c_data.checkbox_info_data);
+             $('#CheckBoxArea').append(html);
+             });*/
+        }
+    })
+
+    /* Reference Code -- Remove after use */
+    .controller("coursesCtrl", function($scope, DataService){
+        $scope.message = "Courses Offered";
+        $scope.courses = ["Java", "C/C++", "JavaScript", "AngularJS", "NodeJS", "HTML", "Python", "Action Script"];
+        $scope.showDialog = function() {
+            /*var dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+             var data = {'title':'Shahid Noor','showClose':true,'closeBtnTxt':'Cancel','icon':'glyphicon glyphicon-off','iconColor':'icon_warn','msg':'Good! There is a message that can be used to show on the screen. There is a message that can be used to show on the screen', buttons:[{"text": "Ok", 'action':'callThis()'},{"text": "Show"}]};
+             var html = Mustache.to_html(dialog_tpl, data);
+             $(html).modal({backdrop: "static"});   //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*/
+
+            var def_button_tpl = $(modelTemplate).filter('#visualButtons').html();
+            var def_btn_data = {'title':"asas", 'type':'primary'};
+            var html = Mustache.to_html(def_button_tpl, def_btn_data);
+            $('#sampleArea').html(html);
+        };
+
+        // $scope.$on('$viewContentLoaded', function(){
+        function loaded(){
+            console.log("Loaded..");
+            //Here your view content is fully loaded !!
+            var def_button_tpl = $(modelTemplate).filter('#dropDown').html();
+            var def_btn_data = {'title':'Shahid Noor','position':'down', items:[{"itemLabel": "Ok"},{"itemLabel": "Show"}]};
+            var html = Mustache.to_html(def_button_tpl, def_btn_data);
+            $('#sampleArea').html(html);
+
+        }
+        $scope.subIsLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+                loaded();
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+    })
+
+    .controller("toolCtrl", function($scope, DataService, $compile, $log){
+                 $scope.toolTip = "shortNote";
+                $scope.toolTipContent = "textArea";
+
+            DataService.getAllJSONData($scope.toolTipContent)
+            .then(function(data){
+                $log.info(data.data.Note.placement);
+                $scope.noteContent = data.data.Note.message;
+                $scope.notePlacement = data.data.Note.placement;
+                $scope.textareaContent = data.data;
+                console.log($scope.noteContent + " " + $scope.notePlacement);
+                loadTextArea();
+            });
+            DataService.getAllJSONData($scope.toolTip)
+                .then(function(data){
+                    $scope.toolTipData = data.data.toolTip;
+                    //loadTextArea();
+                });
+
+        //$('[data-toggle="popover"]').popover();
+
+
+
+        function loadTextArea() {
+            var text = $(modelTemplate).filter('#textfield').html();
+            var email = $(modelTemplate).filter('#email').html();
+            var url = $(modelTemplate).filter('#url').html();
+            var password = $(modelTemplate).filter('#password').html();
+            var numeric = $(modelTemplate).filter('#numeric').html();
+            var dot = $(modelTemplate).filter('#dot').html();
+            var dateinput = $(modelTemplate).filter('#dateinput').html();
+            var monthinput = $(modelTemplate).filter('#monthinput').html();
+            var weekinput = $(modelTemplate).filter('#weekinput').html();
+            var timeinput = $(modelTemplate).filter('#timeinput').html();
+            var ipv4 = $(modelTemplate).filter('#ipv4').html();
+            var ipv6 = $(modelTemplate).filter('#ipv6').html();
+            var textarea = $(modelTemplate).filter('#textarea').html();
+
+            var note = $(modelTemplate).filter('#note').html();
+
+            var html = Mustache.to_html(text, $scope.textareaContent.Textbox);
+            $('#fname').html($compile(html)($scope));
+
+            var html = Mustache.to_html(email, $scope.textareaContent.Email);
+            $('#email').html($compile(html)($scope));
+
+            var html = Mustache.to_html(url, $scope.textareaContent.Url);
+            $('#url').html($compile(html)($scope));
+
+            var html = Mustache.to_html(password, $scope.textareaContent.Password);
+            $('#password').html($compile(html)($scope));
+
+
+            var html = Mustache.to_html(numeric, $scope.textareaContent.Number);
+            $('#numeric').html($compile(html)($scope));
+
+
+            var html = Mustache.to_html(dot, $scope.textareaContent.Datetime);
+            $('#dot').html($compile(html)($scope));
+
+            var html = Mustache.to_html(dateinput, $scope.textareaContent.Date);
+            $('#dateinput').html($compile(html)($scope));
+
+            var html = Mustache.to_html(monthinput, $scope.textareaContent.Month);
+            $('#monthinput').html($compile(html)($scope));
+
+            var html = Mustache.to_html(weekinput, $scope.textareaContent.Week);
+            $('#weekinput').html($compile(html)($scope));
+
+            var html = Mustache.to_html(timeinput, $scope.textareaContent.Time);
+            $('#timeinput').html($compile(html)($scope));
+
+
+            var html = Mustache.to_html(ipv4, $scope.textareaContent.Ipv4);
+            $('#ipv4').html($compile(html)($scope));
+
+            var html = Mustache.to_html(ipv6, $scope.textareaContent.Ipv6);
+            $('#ipv6').html($compile(html)($scope));
+
+            var html = Mustache.to_html(textarea, $scope.textareaContent.TextArea);
+            $('#textarea').html($compile(html)($scope));
+
+
+
+            var html = Mustache.to_html(note, {"placement":$scope.notePlacement});
+            $('#note').html(html);
+            $("#noteanchor").popover({
+                template: '<div class="popover fade bottom in customPopover"><div class="arrow"></div>'+$scope.noteContent+'</div>'
+            });
+
+            $scope.validatetextbox = function (value){
+               if($scope.textbox) {
+                    $scope.textboxErr = false;
+                }
+                else
+                    $scope.textboxErr = true;
+
+            }
+            $scope.validateemail = function (value){
+                if($scope.email) {
+                    $scope.emailErr = false;
+                }
+                else
+                    $scope.emailErr = true;
+
+            }
+            $scope.validateurl = function (value){
+                if($scope.url) {
+                    $scope.urlErr = false;
+                }
+                else
+                    $scope.urlErr = true;
+
+            }
+            $scope.validatepassword = function (value){
+                if($scope.password) {
+                    $scope.passwordErr = false;
+                }
+                else
+                    $scope.passwordErr = true;
+
+            }
+            $scope.validatenumeric = function (value){
+                if($scope.number) {
+                    $scope.numericErr = false;
+                }
+                else
+                    $scope.numericErr = true;
+
+            }
+            $scope.validatedot = function (value){
+                if($scope.datetime) {
+                    $scope.dotErr = false;
+                }
+                else
+                    $scope.dotErr = true;
+
+            }
+            $scope.validatedateinput = function (value){
+                if($scope.date) {
+                    $scope.dateinputErr = false;
+                }
+                else
+                    $scope.dateinputErr = true;
+
+            }
+            $scope.validatemonthinput = function (value){
+                if($scope.month) {
+                    $scope.monthinputErr = false;
+                }
+                else
+                    $scope.monthinputErr = true;
+
+            }
+            $scope.validateweek = function (value){
+                if($scope.week) {
+                    $scope.weekinputErr = false;
+                }
+                else
+                    $scope.weekinputErr = true;
+
+            }
+            $scope.validatetime = function (value){
+                if($scope.time) {
+                    $scope.timeinputErr = false;
+                }
+                else
+                    $scope.timeinputErr = true;
+
+            }
+            $scope.validateipv4 = function (value){
+                if($scope.ipv4) {
+                    $scope.ipv4Err = false;
+                }
+                else
+                    $scope.ipv4Err = true;
+
+            }
+            $scope.validateipv6 = function (value){
+                if($scope.ipv6) {
+                    $scope.ipv6Err = false;
+                }
+                else
+                    $scope.ipv6Err = true;
+
+            }
+
+            $scope.validatetextarea = function (value){
+                if($scope.textarea) {
+                    $scope.textareaErr = false;
+                }
+                else
+                    $scope.textareaErr = true;
+
+            }
+
+
+
+        }
+
+
+    })
+
+    .controller("notificationCtrl", function($scope, DataService){
+        $scope.message = "Notification and Messages";
+        $scope.notificationTip = "shortNote";
+
+        var dialog_tpl;
+        $scope.templateLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+        $scope.init = function() {
+            $scope.param="notificationData";
+            $scope.notificationTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.notification = data.data;
+                });
+            DataService.getAllJSONData($scope.notificationTip)
+                .then(function(data){
+                    $scope.notificationTipData = data.data.notificationTip;
+                });
+        }
+
+        $scope.showError = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.err_data);
+            $(html).modal({backdrop: "static"});//backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!
+        }
+
+        $scope.showWarning = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.warn_data);
+            $(html).modal();
+        }
+
+        $scope.showInfo = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.info_data);
+            $(html).modal();
+        }
+        $scope.showConfirm = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.notification.confirm_data);
+            $(html).modal({backdrop: "static"});   //backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!/
+        }
+
+    })
+
+    .controller("functionalCtrl", function($scope, DataService, $compile){
+        $scope.message = "Functional Flow";
+
+        var dialog_tpl;
+        $scope.templateLoaded  = function() {
+            if(modelTemplate != null) {
+                console.log("Loading..");
+
+                return true;
+            }
+            console.log("Not Loaded..");
+            return false;
+        }
+
+        $scope.init = function() {
+            $scope.param="functionalData";
+            $scope.functionalTip="shortNote";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.functional = data.data;
+                    addButtons();
+                });
+            DataService.getAllJSONData($scope.functionalTip)
+                .then(function(data){
+                    $scope.functionalTipData = data.data.functionalTip;
+                });
+        }
+        function addButtons() {
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+            var def_iconbutton_tpl = $(modelTemplate).filter('#defaultIconButtons').html();
+            var add_data = {"title":"Create", "type":"btn btn-default", "gType": "plus-icon", "iconPosition":"left", "clickAction":"showCreate()"};
+            var edit_data={"title":"Modify", "type":"btn btn-default", "gType": "edit-icon", "iconPosition":"left", "clickAction":"showModify()"};
+            var delete_data = {"title":"Delete", "type":"btn btn-default", "gType": "delete-icon", "iconPosition":"left", "clickAction":"showDelete()"};
+            var workflow_data = {"title":"WorkFlow", "type":"btn btn-default", "clickAction":"showWorkflow()"};
+            var addhtml = Mustache.to_html(def_iconbutton_tpl, add_data);
+            var edithtml = Mustache.to_html(def_iconbutton_tpl, edit_data);
+            var deletehtml = Mustache.to_html(def_iconbutton_tpl, delete_data);
+            var workflowhtml = Mustache.to_html(def_button_tpl, workflow_data);
+            $('#functionalArea #buttonArea').html($compile(addhtml)($scope));
+            $('#functionalArea #buttonArea').append($compile(edithtml)($scope));
+            $('#functionalArea #buttonArea').append($compile(deletehtml)($scope));
+            $('#functionalArea #buttonArea').append($compile(workflowhtml)($scope));
+        }
+
+        $scope.showCreate = function() {
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.create_data);
+            $(html).modal();
+        }
+        $scope.showModify = function() {
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.modify_data);
+            $(html).modal();
+        }
+        $scope.showDelete = function() {
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.delete_data);
+            $(html).modal();
+        }
+        $scope.showWorkflow = function() {
+            dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+            var html = Mustache.to_html(dialog_tpl, $scope.functional.workflow_data);
+            $(html).modal();
+        }
+    })
+
+    .controller("listCtrl", function($scope, $log, DataService){
+        $scope.message = "List Page";
+        $scope.listTip = "shortNote";
+        $scope.init = function() {
+            console.log("Shahid... ng-init");
+            $scope.param="list";
+            DataService.getAllJSONData($scope.param)
+                .then(function(data){
+                    $scope.mainlistItem = data.data;
+                }, function(reason){
+                    $scope.portfolios = [];
+
+                });
+
+            DataService.getAllJSONData($scope.listTip)
+                .then(function(data){
+                    $scope.listTipData = data.data.listTip;
+                });
+        }
+        $scope.loadSubMenuPage = function(index) {
+            $log.info($scope.mainlistItem);
+            $scope.subMenuListItem = $scope.mainlistItem[index].subMenu;
+            $scope.subsubMenuListItem = [];
+        }
+        $scope.loadSubSubMenuPage = function(index) {
+            $log.info($scope.subMenuListItem);
+            console.log("index: "+index);
+            $scope.subsubMenuListItem = $scope.subMenuListItem[index].subsubMenu;
+        }
+    })
+
+    .controller("managementCtrl", function($scope, $log, DataService, $state, $compile, NgTableParams){
+        $scope.message = "Management";
+        $scope.provinceTip = "shortNote";
+        /*$scope.provinceData = [
+            {id:1, province_name:'First', ip:'192.168.1.45', port:'8080'},
+            {id:2, province_name:'Second', ip:'192.168.1.5', port:'8081'},
+            {id:3, province_name:'Third', ip:'192.168.1.15', port:'8082'},
+            {id:4, province_name:'Fourth', ip:'192.168.1.28', port:'8083'},
+            {id:5, province_name:'Fifth', ip:'192.168.1.19', port:'8084'}
+        ];*/
+
+        $scope.init = function() {
+            //console.log("Shahid... ng-init");
+            DataService.getAllProvinceData()
+                .then(function(data){
+                    $scope.provinceData = data.provinceData;
+                    console.log("Data: ");
+                    loadButtons();
+                    $log.info(data.provinceData);
+                }, function(reason){
+                    $scope.message = "Error is :" + JSON.stringify(reason);
+                });
+
+            DataService.getAllJSONData($scope.provinceTip)
+                .then(function(data){
+                    $scope.provinceTipData = data.data.provinceTip;
+                });
+        }
+
+        /*DataService.getAllProvinceData()
+            .then(function(data){
+                $scope.provinceData = data.provinceData;
+                console.log("Data: ");
+                $log.info(data.provinceData);
+            }, function(reason){
+                $scope.message = "Error is :" + JSON.stringify(reason);
+            });*/
+        /*DataService.getAllData($scope.provinceTip)
+            .then(function(data){
+                $scope.provinceTipData = data.provinceTip;
+            });*/
+
+        function loadButtons() {
+            /*console.log("modelTemplate in ProvinceMgmt is :"+modelTemplate);
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+            var dialog = $(modelTemplate).filter('#dialog').html();
+            var add_data = {"title":"Add", "clickAction":"showAddModal()"};
+            var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};
+            var addhtml = Mustache.to_html(def_button_tpl, add_data);
+            var deletehtml = Mustache.to_html(def_button_tpl, delete_data);
+            $('#provinceAction').html($compile(addhtml)($scope));
+            $('#provinceAction').append($compile(deletehtml)($scope));*/
+            console.log("modelTemplate in ProvinceMgmt is :"+modelTemplate);
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+            var def_iconbutton_tpl = $(modelTemplate).filter('#defaultIconButtons').html();
+            var dialog = $(modelTemplate).filter('#dialog').html();
+            /*var add_data = {"title":"Add", "clickAction":"showAddModal()"};*/
+            var add_data = {"title":"Create", "type":"btn btn-default", "gType": "plus-icon", "iconPosition":"left", "clickAction":"showAddModal()"};
+            /*var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};*/
+            var delete_data = {"title":"Delete Selected", "type":"btn btn-default", "gType": "delete-icon", "iconPosition":"left", "clickAction":"deleteData()"};
+            var addhtml = Mustache.to_html(def_iconbutton_tpl, add_data);
+            var deletehtml = Mustache.to_html(def_iconbutton_tpl, delete_data);
+            $('#provinceAction').html($compile(addhtml)($scope));
+
+            //$('#provinceAction #iconBtn').append('<img src="thirdparty/images/add.png" height="15" hspace="5" vertical-align="left"/>');
+
+            $('#provinceAction').append($compile(deletehtml)($scope));
+            //$('#provinceAction #iconBtn').append('<img src="thirdparty/images/delete.png" height="15" hspace="5" vertical-align="left"/>');
+            $('#managementDialog').html($compile(dialog)($scope));
+
+            $scope.checkboxes = { 'checked': false, items: {} };
+
+            //var data = [{id: 1, name: "Moroni", age: 50}, {id: 2, name: "ABC", age: 30}, {id: 3, name: "Morhoni", age: 10}, {id: 4, name: "DABC", age: 31}, {id: 5, name: "Noor", age: 30}, {id: 6, name: "ABCD", age: 40}, {id: 7, name: "DABC", age: 31}, {id: 8, name: "Noor", age: 30}, {id: 9, name: "ABCD", age: 40}, {id: 10, name: "DABC", age: 31}, {id: 11, name: "Noor", age: 30}, {id: 12, name: "ABCD", age: 40}];
+            $scope.tableParams = new NgTableParams({count: 5, sorting: {province_name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}
+            }, { counts:[5, 10, 20, 50], dataset: $scope.provinceData});
+
+            $scope.$watch('checkboxes.checked', function(value) {
+                angular.forEach($scope.provinceData, function(item) {
+                    if (angular.isDefined(item.id)) {
+                        $scope.checkboxes.items[item.id] = value;
+                    }
+                });
+            });
+
+            var text = $(modelTemplate).filter('#textfield').html();
+            var ipv4 = $(modelTemplate).filter('#ipv4').html();
+            var number = $(modelTemplate).filter('#numeric').html();
+
+            $('#managementDialog .modalHeader').html('<h5 class="modal-title titlestyle">Modal Header</h5>');
+            $('#managementDialog .modalBodyContent').html('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">Name</label> <div class="col-xs-8 provinceName" > </div> </div>');
+            $('#managementDialog .modalBodyContent').append('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">IP Address</label> <div class="col-xs-8 ipAddress" > </div> </div>');
+            $('#managementDialog .modalBodyContent').append(' <div class="form-group row"> <label for="port" class="col-xs-4 col-form-label labelstyle">Port</label> <div class="col-xs-8 port" > </div> </div>');
+
+
+
+
+            var dataText = {"ErrMsg" :     {"errmsg" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name", "errtag":"ptextboxErr", "errfunc":"validatetextbox"}};
+            $('#managementDialog .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));
+
+
+
+            var dataIP = {"ErrMsg" :     {"errmsg" : "Please input IP Address.", "modalVar":"province.ip", "placeholder":"IP Address", "errtag":"pipv4Err", "errfunc":"validateipv4"}};
+            $('#managementDialog .ipAddress').html($compile(Mustache.to_html(ipv4, dataIP.ErrMsg))($scope));
+
+            var dataNum = {"ErrMsg" :     {"errmsg" : "Please input port.", "modalVar":"province.port", "placeholder":"Port", "errtag":"pnumericErr", "errfunc":"validatenumeric"}};
+            $('#managementDialog .port').html($compile(Mustache.to_html(number, dataNum.ErrMsg))($scope));
+
+            var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"};
+            var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);
+            $('#managementDialog #footerBtns').html($compile(modelSubmit_html)($scope));
+
+            var modelDelete_data = {"title":"Cancel", "clickAction":"closeModal()"};
+            var modelDelete_html = Mustache.to_html(def_button_tpl, modelDelete_data);
+            $('#managementDialog #footerBtns').append($compile(modelDelete_html)($scope));
+        }
+
+        $scope.validatetextbox = function (value){
+            if($scope.province.province_name) {
+                $scope.ptextboxErr = false;
+            }
+            else
+                $scope.ptextboxErr = true;
+        }
+
+
+
+        $scope.validateipv4 = function (value){
+            if($scope.province.ip) {
+                $scope.pipv4Err = false;
+            }
+            else
+                $scope.pipv4Err = true;
+        }
+        $scope.validatenumeric = function (value){
+            if($scope.province.port) {
+                $scope.pnumericErr = false;
+            }
+            else
+                $scope.pnumericErr = true;
+        }
+
+        $scope.closeModal = function() {
+            console.log("Closing Modal...");
+            $('#uniModal').modal('hide');
+        }
+
+
+        $scope.checkAll = function() {
+            console.log("Checked ..");
+            angular.forEach($scope.provinceData, function(data) {
+                //data.select = $scope.selectAll;
+                $scope.checkboxes.items[user.id]
+            });
+        };
+
+        $scope.showAddModal = function() {
+            console.log("Showing Modal to Add data");
+            $scope.province = {};
+            $scope.textboxErr = false;
+            $scope.ipv4Err = false;
+            $scope.numericErr = false;
+            //$("#myModal").modal();
+            $("#uniModal").modal({}).draggable();
+        }
+        $scope.saveData = function(id) {
+            if(id) {
+                //edit data
+                console.log("Editing data.." + JSON.stringify($scope.province));
+                DataService.editProvinceData($scope.province)
+                    .then(function (data) {
+                            $scope.message = "Success :-)";
+                            $state.reload();
+                            //$state.go($state.current.name, {}, {reload: true})
+                        },
+                        function (reason) {
+                            //$log.info(reason);
+                            $scope.message = reason.status + " " + reason.statusText;
+                        });
+            }
+            else {
+                console.log("Adding data.." + JSON.stringify($scope.province));
+                DataService.addProvinceData($scope.province)
+                    .then(function (data) {
+                            $scope.message = "Success :-)";
+                            $state.reload();
+                            //$state.go($state.current.name, {}, {reload: true})
+                        },
+                        function (reason) {
+                            //$log.info(reason);
+                            $scope.message = reason.status + " " + reason.statusText;
+                        });
+            }
+            $('#uniModal').modal('hide');
+        }
+
+        /*$scope.deleteData = function() {
+            var deleteArr = [];
+            //$log.info($scope.checkboxes);
+            angular.forEach($scope.checkboxes.items, function(value , key) {
+                //$log.info(data);
+                if(value) {
+                    deleteArr.push(key);
+                }
+            });
+
+            console.log("To be deleted : "+deleteArr);
+            //$log.info(deleteArr);
+            DataService.deleteProvinceData(deleteArr)
+                .then(function(data){
+                        $scope.message = "Successfully deleted :-)";
+                        $state.reload();
+                    },
+                    function(reason){
+                        //$log.info(reason);
+                        $scope.message = reason.status + " " + reason.statusText;
+                    });
+        }*/
+
+        $scope.deleteIndividualData = function(id) {
+            var deleteArr = [];
+            //$log.info($scope.checkboxes);
+            deleteArr.push(id);
+
+            console.log("To be deleted : "+deleteArr);
+            //$log.info(deleteArr);
+
+
+            DataService.deleteProvinceData(deleteArr)
+                .then(function(data){
+                        $scope.message = "Successfully deleted :-)";
+                        $state.reload();
+                    },
+                    function(reason){
+                        //$log.info(reason);
+                        $scope.message = reason.status + " " + reason.statusText;
+                    });
+        }
+        $scope.deleteData = function(id) {
+            var confirmation=false;
+            var dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var error = {"err_data" : { "title": "Error",
+                "showClose": "true",
+                "closeBtnTxt": "Cancel",
+                "icon": "glyphicon glyphicon-exclamation-sign",
+                "iconColor": "icon_error",
+                "msg": "Do you really wanted to Delete?.",
+                "buttons": [
+                    {
+                        "text": "OK", "action": "deleteConfirmation("+id+")"
+                    }]
+            }};
+            var html = Mustache.to_html(dialog_tpl, error.err_data);
+            $($compile(html)($scope)).modal({backdrop: "static"});
+        }
+
+        $scope.deleteConfirmation = function(id) {
+            console.log("data in province data is :");
+            $log.info($scope.provinceData);
+            var deleteArr = [];
+            if (typeof id !== "undefined"){
+
+                deleteArr.push(id);
+            }else{
+                angular.forEach($scope.checkboxes.items, function (value, key) {
+                    if (value) {
+                        console.log("deleting name is :" + key);
+                        deleteArr.push(key);
+                    }
+                });
+
+            }
+
+            console.log("To be deleted : " + deleteArr);
+            DataService.deleteProvinceData(deleteArr)
+                .then(function (data) {
+                        $scope.message = "Successfully deleted :-)";
+                        $state.reload();
+                    },
+                    function (reason) {
+                        $scope.message = reason.status + " " + reason.statusText;
+                    });
+        }
+
+        $scope.editData = function(id) {
+            $scope.textboxErr = false;
+            $scope.ipv4Err = false;
+            $scope.numericErr = false;
+            console.log("To be edited : " + id);
+            var dataFound = false;
+            angular.forEach($scope.provinceData, function(data) {
+                if(!dataFound) {
+                    if (data.id == id) {
+                        console.log("Found : " + data.id);
+                        $scope.province = data;
+                        /*$scope.province.province_name = data.province_name;
+                        $scope.province.ip = data.ip;
+                        $scope.province.port = data.port;*/
+
+                        $("#uniModal").modal();
+                        dataFound = true;
+                    }
+                }
+            });
+        }
+
+    })
+
+/*var modelTemplate;
+function loadTemplate() {
+    $.get('template.html', function(template) {
+        modelTemplate = template;
+    });
+}*/
+
+var modelTemplate = "";
+function loadTemplate() {
+    $.get('/framework/template.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('/framework/templateContainer.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('/framework/templateWidget.html', function (template) {
+        //console.log("Template is : "+template);
+        modelTemplate += template;
+    });
+    $.get('/framework/templateNotification.html', function (template) {
+        modelTemplate += template;
+    });
+    $.get('/framework/templateFunctional.html', function (template) {
+        modelTemplate += template;
+    });
+}
+
+function callThis() {
+    alert("Going Great!");
+}
+
+function searchTable() {
+    var filter, table, tr, td;
+    filter = $("#myInput").val().toUpperCase();
+    table = $("#myTable_search");
+    tr = $("#myTable_search tr");
+
+    // Loop through all table rows, and hide those who don't match the search query
+    for (var i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[0];
+        if (td) {
+            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+                tr[i].style.display = "";
+            } else {
+                tr[i].style.display = "none";
+            }
+        }
+    }
+}
+
+function linkClicked(state) {
+    console.log("State to : " + state);
+}
+\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/browser/js/rest.js b/common/src/main/webapp/usageguide/browser/js/rest.js
new file mode 100644
index 00000000..a9637926
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/js/rest.js
@@ -0,0 +1,150 @@
+/*
+
+    Copyright 2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+*/
+
+
+
+app.factory("DataService", function($http, $log){
+    return {
+        /*getAllData: function (value) {
+            //var value = $scope.param;
+            return $http({
+                url: 'http://localhost:8080/POC_NodeToServletPorting_Server/?widgetType=' + value,
+                headers: {'Content-Type': 'application/json'},
+                method: 'GET'
+            }).then(function (response) {
+                $log.info(response.data);
+                return response.data;
+            })
+        },*/
+        getAllJSONData : function(wdgtType) {
+            return $http({
+                url: 'http://localhost:4000/api/getAllJSONData',
+                method: 'POST',
+                data: {"wdgtType":wdgtType},
+                headers: {'Content-Type': 'application/json '}
+            }).then(function(response){
+                console.log("Response : ");
+                $log.info(response.data);
+                return response.data;
+            });
+        },
+        getAllProvinceData : function() {
+            return $http({
+                url: 'http://localhost:4000/api/getAllProvinceData',
+                method: 'GET',
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                //$log.info(response);
+                return response.data;
+            });
+        },
+        addProvinceData : function(provinceDetail) {
+            return $http({
+                url: 'http://localhost:4000/api/addProvinceData',
+                method: 'POST',
+                data: provinceDetail,
+                headers: {'Content-Type': 'application/json '}
+            }).then(function(response){
+                console.log("Response : ");
+                $log.info(response.data);
+                return response.data;
+            });
+        },
+        deleteProvinceData : function(idList) {
+            return $http({
+                url: 'http://localhost:4000/api/deleteProvinceData',
+                method: 'POST',
+                data: {'idList':idList},
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                console.log("Successfully Deleted..");
+                $log.info(response);
+                return response.data;
+            });
+        },
+        editProvinceData : function(provinceDetail) {
+            return $http({
+                url: 'http://localhost:4000/api/editProvinceData',
+                method: 'POST',
+                data: provinceDetail,
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                console.log("Successfully Edited...");
+                $log.info(response);
+                return response.data;
+            });
+        }
+    }
+});
+
+app.factory('LoginService', function($http, $log) {
+    var admin = 'admin';
+    var pass = 'pass';
+    var isAuthenticated = false;
+
+    return {
+        login : function(user) {
+            console.log(user);
+            return $http({
+                url: 'http://localhost:8081/api/signin',//http://192.168.4.161:3000/api/login
+                method: 'POST',
+                data: {'name':user.username, 'pswd':user.password},
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                $log.info(response);
+                if(response.status == 200) {
+                    console.log("Success");
+                    //Success
+                    isAuthenticated = true;
+                }
+                else {
+                    console.log("Fail");
+                    isAuthenticated = false;
+                }
+                console.log("isAuthenticated: " + isAuthenticated);
+                return isAuthenticated;
+            }, function(reason){
+                $log.info(reason);
+                console.log("Fail");
+                isAuthenticated = false;
+                return reason;
+            });
+            /*isAuthenticated = user.username === admin && user.password === pass;
+            return isAuthenticated;*/
+        },
+        isAuthenticated : function() {
+            return isAuthenticated;
+        },
+        registerUser: function(user){
+            console.log("New Registration: " + JSON.stringify(user));
+            return $http({
+                url: 'http://localhost:8081/api/signup',//http://192.168.4.161:3000/api/login
+                method: 'POST',
+                data: {'name':user.username, 'pswd':user.password, 'email':user.email},
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                $log.info(response);
+            },function(reason){
+                $log.info(reason);
+            });
+
+
+        }
+    };
+
+});
+\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/browser/templates/accordion.html b/common/src/main/webapp/usageguide/browser/templates/accordion.html
new file mode 100644
index 00000000..e081c0f8
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/accordion.html
@@ -0,0 +1,46 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<div id="accordionArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()"><!--ng-if="accordionLoaded()"-->
+    <h4>Accordion</h4>
+    <div class="panel-group" id="accordion"></div>
+    <div class="shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">Create a div tag  in html file with specific id  for example accordionArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+        <br>
+        <div>HTML file:</div>
+        <pre><code>&ltdiv id="accordionArea" ng-init="init()"&gt&lt/div&gt</code></pre>
+        <br>
+        <div>Javascript file:</div>
+        <pre><code>
+        var data ={"accordion_data": {"items": [{"tabId": "tab1","header": "Tab1","isActive": true,
+        "msg": "This is in Collapsible Group 1 and this attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown."};
+
+        $scope.init = function() {
+             accordion();
+        }
+
+        function accordion() {
+            var accordion_tpl = $(modelTemplate).filter('#accordion').html();
+            var html = Mustache.to_html(accordion_tpl, data.accordion_data);
+            $('#accordion').html(html);
+        }</code></pre>
+
+        </div>
+    </div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/buttons.html b/common/src/main/webapp/usageguide/browser/templates/buttons.html
new file mode 100644
index 00000000..6261d5a2
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/buttons.html
@@ -0,0 +1,130 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<h4>Types of Buttons</h4>
+
+<div id="buttonArea" ng-init="init()">
+    <h3> Default Buttons</h3>
+    <div id="defaultButtonArea"></div>
+    <h3>Visual Buttons</h3>
+    <div id="visualButtonArea"></div>
+    <h3>Different Sized Buttons</h3>
+    <div id="sizeButtonArea"></div>
+    <h3>Icon Buttons</h3>
+    <div id="iconButtonArea"></div>
+
+</div>
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">Create a div tag  in html file with specific id  for example defaultButtonArea,visualButtonArea, sizeButtonArea,iconButtonArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+    <br>
+    <div>HTML file:</div>
+    <pre><code>&ltdiv id="buttonArea" ng-init="init()"&gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="defaultButtonArea" &gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="visualButtonArea" &gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="sizeButtonArea" &gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="iconButtonArea" &gt&lt/div&gt</code></pre>
+    <br>
+    <div>Javascript file:</div>
+    <pre><code>
+       var data ={"default_btn_data" : {"def_button" : {"title":"Default"},"def_print_button" : {"title":"Print", "type":"btn btn-default", "gType": "glyphicon-print", "iconPosition":"left"},"def_print_button_right" : {"title":"Search", "type":"btn btn-default", "gType": "glyphicon-search", "iconPosition":"right"}},"visual_btn_data" : { "vis_pri_btn_data" : {"title":"Primary", "type":"primary"},"vis_sec_btn_data" : {"title":"Secondary", "type":"secondary"},"vis_succ_btn_data" : {"title":"Success", "type":"success"},"vis_inf_btn_data" : {"title":"Info", "type":"info"},"vis_warn_btn_data" : {"title":"Warning", "type":"warning"},"vis_dang_btn_data" : {"title":"Danger", "type":"danger"},"vis_link_btn_data" : {"title":"Link", "type":"link"}},"diffSize_btn_data" : {"size_small_btn_data" : {"title": "Small Button", "type": "primary", "size": "btn-sm"},"size_large_btn_data" : {"title": "Large Button", "type": "primary", "size": "btn-lg"},"size_block_btn_data" : {"title": "Large Block Button", "type": "primary", "size": "btn-lg btn-block"}},"icon_btn_data" : {"search_icon_btn_data" : {"title": "Search Icon", "type": "btn-default", "gType": "glyphicon-search"},"search_icon_styled_btn_data" : {"title": "Styled Search Icon", "type": "primary", "gType": "glyphicon-search"},"print_icon_btn_data" : {"title": "Print", "type": "primary btn-lg", "gType": "glyphicon-print"}}};
+
+        $scope.init = function() {
+                    defaultButtons();
+                    visualButtons();
+                    sizeButtons();
+                    iconButtons();
+        }
+
+           function defaultButtons(){
+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+            var def_icon_button_tpl = $(modelTemplate).filter('#defaultIconButtons').html();
+
+            var html = Mustache.to_html(def_button_tpl, data.default_btn_data.def_button);
+            $('#defaultButtonArea').html(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button);
+            $('#defaultButtonArea').append(html);
+
+            var html = Mustache.to_html(def_icon_button_tpl, data.default_btn_data.def_print_button_right);
+            $('#defaultButtonArea').append(html);
+        }
+
+
+        function visualButtons(){
+
+            var visual_button_tpl = $(modelTemplate).filter('#visualButtons').html();
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_pri_btn_data);
+            $('#visualButtonArea').html(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_sec_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_succ_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_inf_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_warn_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_dang_btn_data);
+            $('#visualButtonArea').append(html);
+
+            var html = Mustache.to_html(visual_button_tpl, data.visual_btn_data.vis_link_btn_data);
+            $('#visualButtonArea').append(html);
+        }
+
+        function sizeButtons() {
+            var size_button_tpl = $(modelTemplate).filter('#sizeButtons').html();
+
+            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_small_btn_data);
+            $('#sizeButtonArea').html(html);
+
+            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_large_btn_data);
+            $('#sizeButtonArea').append(html);
+
+            var html = Mustache.to_html(size_button_tpl, data.diffSize_btn_data.size_block_btn_data);
+            $('#sizeButtonArea').append(html);
+
+        }
+
+        function iconButtons() {
+            var icon_button_tpl = $(modelTemplate).filter('#iconButtons').html();
+
+            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.search_icon_btn_data);
+            $('#iconButtonArea').html(html);
+
+            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.search_icon_styled_btn_data);
+            $('#iconButtonArea').append(html);
+
+            var html = Mustache.to_html(icon_button_tpl, data.icon_btn_data.print_icon_btn_data);
+            $('#iconButtonArea').append(html);
+
+        }</code></pre>
+
+
+
+
+    </div>
+</div>
+
+
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/checkBoxes.html b/common/src/main/webapp/usageguide/browser/templates/checkBoxes.html
new file mode 100644
index 00000000..aab3bfe1
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/checkBoxes.html
@@ -0,0 +1,60 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<h4>Checkboxes</h4>
+
+<div id="CheckBoxArea" class="funkyradio" ng-init="init()"></div>
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">Create a div tag  in html file with specific id  for example CheckBoxArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+    <br>
+    <div>HTML file:</div>
+    <pre><code>&ltdiv id="CheckBoxArea" ng-init="init()"&gt&lt/div&gt</code></pre>
+    <br>
+    <div>Javascript file:</div>
+    <pre><code>
+        var data ={"checkbox_default_data" : {"id":1, "label":"Default check box", "type":"default", "checked":true},"checkbox_primary_data" : {"id":2, "label":"Primary check box", "type":"primary", "checked":false},"checkbox_success_data" : {"id":3, "label":"Success check box", "type":"success", "checked":true},"checkbox_danger_data" : {"id":4, "label":"Error check box", "type":"danger", "checked":true},"checkbox_warn_data" : {"id":5, "label":"Warn check box", "type":"warning", "checked":false},"checkbox_info_data" : {"id":6, "label":"Info check box", "type":"info", "checked":true}};
+
+        $scope.init = function() {
+            loadCheckBox();
+        }
+
+         function loadCheckBox() {
+            var check_box_tpl = $(modelTemplate).filter('#checkBoxes').html();
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_default_data);
+            $('#CheckBoxArea').html(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_primary_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_success_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_danger_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_warn_data);
+            $('#CheckBoxArea').append(html);
+
+            var html = Mustache.to_html(check_box_tpl, data.checkbox_info_data);
+            $('#CheckBoxArea').append(html);
+        }</code></pre>
+
+</div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/courses.html b/common/src/main/webapp/usageguide/browser/templates/courses.html
new file mode 100644
index 00000000..34dde6c3
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/courses.html
@@ -0,0 +1,32 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+
+<h1>{{message}}</h1>
+<ul  ng-repeat="course in courses | orderBy : course : false">
+    <li>{{course}}</li>
+</ul>
+<button ng-click="showDialog()">Test</button>
+
+<!--<a ui-sref=".list">List</a>
+<a ui-sref=".details">Paragraph</a>
+
+<div ui-view></div>-->
+
+
+<div id="sampleArea" ng-if="subIsLoaded()"></div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/dropdown.html b/common/src/main/webapp/usageguide/browser/templates/dropdown.html
new file mode 100644
index 00000000..cb974775
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/dropdown.html
@@ -0,0 +1,83 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+    <h4>Drop Down</h4>
+
+    <div id="dropdown" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">
+        <h3>Simple Dropdown</h3>
+        <div id="plainDropDown"></div>
+        <h3>Dropdown</h3>
+        <div id="dropArea" type="button"></div>
+        <h3>Dropup</h3>
+        <div id="dropAreaUP" type="button"></div>
+        <h3>Dropdown Header</h3>
+        <div id="dropAreaHeader" type="button"></div>
+
+    </div>
+    <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">Create a div tag  in html file with specific id  for example plainDropDown,dropArea,dropAreaUP,dropAreaHeader and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+        <br>
+        <div>HTML file:</div>
+        <pre><code>&ltdiv id="dropdown" ng-init="init()"&gt&lt/div&gt</code></pre>
+        <pre><code>&ltdiv id="plainDropDown" &gt&lt/div&gt</code></pre>
+        <pre><code>&ltdiv id="dropArea" &gt&lt/div&gt</code></pre>
+        <pre><code>&ltdiv id="dropAreaUP" &gt&lt/div&gt</code></pre>
+        <pre><code>&ltdiv id="dropAreaHeader" &gt&lt/div&gt</code></pre>
+
+
+        <br>
+        <div>Javascript file:</div>
+        <pre><code>
+        var data ={"dropped_down_data" :{"title":"DropDown","position":"down", "items":[{"itemLabel": "Node JS"},{"itemLabel": "JS"}]},"dropped_up_data" :{"title":"DropUp","position":"up", "items":[{"itemLabel": "PHP"},{"itemLabel": "ASP"}]},"dropHeader_data" :{"title":"DropHeader","position":"down","items":[{"itemLabel": "Web UI", "isheader":true},{"itemLabel": "HTML", "isheader":false},{"itemLabel": "CSS", "isheader":false},{"itemLabel": "JS", "isheader":false},{"itemLabel": "Programming", "isheader":true},{"itemLabel": "C", "isheader":false},{"itemLabel": "C++", "isheader":false}]},"dropSimple_data" : {"title":"--PleaseSelect--","items":[{"itemLabel": "Cameras"},{"itemLabel": "Mobile Phones"},{"itemLabel": "Computers"},{"itemLabel": "Monitors"},{"itemLabel": "Tablets"},{"itemLabel": "Others"}]}};
+
+        $scope.init = function() {
+               loadDrop();
+        }
+
+         function loadDrop() {
+            var drop_tpl = $(modelTemplate).filter('#dropDown').html();
+            var dropHeader_tpl = $(modelTemplate).filter('#dropDownHeader').html();
+            var dropSimple_tpl = $(modelTemplate).filter('#simpleDropdownTmpl').html();
+
+            var html = Mustache.to_html(drop_tpl, data.dropped_down_data);
+            $('#dropArea').html(html);
+
+            var html = Mustache.to_html(drop_tpl, data.dropped_up_data);
+            $('#dropAreaUP').html(html);
+
+            var html = Mustache.to_html(dropHeader_tpl, data.dropHeader_data);
+            $('#dropAreaHeader').html(html);
+
+            var html = Mustache.to_html(dropSimple_tpl, data.dropSimple_data);
+            $('#plainDropDown').html(html);
+
+        }</code></pre>
+
+
+
+
+        </div>
+    </div>
+</div>
+
+
+
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/functional.html b/common/src/main/webapp/usageguide/browser/templates/functional.html
new file mode 100644
index 00000000..126deed7
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/functional.html
@@ -0,0 +1,48 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<h4>{{message}}</h4>
+
+<div id="functionalArea" ng-init="init()">
+    <!--<button type="button" class="btn btn-default" ng-click="showCreate()">Create</button>
+    <button type="button" class="btn btn-default" ng-click="showModify()">Modify</button>
+    <button type="button" class="btn btn-default" ng-click="showDelete()">Delete</button>
+    <button type="button" class="btn btn-default" ng-click="showWorkflow()">Workflow</button>-->
+    <div id="buttonArea"></div>
+    <div class="shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">Create a button in html file and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+        <br>
+        <div>HTML file:</div>
+        <pre><code>&ltbutton type="button" class="btn btn-default" ng-click="showCreate()"&gtCreate&lt/button&gt</code></pre>
+        <br>
+        <div>Javascript file:</div>
+        <pre><code>
+        var data={"create_data" : {"title":"Create", "labels":[{"text": "Username", "input_id":"username", "type":"text"},{"text": "Password", "input_id":"username", "type":"password"}], "showClose":"true","closeBtnTxt":"Cancel","msg":"This is Create dialog box", "buttons":[{"text": "Ok"}]}};
+
+        $scope.showCreate = function() {
+        dialog_tpl = $(modelTemplate).filter('#functionalDialog').html();
+        var html = Mustache.to_html(dialog_tpl, data.create_data);
+        $(html).modal();
+        } </code></pre>
+
+
+    </div>
+</div>
+
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/home.html b/common/src/main/webapp/usageguide/browser/templates/home.html
new file mode 100644
index 00000000..1f65dfa9
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/home.html
@@ -0,0 +1,159 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<div class="homecontent center" ng-init="loadTemplate()">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-4 col-md-3 col-lg-3 rmpadding">
+                <div id="menu_accordion" class="openoAccordian_accordionmenu">
+                    <div id="container" class="panel panel-default panelbr">
+                        <h5 class="panel-title">
+                            <a data-toggle="collapse" data-target="#panel1"><span>Container</span></a>
+                        </h5>
+                        <div id="panel1" class="panel-collapse collapse in">
+                            <ul>
+                                <li>
+                                    <a ui-sref=".tree" ui-sref-active="link_active">Tree</a>
+                                </li>
+                                <li>
+                                    <a ui-sref=".accordion" ui-sref-active="link_active">Accordion</a>
+                                </li>
+                                <li>
+                                    <a ui-sref=".tabs" ui-sref-active="link_active">Tabs</a>
+                                </li>
+                                <li>
+                                    <a ui-sref=".vtabs" ui-sref-active="link_active">Vertical Tab</a>
+                                </li>
+                                <li>
+                                    <a ui-sref=".table" ui-sref-active="link_active">Table</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div id="widgets" class="panel panel-default panelbr">
+                        <h5 class="panel-title">
+                            <a data-toggle="collapse" data-target="#panel2"><span>Widgets</span></a>
+                        </h5>
+                        <div id="panel2" class="panel-collapse collapse in">
+                            <li>
+                                <a ui-sref=".buttons" ui-sref-active="link_active">Buttons</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".dropdown" ui-sref-active="link_active">Drop Down</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".radiobuttons" ui-sref-active="link_active">Radio Button</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".checkboxes" ui-sref-active="link_active">Check Box</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".tooltip" ui-sref-active="link_active">Text Fields</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".list" ui-sref-active="link_active">List</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".provinceMgmt" ui-sref-active="link_active">Management</a>
+                            </li>
+                        </div>
+                    </div>
+                    <div id="notifications" class="panel panel-default panelbr">
+                        <h5 class="panel-title">
+                            <a data-toggle="collapse" data-target="#panel3"><span>Notifications</span></a>
+                        </h5>
+                        <div id="panel3" class="panel-collapse collapse in">
+                            <li>
+                                <a ui-sref=".notification" ui-sref-active="link_active">Notification & Messages</a>
+                            </li>
+                            <li>
+                                <a ui-sref=".labels" ui-sref-active="link_active">Labels</a>
+                            </li>
+                        </div>
+                    </div>
+                    <div id="functional" class="panel panel-default panelbr">
+                        <h5 class="panel-title">
+                            <a ui-sref=".functional" ui-sref-active="noChild_link_active">Functional Flow</a>
+
+                        </h5>
+                    </div>
+                </div>
+                <!--<div id="accordionmenuid" allow-resize="true" dataset="dataArr" height="resHeight"
+                     listeners="callBacklisteners" resize-callback="resizehandler"
+                     current-select="currentselect" click="clickHandler"
+                     class="ng-isolate-scope accordion_parent openo_accordion_main_menu">
+                    <div class="openo-accordion-resizable-handle" style="cursor: auto;"></div>
+                    <ul id="accordionmenuid_ul" class="openoAccordian_accordionmenu">
+                        <li id="accordionmenuid_ul_0_0_brAppTopMenuID" nodeid="brAppTopMenuID">
+                            &lt;!&ndash;<span class="openo_accordion_ui-icon-expand" style="padding-left: 20px;cursor: pointer;"></span>&ndash;&gt;
+                            <span class="openoAccordian_showHideArrow_hide" id="accordionmenuid_arrow" style="cursor: pointer;"></span>
+                            <a title="brApp" class="header opened" style="padding-left: 10px; cursor: pointer;">Container</a>
+                            <ul>
+                                <li nodeid="brAppSiteMenuID" class="" style="display: list-item;">
+                                    <a ui-sref=".tree" ui-sref-active="link_active" class="" style="padding-left: 62px;">Tree</a>
+                                </li>
+                                <li nodeid="brAppMeMenuID" style="display: list-item;">
+                                    <a ui-sref=".accordion" ui-sref-active="link_active" style="padding-left: 62px;">Accordian</a>
+                                </li>
+                                <li nodeid="brAppTpMenuID" style="display: list-item;">
+                                    <a ui-sref=".tabs" ui-sref-active="link_active" style="padding-left: 62px;">Tabs</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".vtabs" ui-sref-active="link_active" style="padding-left: 62px;">Vertical Tab</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".table" ui-sref-active="link_active" style="padding-left: 62px;">Table</a>
+                                </li>
+                            </ul>
+                            <a title="brApp" class="header opened" style="padding-left: 10px; cursor: pointer;">Widgets</a>
+                            <ul>
+                                <li nodeid="brAppSiteMenuID" class="" style="display: list-item;">
+                                    <a ui-sref=".buttons" ui-sref-active="link_active" style="padding-left: 62px;">Buttons</a>
+                                </li>
+                                <li nodeid="brAppMeMenuID" style="display: list-item;">
+                                    <a ui-sref=".dropdown" ui-sref-active="link_active" style="padding-left: 62px;">Drop Down</a>
+                                </li>
+                                <li nodeid="brAppTpMenuID" style="display: list-item;">
+                                    <a ui-sref=".radiobuttons" ui-sref-active="link_active" style="padding-left: 62px;">Radio Button</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".checkboxes" ui-sref-active="link_active" style="padding-left: 62px;">Check Box</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".tooltip" ui-sref-active="link_active" style="padding-left: 62px;">Tool Tip</a>
+                                </li>
+                                <li nodeid="brAppTlMenuID" style="display: list-item;">
+                                    <a ui-sref=".list" ui-sref-active="link_active" style="padding-left: 62px;">List</a>
+                                </li>
+                                </li>
+
+                            </ul>
+                            <a ui-sref=".notification" ui-sref-active="link_active" class="header opened" style="padding-left: 10px; cursor: pointer;">Notification & Messages</a>
+                            <a ui-sref=".functional" ui-sref-active="link_active" class="header opened" style="padding-left: 10px; cursor: pointer;">Functional Flow</a>
+
+                        </li>
+                    </ul>
+                </div>-->
+            </div>
+            <div id="rightContainer" class="col-sm-8 col-md-9 col-lg-9">
+                <!--<div id="sampleArea"></div>-->
+                <ui-view></ui-view>
+            </div>
+        </div>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/browser/templates/label.html b/common/src/main/webapp/usageguide/browser/templates/label.html
new file mode 100644
index 00000000..41282121
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/label.html
@@ -0,0 +1,94 @@
+
+
+<!--<h4>Header</h4>-->
+<div id="headerArea" class="header" ><!--ng-init="init()"-->
+    <!--<label class="titlestyle">Note</label>-->
+    <span class="labelHeader">OPEN-O</span>
+</div>
+
+<div class="titlestyle">
+    Info: This Header is using labelHeader as CSS
+</div>
+<br>
+<div>Use <b>labelHeader</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code>&ltspan class="labelHeader"&gtOPEN-O&lt/span&gt</code></pre>
+
+<br>
+<br>
+
+<div class="header" ><!--ng-init="init()"-->
+    <span class="labelTitle">OPEN-O</span>
+</div>
+
+<div class="titlestyle">
+    Info: This Title is using labelTitle as CSS
+</div>
+<br>
+<div>Use <b>labelTitle</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code>&ltspan class="labelTitle"&gtOPEN-O&lt/span&gt</code></pre>
+<br>
+<br>
+
+<!--<h5>Message</h5>-->
+<div id="messageArea" ><!--ng-init="init()"-->
+    <span class="message">OPEN-O</span>
+</div>
+<div class="titlestyle">
+    Info: This Message is using titlestyle as CSS
+</div>
+<br>
+<div>Use <b>message</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code>&ltspan class="message"&gtOPEN-O&lt/span&gt</code></pre>
+<br>
+<br>
+
+<!--<h5>Lables</h5>-->
+<div id="labelArea"  ><!--ng-init="init()"-->
+    <span class="labelstyle">OPEN-O</span>
+</div>
+<div class="titlestyle">
+    Info: This label is using labelstyle as CSS
+</div>
+<br>
+<div>Use <b>labelstyle</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code>&ltspan class="labelstyle"&gtOPEN-O&lt/span&gt</code></pre>
+<br>
+<br>
+
+<!--<h5>Note</h5>-->
+<div id="noteArea" ><!--ng-init="init()"-->
+    <span class="shortnoteText">OPEN-O</span>
+</div>
+<div class="titlestyle">
+    Info: This Note is using shortnoteText as CSS
+</div>
+<br>
+<div>Use <b>shortnoteText</b> class of open-ostye.css for all the message information</div>
+<br>
+<pre><code>&ltspan class="shortnoteText"&gtOPEN-O&lt/span&gt</code></pre>
+<br>
+<br>
+
+<!--
+<h2>Notes</h2>
+<div class="danger">
+    <p><strong>Danger!</strong> Some text...</p>
+</div>
+
+<div class="success">
+    <p><strong>Success!</strong> Some text...</p>
+</div>
+
+<div class="info">
+    <p><strong>Info!</strong> Some text...</p>
+</div>
+
+<div class="warning">
+    <p><strong>Warning!</strong> Some text...</p>
+</div>
+-->
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/list.html b/common/src/main/webapp/usageguide/browser/templates/list.html
new file mode 100644
index 00000000..6b4fb8a2
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/list.html
@@ -0,0 +1,93 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+    <h4>{{message}}</h4>
+
+    <div id="listArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">
+        <div id="list1" class="list col-sm-4 col-md-4 col-lg-4">
+            <div ng-repeat="item in mainlistItem">
+                <button type="button" class="btn btn-primary btn-block" ng-click="loadSubMenuPage($index)">{{item.title}}</button>
+            </div>
+        </div>
+        <div id="list2" class="list col-sm-4 col-md-4 col-lg-4">
+            <div ng-repeat="subitem in subMenuListItem">
+                <button type="button" class="btn btn-primary btn-block" ng-click="loadSubSubMenuPage($index)">{{subitem.title}}</button>
+            </div>
+        </div>
+        <div id="list3" class="list col-sm-4 col-md-4 col-lg-4">
+            <div ng-repeat="subsubitem in subsubMenuListItem">
+                <button type="button" class="btn btn-primary btn-block">{{subsubitem.title}}</button>
+            </div>
+        </div>
+
+    </div>
+
+    <!--    <test method='parentClick()'></test>-->
+    <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">Create a div tag  in html file with specific id  for example listArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+        <br>
+        <div>HTML file:</div>
+        <pre><code> &ltdiv id="listArea" ng-init="init()"&gt
+        &ltdiv id="list1"&gt
+            &ltdiv ng-repeat="item in mainlistItem"&gt
+                &ltbutton type="button" class="btn btn-primary btn-block" ng-click="loadSubMenuPage($index)"&gt&#123 &#123item.title&#125 &#125&lt/button&gt
+            &lt/div&gt
+        &lt/div&gt
+        &ltdiv id="list2"&gt
+            &ltdiv ng-repeat="subitem in subMenuListItem"&gt
+                &ltbutton type="button" class="btn btn-primary btn-block" ng-click="loadSubSubMenuPage($index)"&gt&#123 &#123subitem.title&#125 &#125&lt/button&gt
+            &lt/div&gt
+        &lt/div&gt
+        &ltdiv id="list3"&gt
+            &ltdiv ng-repeat="subsubitem in subsubMenuListItem"&gt
+                &ltbutton type="button" class="btn btn-primary btn-block"&gt&#123 &#123subsubitem.title&#125 &#125&lt/button&gt
+            &lt/div&gt
+        &lt/div&gt
+
+    &lt/div&gt</code></pre>
+        <br>
+        <div>Javascript file:</div>
+        <pre><code>
+        var data ={"id": "113","title": "Movies","subMenu": [{"title":"Sci-fi","subsubMenu":[{"title":"Intersteller"},{"title":"Inception"},{"title":"The Arrival"},
+            {"title":"The Paycheck"}]}};
+
+        $scope.init = function() {
+            $scope.mainlistItem = data;
+        }
+
+        $scope.loadSubMenuPage = function(index) {
+            $log.info($scope.mainlistItem);
+            $scope.subMenuListItem = $scope.mainlistItem[index].subMenu;
+            $scope.subsubMenuListItem = [];
+        }
+        $scope.loadSubSubMenuPage = function(index) {
+            $log.info($scope.subMenuListItem);
+            console.log("index: "+index);
+            $scope.subsubMenuListItem = $scope.subMenuListItem[index].subsubMenu;
+        }</code></pre>
+
+
+
+
+
+        </div>
+    </div>
+</div>
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/login.html b/common/src/main/webapp/usageguide/browser/templates/login.html
new file mode 100644
index 00000000..026b670d
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/login.html
@@ -0,0 +1,40 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<div class="col-sm-offset-3 col-sm-6 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
+    <h3>Login</h3>
+
+    <form ng-submit="formSubmit()" class="form">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+            <div class="form-group">
+                <input type="text" class="form-control" ng-model="user.username" placeholder="username" required=""/>
+            </div>
+
+            <div class="form-group">
+                <input type="password" class="form-control" ng-model="user.password" placeholder="password" required=""/>
+            </div>
+
+            <div class="form-group">
+                <button type="submit" class="btn btn-success">Login</button>
+                <span class="text-danger">{{ error }}</span>
+            </div>
+            <a ui-sref="register">Register</a>
+
+        </div>
+    </form>
+</div>
+\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/browser/templates/management.html b/common/src/main/webapp/usageguide/browser/templates/management.html
new file mode 100644
index 00000000..59d8e587
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/management.html
@@ -0,0 +1,173 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<h4>{{message}}</h4>
+<br><br>
+<div id="provinceAction" ng-init="init()">
+    <!--<button ng-click="showAddModal()" class="btnDefault pull-left">Add</button>-->
+    <!--<button ng-click="deleteData()" class="btnDefault pull-left prvdel">Delete Selected</button>-->
+</div>
+<br>
+<br>
+<!--<table id="provinceTable" class="table table-bordered table-striped">
+    <tr>
+        <th class="chkboxAlign"><input type="checkbox"  ng-model="selectAll" ng-click="checkAll()" /></th>
+        <th>Province Name</th>
+        <th>IP Address</th>
+        <th>Port</th>
+        <th></th>
+    </tr>
+    <tr ng-repeat="data in provinceData">
+        <td>
+            <input type="checkbox" ng-model="data.select">&lt;!&ndash;ng-true-value="'data.id'" ng-false-value="''"  ng-model="province.rows[$index]"&ndash;&gt;
+        </td>
+        <td class="tableAlign">{{data.province_name}}</td>
+        <td class="tableAlign">{{data.ip}}</td>
+        <td class="tableAlign">{{data.port}}</td>
+        <td>
+            <span class="pull-right glyphicon glyphicon-edit" ng-click="editData(data.id)" style="cursor: pointer;margin: 0 5px"></span>
+            <span class="pull-right glyphicon glyphicon-trash" ng-click="editData(data.id)" style="cursor: pointer;margin: 0 5px"></span>
+        </td>
+    </tr>
+</table>-->
+
+<table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+    <tr ng-repeat="provinceData in $data">
+        <td header="'ng-table/headers/checkbox.html'">
+            <input type="checkbox" ng-model="checkboxes.items[provinceData.id]" />
+        </td>
+        <td title="'Name'" filter="{ province_name: 'text'}" sortable="'province_name'">
+            {{provinceData.province_name}}
+        </td>
+        <td title="'IP Address'" filter="{ ip: 'text'}" sortable="'ip'">
+            {{provinceData.ip}}
+        </td>
+        <td title="'Port'" filter="{ port: 'number'}" sortable="'port'">
+            {{provinceData.port}}
+        </td>
+        <td title="'Action'">
+            <span  ng-click="editData(provinceData.id)" style="cursor: pointer;margin: 0 5px"> <img src="thirdparty/images/edit.png" height="15" align="left"/></span>
+            <span  ng-click="deleteIndividualData(provinceData.id)" style="cursor: pointer;margin: 0 5px"><img src="thirdparty/images/delete.png" height="15" align="middle"/></span>
+        </td>
+    </tr>
+</table>
+
+
+<script type="text/ng-template" id="ng-table/headers/checkbox.html">
+    <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />
+</script>
+
+<div id="myTable"></div>
+
+
+<!-- Modal
+<div id="myModal" class="modal fade" role="dialog">
+    <div class="modal-dialog">
+
+        &lt;!&ndash; Modal content&ndash;&gt;
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <h5 class="modal-title titlestyle">Modal Header</h5>
+            </div>
+            <form name="provinceForm" method="post">&lt;!&ndash; ng-submit="saveData(province.id)"&ndash;&gt;
+                <div class="modal-body">
+
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label labelstyle">Name</label>
+                        <div class="col-xs-8 provinceName" >
+                            &lt;!&ndash;<input class="form-control" ng-model="province.province_name" type="text" value="" placeholder="Province Name" id="pname" required><br>&ndash;&gt;
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label labelstyle">IP Address</label>
+                        <div class="col-xs-8 ipAddress" >
+                            &lt;!&ndash;<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>&ndash;&gt;
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label for="port" class="col-xs-4 col-form-label labelstyle">Port</label>
+                        <div class="col-xs-8 port" >
+                            &lt;!&ndash;<input class="form-control" ng-model="province.port" type="number" value="" placeholder="Port" id="port"  required>&ndash;&gt;
+
+                        </div>
+                    </div>
+
+                    &lt;!&ndash;<input type="submit" class="btn btn-default" value="validate"/>&ndash;&gt;
+
+                </div>
+
+                <div id="footerBtns" class="modal-footer">
+                    &lt;!&ndash;<button type="button" class="btn btn-default" ng-click="addData(province._id)" data-dismiss="modal" ng-disabled="provinceForm.$invalid">OK</button>&ndash;&gt;
+                    &lt;!&ndash;<input type="submit" class="btn btn-default" value="Submit"/>&ndash;&gt;
+                    &lt;!&ndash;<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>&ndash;&gt;
+                </div>
+            </form>
+        </div>
+
+
+    </div>
+</div>-->
+<div id="managementDialog"></div>
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">Create a div tag  in html file with specific id  for example managementDialog and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+    <br>
+    <div class="shortnoteText">NOTE: Creation of Table and Buttons are explained in previous sections</div>
+    <br>
+    <div>HTML file:</div>
+    <pre><code>&ltdiv id="provinceAction" ng-init="init()"&gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="managementDialog"&gt&lt/div&gt</code></pre>
+    <br>
+    <div>Javascript file:</div>
+    <pre><code>
+
+        $scope.init = function() {
+            loadprv();
+        }
+
+          function loadprv() {
+             var dialog = $(modelTemplate).filter('#dialog').html();
+             var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();
+             $('#managementDialog').html($compile(dialog)($scope));
+             $('#managementDialog .modalHeader').html('&lth5 class="modal-title titlestyle"&gtModal Header&lt/h5&gt');
+             $('#managementDialog .modalBodyContent').html('&ltdiv class="form-group row"&gt &ltlabel class="col-xs-4 col-form-label labelstyle"&gtName&lt/label&gt &ltdiv class="col-xs-8 provinceName" &gt &lt/div&gt &lt/div&gt');
+              var dataText = {"ErrMsg" :     {"errmsg" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name", "errtag":"ptextboxErr", "errfunc":"validatetextbox"}};
+             $('#managementDialog .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));
+             var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"};
+             var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);
+             $('#managementDialog #footerBtns').html($compile(modelSubmit_html)($scope));
+             var modelDelete_data = {"title":"Cancel", "clickAction":"closeModal()"};
+             var modelDelete_html = Mustache.to_html(def_button_tpl, modelDelete_data);
+             $('#managementDialog #footerBtns').append($compile(modelDelete_html)($scope));
+             $scope.validatetextbox = function (value){
+            if($scope.province.province_name) {
+                $scope.ptextboxErr = false;
+            }
+            else
+                $scope.ptextboxErr = true;
+        }
+        }
+		</code></pre>
+
+
+
+
+
+    </div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/notification.html b/common/src/main/webapp/usageguide/browser/templates/notification.html
new file mode 100644
index 00000000..a4b9cee4
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/notification.html
@@ -0,0 +1,48 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<h4>{{message}}</h4>
+
+<div id="notificationArea" ng-init="init()">
+    <button type="button" class="btn btnDefault btnmrg" ng-click="showError()">Error</button>
+    <button type="button" class="btn btnDefault btnmrg" ng-click="showWarning()">Warning</button>
+    <button type="button" class="btn btnDefault btnmrg" ng-click="showInfo()">Information</button>
+    <button type="button" class="btn btnDefault btnmrg" ng-click="showConfirm()">Confirm</button>
+
+   <!-- <label class="labelstyle">Label</label>-->
+
+    <div class="shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">Create a button in html file and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+        <br>
+        <div>HTML file:</div>
+        <pre><code>&ltbutton type="button" class="btn btn-default" ng-click="showError()"&gtCreate&lt/button&gt</code></pre>
+        <br>
+        <div>Javascript file:</div>
+        <pre><code>
+        var data = {"err_data" : {"title": "Error","showClose": "true","closeBtnTxt": "Ok","icon": "glyphicon glyphicon-exclamation-sign","iconColor": "icon_error","msg":"<<Please input your message here>>","buttons": []}};
+
+            $scope.showError = function() {
+            dialog_tpl = $(modelTemplate).filter('#personDialog').html();
+            var html = Mustache.to_html(dialog_tpl, data.err_data);
+            $(html).modal({backdrop: "static"});//backdrop: "static" - for grayed out and no outside click work, backdrop: false - no grayed out*!
+        }</code></pre>
+
+    </div>
+    </div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/radioButtons.html b/common/src/main/webapp/usageguide/browser/templates/radioButtons.html
new file mode 100644
index 00000000..87477182
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/radioButtons.html
@@ -0,0 +1,58 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+
+<h4>Radio Buttons</h4>
+
+<div id="radioBtnArea"  ng-init="init()"></div>
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">Create a div tag  in html file with specific id  for example radioBtnArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+    <br>
+    <div>HTML file:</div>
+    <pre><code>&ltdiv id="radioBtnArea" ng-init="init()"&gt&lt/div&gt</code></pre>
+    <br>
+    <div>Javascript file:</div>
+    <pre><code>
+        var data ={"radio_btn_default_data" : {"id":1, "label":"Default Radio Btn"},"radio_btn_primary_data" : {"id":2, "label":"Primary Radio Btn"}};
+
+        $scope.init = function() {
+            loadRadioBtn();
+        }
+
+         function loadRadioBtn(){
+
+            var radio_button_tpl = $(modelTemplate).filter('#radioButtons').html();
+            var html = Mustache.to_html(radio_button_tpl, data.radio_btn_default_data);
+            $('#radioBtnArea').html(html);
+
+            var html = Mustache.to_html(radio_button_tpl, data.radio_btn_primary_data);
+            $('#radioBtnArea').append(html);
+
+
+        }</code></pre>
+
+
+
+
+
+
+</div>
+</div>
+
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/register.html b/common/src/main/webapp/usageguide/browser/templates/register.html
new file mode 100644
index 00000000..ff934267
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/register.html
@@ -0,0 +1,47 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<div class="col-sm-offset-3 col-sm-6 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
+    <h3>Register</h3>
+
+    <form ng-submit="formSubmit()" class="form">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+            <div class="form-group">
+                <input type="text" class="form-control" ng-model="user.username" placeholder="Username" required=""/>
+            </div>
+
+            <div class="form-group">
+                <input type="email" class="form-control" ng-model="user.email" placeholder="Email" required=""/>
+            </div>
+
+            <div class="form-group">
+                <input type="password" class="form-control" ng-model="user.password" placeholder="Password" required=""/>
+            </div>
+
+            <div class="form-group">
+                <input type="password" class="form-control" ng-model="user.confpassword" placeholder="Confirm password" required=""/>
+            </div>
+
+            <div class="form-group">
+                <button type="submit" class="btn btn-success">Register</button>
+            </div>
+            <a ui-sref="login">Login</a>
+
+        </div>
+    </form>
+</div>
+\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/browser/templates/table.html b/common/src/main/webapp/usageguide/browser/templates/table.html
new file mode 100644
index 00000000..3daa2a57
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/table.html
@@ -0,0 +1,90 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+    <h4>{{message}}</h4>
+
+    <div id="tableArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">
+
+        <h3 class="col-sm-12 col-md-12 col-lg-12">Basic Table<span> (with hover)</span></h3>
+        <div id="basictableArea" class="col-sm-12 col-md-12 col-lg-12"></div>
+
+        <h3 class="col-sm-12 col-md-12 col-lg-12">Stripped Table<span> (Condensed & with border)</span></h3>
+        <div id="strippedtableArea" class="col-sm-12 col-md-12 col-lg-12"></div>
+
+        <h3 class="col-sm-12 col-md-12 col-lg-12">Search Table</h3>
+        <div id="condensedtableArea" class="col-sm-12 col-md-12 col-lg-12">
+            <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+                <tr ng-repeat="siteData in $data">
+                    <td title="'Country'" filter="{ countryName: 'text'}" sortable="'countryName'">
+                        {{siteData.countryName}}
+                    </td>
+                    <td title="'Language'" filter="{ type: 'text'}" sortable="'type'">
+                        {{siteData.language}}
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">Create a div tag  in html file with specific id  for example basictableArea,strippedtableArea,condensedtableArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+        <br>
+        <div>HTML file:</div>
+        <pre><code>&ltdiv id="basictableArea"&gt&lt/div&gt</code></pre>
+        <pre><code>&ltdiv id="strippedtableArea"&gt&lt/div&gt</code></pre>
+        <pre><code>&ltdiv id="condensedtableArea"&gt&lt/div&gt
+            &lttable ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true"&gt
+                &lttr ng-repeat="siteData in $data"&gt
+                    &lttd title="'Country'" filter="{ countryName: 'text'}" sortable="'countryName'"&gt&#123 &#123siteData.countryName&#125 &#125&lt/td&gt
+                      &lttd title="'Language'" filter="{ type: 'text'}" sortable="'type'"&gt&#123 &#123siteData.language&#125 &#125&lt/td&gt
+                &lt/tr&gt
+            &lt/table&gt</code></pre>
+        <br>
+        <div>Javascript file:</div>
+        <pre><code>
+
+        var data ={"basic_table_data": {"itemHeader": ["First Name", "Last Name", "Age"],"rowitem": [{"values": ["A", "B","1"]},{"values": ["C", "D", "2"]},{"values": ["E", "F", "3"]}],"striped": false,"border": false,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""},
+        "str_table_data": {"itemHeader": ["First Name","Last Name","Age"],"rowitem": [{"values": ["A","B","1"]},{"values": ["C","D","2"]},{"values": ["E","F","3"]}],"striped": true,"border": true,"hover": false,"condensed": true,"filter": false,"action": "","searchField": ""},"cond_table_data": [{
+        "countryName": "China","language": "Mandrain"},{"countryName": "India","language": "English"},{"countryName": "USA","language": "English"}]};
+
+
+        $scope.init = function() {
+            loadTableData();
+        }
+
+         function loadTableData() {
+
+            var table_tpl = $(modelTemplate).filter('#table').html();
+
+            var html = Mustache.to_html(table_tpl, data.basic_table_data);
+            $('#basictableArea').html(html);
+
+            var html = Mustache.to_html(table_tpl,data.str_table_data);
+            $('#strippedtableArea').html(html);
+
+            $scope.tableParams = new NgTableParams({
+                count: 5, sorting: {language: 'asc'}
+            }, {counts: [5, 10, 20, 50], dataset: data.cond_table_data});
+        }</code></pre>
+
+
+
+        </div>
+    </div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/tabs.html b/common/src/main/webapp/usageguide/browser/templates/tabs.html
new file mode 100644
index 00000000..3b284713
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/tabs.html
@@ -0,0 +1,53 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+    <h4>{{message}}</h4>
+    <div id="tabArea" ng-init="init()"></div>
+
+    <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">Create a div tag  in html file with specific id  for example tabArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+        <br>
+        <div>HTML file:</div>
+        <pre><code>&ltdiv id="tabArea" ng-init="init()"&gt&lt/div&gt</code></pre>
+        <br>
+        <div>Javascript file:</div>
+        <pre><code>
+        var data ={"tabData":{"items": [{"tablabel": "Why AngularJS?","isActive": true,"target": "tab1",
+        "msg": "HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop."};
+
+        $scope.init = function() {
+              loadTabData();
+        }
+
+         function loadTabData() {
+            var tab_tpl = $(modelTemplate).filter('#tabs').html();
+            var html = Mustache.to_html(tab_tpl, data.tabData);
+            $('#tabArea').html(html);
+        }</code></pre>
+
+
+
+
+
+
+
+        </div>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/common/src/main/webapp/usageguide/browser/templates/textarea.html b/common/src/main/webapp/usageguide/browser/templates/textarea.html
new file mode 100644
index 00000000..9d885e60
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/textarea.html
@@ -0,0 +1,150 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<h4>Text Area</h4>
+<body>
+<div name="myForm"  method="post">
+    <div class="form-group row">
+        <label for="fname" class="col-xs-2 col-form-label labelstyle">Text</label>
+        <div class="col-xs-10">
+            <div id="fname"></div>
+
+        </div>
+    </div>
+
+    <div class="form-group row">
+        <label for="email" class="col-xs-2 col-form-label labelstyle">Email</label>
+        <div class="col-xs-10">
+            <div id="email" ></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="url" class="col-xs-2 col-form-label labelstyle">URL</label>
+        <div class="col-xs-10">
+            <div id="url"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="password" class="col-xs-2 col-form-label labelstyle">Password</label>
+        <div class="col-xs-10">
+            <div id="password"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="numeric" class="col-xs-2 col-form-label labelstyle">Numeric</label>
+        <div class="col-xs-10">
+            <div id="numeric"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="dot" class="col-xs-2 col-form-label labelstyle">Date and time</label>
+        <div class="col-xs-10">
+            <div id="dot"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="dateinput" class="col-xs-2 col-form-label labelstyle">Date</label>
+        <div class="col-xs-10">
+            <div id="dateinput"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="monthinput" class="col-xs-2 col-form-label labelstyle">Month</label>
+        <div class="col-xs-10">
+            <div id="monthinput"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="weekinput" class="col-xs-2 col-form-label labelstyle">Week</label>
+        <div class="col-xs-10">
+            <div id="weekinput"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="timeinput" class="col-xs-2 col-form-label labelstyle">Time</label>
+        <div class="col-xs-10">
+            <div id="timeinput"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="ipv4" class="col-xs-2 col-form-label labelstyle">IPV4 Address</label>
+        <div class="col-xs-10">
+            <div id="ipv4"></div>
+        </div>
+    </div>
+    <div class="form-group row">
+        <label for="ipv6" class="col-xs-2 col-form-label labelstyle">IPV6 Address</label>
+        <div class="col-xs-10">
+            <div id="ipv6"></div>
+        </div>
+    </div>
+
+
+    <div class="form-group row">
+        <label for="textarea" class="col-xs-2 col-form-label labelstyle">Text Area</label>
+        <div class="col-xs-10">
+            <div id="textarea"></div>
+
+        </div>
+    </div>
+
+    <div class="form-group row">
+        <label for="note" class="col-xs-2 col-form-label labelstyle">Note</label>
+        <div class="col-xs-10">
+            <div id="note">
+            </div>
+
+        </div>
+    </div>
+
+</div>
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">Create a div tag  in html file with specific id  for example Email and write a specific function in javascript file to perform your business logic. An sample example as shown below for Email and Note, the same logic can be followed by all remaining text fields:</div>
+    <br>
+    <div>HTML file:</div>
+    <pre><code>&ltdiv id="textArea" ng-init="init()"&gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="Email"&gt&lt/div&gt</code></pre>
+    <pre><code>&ltdiv id="note"&gt&lt/div&gt</code></pre>
+    <br>
+    <div>Javascript file:</div>
+    <pre><code>
+        var data ={"Note" : {"message" : "Hi I am Note","placement" : "bottom"},"Email" : {"errmsg" : "The email is required.","placeholder" : "Email","modalVar":"email","errtag":"emailErr","errfunc":"validateemail"}};
+
+        $scope.init = function() {
+            loadTextArea();
+        }
+
+         function loadTextArea() {
+            var note = $(modelTemplate).filter('#note').html();
+            var email = $(modelTemplate).filter('#email').html();
+            var html = Mustache.to_html(email, data.Email);
+            $('#email').html($compile(html)($scope));
+            var html = Mustache.to_html(note, {"placement":data.Note.placement});
+            $('#note').html(html);
+            $("#noteanchor").popover({
+                template: '<div class="popover fade bottom in customPopover"><div class="arrow"></div>'+data.Note.message+'</div>'
+            });
+
+        }</code></pre>
+
+
+</div>
+</div>
+</body>
+
diff --git a/common/src/main/webapp/usageguide/browser/templates/tree.html b/common/src/main/webapp/usageguide/browser/templates/tree.html
new file mode 100644
index 00000000..41a09b29
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/tree.html
@@ -0,0 +1,41 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<h4>{{message}}</h4>
+<div id="tree1" class="ztree" ng-init="init()"></div><!-- ng-if="treeLoaded()"-->
+
+<div class="shortnote">
+    <div class="shortnoteHeader">Usage</div>
+    <div class="shortnoteText">Create a div tag  in html file with specific id  for example tree1 and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+    <br>
+    <div>HTML file:</div>
+    <pre><code>&ltdiv id="tree1" class="ztree" ng-init="init()"&gt&lt/div&gt</code></pre>
+    <br>
+    <div>Javascript file:</div>
+    <pre><code>
+        var data = {"name": "Java and its divisions","open": true,"children": [{ "name": "Java Standard Edition, J2SE" },{ "name": "Java Enterprise Edition, J2EE" },{ "name": "Java Mobile Edition, J2ME"}]};
+        $scope.init = function() {
+                tree();
+        }
+        function tree() {
+            zNodes = data;
+            $.fn.zTree.init($("#tree1"), setting, zNodes);
+        }</code></pre>
+
+</div>
+</div>
diff --git a/common/src/main/webapp/usageguide/browser/templates/verticalTab.html b/common/src/main/webapp/usageguide/browser/templates/verticalTab.html
new file mode 100644
index 00000000..784475b8
--- /dev/null
+++ b/common/src/main/webapp/usageguide/browser/templates/verticalTab.html
@@ -0,0 +1,47 @@
+<!--
+
+    Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+    <h4>{{message}}</h4>
+
+    <div id="vtabArea" class="col-sm-12 col-md-12 col-lg-12" ng-init="init()"></div>
+
+    <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+        <div class="shortnoteHeader">Usage</div>
+        <div class="shortnoteText">Create a div tag  in html file with specific id  for example vtabArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+        <br>
+        <div>HTML file:</div>
+        <pre><code>&ltdiv id="vtabArea" ng-init="init()"&gt&lt/div&gt</code></pre>
+        <br>
+        <div>Javascript file:</div>
+        <pre><code>
+        var data= {"vtabData":{"items": [{"tablabel": "Why AngularJS?","isActive": true,"target": "tab1","msg": "HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop."};
+
+        $scope.init = function() {
+            loadvTabData();
+        }
+
+         function loadvTabData() {
+            var vtab_tpl = $(modelTemplate).filter('#vtabs').html();
+            var html = Mustache.to_html(vtab_tpl, data.vtabData);
+            $('#vtabArea').html(html);
+        }</code></pre>
+
+        </div>
+    </div>
+</div>
+\ No newline at end of file
author	Seshu-Kumar-M <seshu.kumar.m@huawei.com>	2017-02-11 03:06:54 +0530
committer	Seshu-Kumar-M <seshu.kumar.m@huawei.com>	2017-02-11 03:06:54 +0530
commit	231321f8475c72a9b253b71ca7f99f2745e44535 (patch)
tree	a463412932f256dacf6e2f3f72e40ca845628a69 /common/src/main/webapp/usageguide/browser
parent	fa9aeb9d5b6aba71f4fcb5ee775de823eb82cf19 (diff)