Angular JS in Aras12

オフライン

How to use Angular JS in Aras 12?

  • Suhas,

    That depends strongly on what you want to do with it.

    I happened to be working on a section of the UI today, and when I saw your question I decided to try doing a basic binding in the view I was working in. Since I already had a cshtml file open, I put a reference to the angular library in the head 

    <head>

    <script src="">ajax.googleapis.com/.../angular.min.js"></script>
    <!-- The rest of my header -->
    </head>
    <body>
    <div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
    </div>
    <!-- the rest of my body -->

    </body>

    The binding worked, so the short answer is "feed it a reference and write your binding, it'll work." While codetree edits like this aren't recommended as a first approach, this does show there's no conflict to using AngularJS in Aras Innovator. Wherever you happen to be writing javascript code, you're always just a quick source statement away from writing a few lines of AngularJS. That isn't to say that we're getting the full power of AngularJS here, but much of what AngularJS does is already covered by Aras Innovator. For example, most instances where I'd want to set up routing in an Angular app I'd handle with itemtypes and forms in Aras Innovator. 

    Where I've used AngularJS in the past, it was to build single page applications. AngularJS was at its most useful to me for making smooth and responsive front ends, which makes the question of where you're trying to show this to the user highly relevant. I'd love to hear more about what goal you have in mind- I'm interested in Angular and Aras, and the combination could be amazing if they could take advantage of each other's strengths! In particular if you're trying to use it in a view or form, let me know some details about the configuration and how much logic you need to make happen and I can look into how it would interact with Aras Innovator's Methods.

    Skyler Crossman

  • 0 オフライン in reply to Skyler Crossman

    Hello Skyler Crossman,

    Thank you for response. 

    Aras Innovator method is returning SOAP message. And Angular will work with only JSON data.

    So again I need  do conversion from SOAP to JSON?

    Is it possible to bind ng-model for Aras properties which are present on Aras form? 

    For external html pages or Aras form html properties  it's possible, but again for some html page part (some tags or properties) it will work and for remaining properties will not work(inconsistent behavior on same html page ). How to overcome this issue?

    Regards,

    Suhas

  • 0 オフライン in reply to Suhas

    Suhas,

    Angular does prefer JSON, it's true. Depending on what you need to display, it may be easier to look for a specific property on the returning SOAP message. Any property which can be found clientside should work with ng-model, though in particular I would keep an eye on when properties become available. In the past, I've had issues where some data was already present and thus worked cleanly with ng-model, while other parts of the same object involved API calls and thus required promises. Aras Innovator communicates with the database for much of the information it displays, and that would explain inconsistent behavior on the same HTML page. 

    The easiest situation might be one where you make one SOAP call, convert that once to JSON, then bind properties as needed. A more complex situation might be one where, in response to what they see, the user will prompt for different pieces of data. In that case it might make more sense to make a promise per page or per update, then wait for the conversion to finish before resolving the promise.

    Of course, that's a guess at the source of the issue, and you may find something different. If some properties do work, then Angular is working within Aras Innovator, and you can focus your efforts on making sure that data is ready when Angular needs it.

    Best,

    Skyler C.

  • 0 オフライン in reply to Skyler Crossman

    Hello Skyler Crossman,

    Thanks for response. 

    Is it possible to return JSON data from Aras server side method?

    One use case is below: 

    For example if I'm uploading data thru file( Excel,CSV).

    I want to do some business logic and based on business logic validate data first and send validation status to client side and display it in html table format. 

    If I'm using normal Aras then I need to generate complete html page at server side and then need to return it in string format. Instead of HTML page I want to return only JSON data.

    If I use Angular JS then it's very easy to bind it.  

    Here conversion of SOAP to JSON is again iterating same data twice, which is bad.

    Regards,

    Suhas

  • 0 オフライン in reply to Suhas

    Suhas,

    Server side methods always need to return an item. If you need your results in JSON format though, I would look in to calling your server side method via the REST API. There's a basic blog post on this here, but the bottom line is that you'll get back the results of your method in JSON. In addition, the RESTful approach will make AngularJS easier to work with than SOAP. 

    If you just need a specific subset of data, you can make a temporary item in your server side method before returning that item, then parsing the resulting JSON representation of the item to get what you need.

    Best,

    Skyler C.