AngularJs within html widgets

Document created by jasonhumphrey on Aug 18, 2015
Version 1Show Document
  • View in full screen mode

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

Attachments

    Outcomes