0

As I have some bad experiences with the mix of Angular and jQuery, I am trying to avoid jQuery in Angular. Right now, I should add some code to my Angular project but I am not sure how I should convert this. The code is coming from someone else who wants me to implement this in the project.

Within my project I have added all of the required libraries into the index.html. I think this is the only place where a library can be added.

Does someone know (if there is a way) how I can convert those jquery code lines into Angular or javascript code? Where in the project should I add this?

$('head').append( '<meta name="PAGENAME" content="$pagename">' );

$(document).ready(function() {

    $.getScript( "https://www.website.com/crsc/scripts/script.js" )
      .done(function( script, textStatus ) {
        console.log( 'loaded test' );
      })

      .fail(function( jqxhr, settings, exception ) {
               console.log('not loaded');     
      });

});
6
  • 1
    Are you asking how to load a script in angular? If so you should update the question title. Commented Oct 5, 2017 at 13:38
  • 1
    you can add a script tag in your index file with async=true Commented Oct 5, 2017 at 13:39
  • Possible duplicate of How to use jQuery in AngularJS Commented Oct 5, 2017 at 13:41
  • @DanteTheSmith OP is not trying to use jQuery with Angular but rather the opposite, avoid using jQuery. Commented Oct 5, 2017 at 13:43
  • 1
    I don't know why you are getting downvoted, it was a good question to me. Commented Oct 5, 2017 at 13:48

1 Answer 1

3

You can use app.run which will run like a main method before the app loads everything

     app.run(["scriptService"],function(scriptService){
        scriptService.GetScripts()
          .then(function(success){console.log("loaded test");},
         function(error){ console.log("not loaded");}
    }]);

Next all you have to do is make a script Service.

    app.factory("scriptService", ["$http", function ($http) {
                this.GetScripts = function ()
    { 
return $http.get(""https://www.website.com/crsc/scripts/script.js") .then(function(result) { return result});

    }

but in reality why do you not just import the script through a script tag? Loading a script async, since op didnt know that was an option I thought I would include it here ww3 schools async loading

  <script src="demo_async.js" async></script>

definition and Usage The async attribute is a boolean attribute.

When present, it specifies that the script will be executed asynchronously as soon as it is available.

Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).

Note: There are several ways an external script can be executed:

If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing) If async is not present and defer is present: The script is executed when the page has finished parsing If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page Browser Support The numbers in the table specify the first browser version that fully supports the attribute.

Sign up to request clarification or add additional context in comments.

3 Comments

exactly a simple script with async load should be enough .
I thought so too, but i figured op had his/her reasons
I didn't know async loading would give me the same result, thanks

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.