6

I'm trying to create a web extension using AngularJS, however, I did the following:

  • I created the widget and I rendered it.
  • I tried to put ng-app and ng-controller on some rendered divs, and the result was there was no response at all.

It seemed like odoo only support Backbone.js with Marionnette.js. I also tried to do the same with React.JS but nothing worked.

This is my code.

resources.xml

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
 <data>
    <!-- Adds all assets in Odoo -->
    <template id="assets_backend" name="static_resources_demo assets" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/odoo_angular/static/src/js/lib/angular.min.js"></script>
            <script type="text/javascript" src="/odoo_angular/static/src/js/controller/firstCtrl.js"></script>
            <script type="text/javascript" src="/odoo_angular/static/src/js/angular_odoo.js"></script>
        </xpath>
    </template>
 </data>
</odoo>

angular_view.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="angular_view_odoo">
     <div t-name="angular_view_test" class="container">
       <div class="row box">
         <div ng-app="myApp" ng-controller="myCtrl">

            First Name:
            <input type="text" ng-model="firstName"/>
            <br/>
            Last Name:
            <input type="text" ng-model="lastName"/>
            <br/>
            <br/>
            Full Name: {{firstName + " " + lastName}}

        </div>
     </div>
   </div>
</templates>

angular_odoo.js

odoo.define('odoo_angular', function (require) {
"use strict";
var ajax = require('web.ajax');
var Widget = require('web.Widget');
var core = require('web.core');
var Model = require('web.Model');

var QWeb = core.qweb;
var _t = core._t;

// here we are getting the value in an array.
   var widget_name = Widget.extend({

      init: function (parent, context) {
          var self = this;
          this.context = context;
          this._super(parent);

      },

      start: function () {
          var self = this;

          this._super();
          this.$el.empty().append(QWeb.render("angular_view_test",{}));
      },
   });

   core.action_registry.add('angular_view', widget_name);
   return widget_name;
 });

firstCtrl.js

  var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {

    if($scope.firstName === 'Test')
        console.log('OK');
  });

And this is the result

Belal Mohammed
  • 61
  • 4
  • Angular js and react js is not compatible with odoo.. Odoo only works with backbone js. – Keval Mehta Aug 19 '17 at 07:12
  • 1
    Yeah I know that already, but what I was looking for is trying to make angular or react work with simple tricks. – Belal Mohammed Aug 19 '17 at 18:06
  • Hey there. Just curious, did you find a way to make this work? I'd like to use VueJS in a custom module I've been tasked with. – Kyle Sentient Jan 29 '19 at 14:19
  • 1
    @KyleSentient I did find a way already and I made it work with ReactJS :D. What I made is using React.createClass syntax because you know, browsers don't understand ES6. I guess there must be a way for your Vue too. – Belal Mohammed Jan 30 '19 at 15:45
  • Thank you for the reply :) would you mind sharing the code of your module on github or somewhere else, If that's possible at all? I'm pretty new to Odoo and I must say I'm still very confused. I can see you added your widget to the action_registry. Would you mind telling me why? what does it do? And where did you go from there? Sorry if I sound insistent. The lack of resources and documentation is driving me mad... – Kyle Sentient Jan 30 '19 at 15:55

0 Answers0