Angular.JS External Javascript Library with Required Options

Issue

I have a simple question; I'm still learning Angular.JS, so I'm not an expert on this as of yet, obviously lol. Let's say we have a script like the following:

<script type="text/javascript" src="https://PATH/TO/Service.js">
{
   requiredParam1: SOMETHING,  
   requiredParam2: SOMETHING_ELSE 
}
</script>

Now, this particular script requires BOTH parameters to be specified when the script is being included; failing to do so causes the Service.JS file to return an error.

How can one properly included that on an Angular Page? (View).

I know one can use controllers and directives, and I'm not immune to understanding the concepts needed for those; I can already include external javascripts using this methodology, but doing so with required parameters DURING the include is eluding me.

Here's a functional example of what would somewhat be needed. Note, we are not doing TradingView stuff, but this particular widget is functioning the same way as our data providers widget. If this were a standard HTML page, we'd just include that in the proper <div> element that we wanted to place it. But, as this is angular, not sure how one could actually put this into the view.

<!-- TradingView Widget BEGIN -->
<span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style="color: rgb(173, 174, 176); font-family: &quot;Trebuchet MS&quot;,Tahoma,Arial,sans-serif; font-size: 13px;">Economic Calendar by <span style="color: #3BB3E4">TradingView</span></a></span>
<script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-events.js">
{
 "width": "510",
 "height": "600"
}
</script>
<!-- TradingView Widget END -->

Solution

First of all if you have giver script source url then don't write in script tags but any of code in script file.

Make a service file like this and add path of file to index file:-

var app = angular.module('appName')
app.service('servicename',function() {
    this.get = function(argument1, argument2) {
        //perform function;
    };
});

make a controller file like this and add path of file to index file:-

var app = angular.module('appName').controller('controllername',['$scope', 'servicename',  function($scope, servicename) {
    servicename.get(argument1, argument2);
}]);

Look if it can help you

Answered By - Rahul Beniwal