7 Replies Latest reply on Apr 1, 2015 1:49 AM by kalaoke

    Has anyone used AngularJS in a Jive 7/8 app?

    cgum

      I have just the most brain-dead simple example that works fine when running by itself, but doesn't work from within the App's iFrame.

      BTW, the problem occurs whether or not I use the CDN or a local version of angular.min.js

       

      <!DOCTYPE html>

      <html ng-app> <!-- this is an Angular App -->

        <head> <title>Angular test</title>  </head>

        <body>

       

             Name:

             <br/>

             <input type="text" ng-model="name"/> {{ name }}

       

             <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

       

        </body>

      </html>

       

      Here's the error I get:

      TypeError: Object [object Object] has no method 'on'

          at tb (https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:129:276)

          at Nc.link (https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:176:496)

          at A (https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:51:23)

          at h (https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:44:83)

          at h (https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:44:100)

          at h (https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:44:100)

          at https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:43:255

          at https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:19:67

          at h.$get.h.$eval (https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:105:370)

          at h.$get.h.$apply (https://myjiveinstance.jiveon.com/gadgets/concat?container=default&gadget=http%3A%2F%2Faws.devdomain.com%3A8080%2Fcluster%2Fapp%2Fapp.xml&debug=0&nocache=1&type=js&1=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.14%2Fangular.min.js:106:121) <input ng-model="name" type="text" class="ng-pristine ng-valid">

        • Re: Has anyone used AngularJS in a Jive 7/8 app?
          jrlarson

          We are using Angular in multiple Add-ons we are developing. I'll see if one of my developers can help you out...

            • Re: Has anyone used AngularJS in a Jive 7/8 app?
              cgum

              I figured it out - it seems there was a dependency conflict with the version of jquery that was being referenced in my app.xml and angular.

               

              The fix was to remove the following line from my app.xml:

              <Require feature="jquery-1.6" />

               

              Then, I added a jQuery script reference before angular in my page:

               

              <!DOCTYPE html>

              <html ng-app> <!-- this is an Angular App -->

                <head> <title>Angular test</title>  </head>

                <body>

                <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script>

                <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>

               

                Name:

                <br/>

                <input type="text" ng-model="name"/> {{ name }}

               

                </body>

              </html>

              • Re: Has anyone used AngularJS in a Jive 7/8 app?
                cgum

                Now that I've gotten more comfortable with using Angular in a Jive App, I thought I'd pass along this little nugget for dealing with deep linking so you can get to a particular place in your application from the Jive host.

                 

                Have a link like (BTW, double-quotes are important!  Single-quotes won't work):

                https://myjive.jiveon.com/apps/my-app#canvas:{"path":"/place/in/my/app"}

                 

                When the Angular app first loads, there is already a value after the # in the src of the iframe - it's something like #rpc=7382372346

                 

                In my route configuration, I do:

                 

                $routeProvider

                     .when('/loading') {

                          {

                               controller: 'LoadingController',

                               templateUrl: 'path/to/app-loading.html'

                          {

                     }

                     .when ...

                     .otherwise({redirectTo: '/loading'})

                 

                LoadingController looks like this:

                 

                LoadingController = function($scope, app) {

                  gadgets.util.registerOnLoadHandler(function() {

                       var viewParams = gadgets.views.getParams();

                 

                       if (viewParams.path) {

                            app.navigateTo(viewParams.path);

                       } else {

                            app.navigateTo("/your/default/path");

                       }

                 

                  });

                }

                 

                The app value is a reference to the app itself, that I register as a factory like this:

                 

                myApp.factory('app', function() {return myApp; });

                 

                I add the navigateTo function on it:

                 

                myApp.navigateTo = function(route) {

                  document.location = document.location.href.replace(document.location.hash, "#" + route);

                }

                • Re: Has anyone used AngularJS in a Jive 7/8 app?
                  cgum

                  Have you all noticed any issues loading templates in IE9? 

                • Re: Has anyone used AngularJS in a Jive 7/8 app?

                  Has anybody found how to load templates dynamically?  As in, when using ui-router or ng-router, doing something like this:

                   

                  application.config(function($stateProvider, $urlRouterProvider){

                   

                    $urlRouterProvider.otherwise("/authenticate");

                   

                   

                    $stateProvider.state('authenticate', {

                          url: "/authenticate",

                          templateUrl: "views/authenticate.html"

                      });

                   

                   

                      $stateProvider.state('home', {

                          url: "/home",

                          templateUrl: "views/home.html"

                      });

                  });

                   

                  This doesn't work because Jive proxies all of the calls.  It is trying to load these from Jive versus the add-on.  Very frustrating!

                  • Re: Has anyone used AngularJS in a Jive 7/8 app?
                    kalaoke

                    Hi casey,

                    We're new to jive and are interested in exactly the same development path - trying to make an existing web appplication a jive app. The existing application is based on the mean.js framework : basically this is an angular.js app served by a node.js server.

                    I'm stuck with this issue : Re: Angularjs jive app

                    Could you tell me how i can handle with it ? Ideally, can you provide an example of angular jive app code.

                    Thanks for your answer