Version 1

    Hello to all that will read this. I am a advocate of angularjs in jive widgets. I want to share how i do it since i have seen many questions on it with html widgets in my own company.

     

    Here is the code - GreenPioneer/AngularjsJiveHtmlWidget · GitHub

    Here is the JSFiddle - AngularjsJiveHtmlWidget - JSFiddle

    Here is the step by step below

     

    First things first is you need the resources

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    
    
    

    Yes HTTPS is required unless you can host angular internally on your own instance.


    Second you will need a angularjs controller --- follow this pattern johnpapa/angular-styleguide · GitHub

     

    (function() {
        'use strict';
    
    
        angular
            .module('myApp', ['ngAnimate'])
            .controller('ControllerJWH', ControllerJWH);
    
        ControllerJWH.$inject = ['$http'];
    
    
        /* @ngInject */
        function ControllerJWH($http) {
            var vm = this;
            vm.title = 'ControllerJWH';
    
    
            activate();
    
    
            ////////////////
    
    
            function activate() {
                $http.get('https://JIVEURLHERE.com/api/core/v3/people/@me')
                    .then(function(result) {
                        vm.jiveUser = result.data;
                        console.log(result);
                    }, function(err) {
                        console.log(err);
                    });
    
    
            }
        }
    
    })();
    
    
    

     

     

    Third you will need to transform the response from jive

    (function() {
        'use strict';
    
    
        angular
            .module('myApp')
            .config(config);
    config.$inject = ['$httpProvider'];
        function config($httpProvider) {
            $httpProvider.interceptors.push(function() {
                return {
                    'request': function(config) {
                        config.transformResponse.unshift(function(a) {
                            var split = a.split("\n");
                            if (a[0] === '{') {
                                return a;
                            } else {
                                return a.split("\n").slice(1).join("\n");
                            }
                        });
                        return config;
                    }
                };
            });
        }
    })();
    
    
    

     

    Next lets give your html some life

    <div class="container-fluid" ng-app="myApp" ng-controller="ControllerJWH as vm">
        <div class="page-header">
            <h1>{{vm.jiveUser.displayName}} Welcome to Jive & AngularJS</h1>
            <p class="lead">Small Demo was made by Jason Humphrey</p>
            <div class="alert alert-danger" role="alert">
                <strong>Warning!</strong>
                <p>AngularJS will make your life easier</p>
            </div>
        </div>
    </div>
    
    
    

     

     

     

     

    Lastly Lets look at the end solution

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <!-- <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.2.js"></script> -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
    <script src='/resources/scripts/jquery/jquery.js'></script>
    <body>
    <div class="container-fluid" ng-app="myApp" ng-controller="ControllerJWH as vm">
        <div class="page-header">
            <h1>{{vm.jiveUser.displayName}} Welcome to Jive & AngularJS</h1>
            <p class="lead">Small Demo was made by Jason Humphrey</p>
            <div class="alert alert-danger" role="alert">
                <strong>Warning!</strong>
                <p>AngularJS will make your life easier</p>
            </div>
        </div>
    </div>
    <script>
    (function() {
        'use strict';
    
    
        angular
            .module('myApp', ['ngAnimate'])
            .controller('ControllerJWH', ControllerJWH)
            .config(config);
         
        config.$inject = ['$httpProvider'];
        ControllerJWH.$inject = ['$http'];
    
    
        /* @ngInject */
        function ControllerJWH($http) {
            var vm = this;
            vm.title = 'ControllerJWH';
    
    
            activate();
    
    
            ////////////////
    
    
            function activate() {
                $http.get('https://JIVEURLHERE.com/api/core/v3/people/@me')
                    .then(function(result) {
                        vm.jiveUser = result.data;
                        console.log(result);
                    }, function(err) {
                        console.log(err);
                    });
    
    
            }
        }
        function config($httpProvider) {
            $httpProvider.interceptors.push(function() {
                return {
                    'request': function(config) {
                        config.transformResponse.unshift(function(a) {
                            var split = a.split("\n");
                            if (a[0] === '{') {
                                return a;
                            } else {
                                return a.split("\n").slice(1).join("\n");
                            }
                        });
                        return config;
                    }
                };
            });
        }
    })();
    </script>
    </body>
    
    
    

     

     

    Tada !!! now your an angular developer with jive