Using AngularJS API within a standalone function: Tips and tricks

Question

Using AngularJS API within a standalone function: Tips and tricks

I'm diving into the world of AngularJS and I want to make an HTTP GET request to a distant server without messing up my current view code. After some research, I discovered a way to execute a function right after the HTML is loaded by using a standalone init() method. However, when I implement it like this:

var init= function($http, $location) {
  //using $location to fetch query string

  if ($location.search().hasOwnProperty('a') && $location.search().hasOwnProperty('b')){
    var a= $location.search().a;
    var b= $location.search().b;

    var sendurl = 'http://someurl'+a+b ;

    var req = {
      method:'GET',
      url: sendurl,
      headers:{
        'Content-Type': 'text/html'
      },
      data: {token: ''}
    };

    $http(req)
      .success( function(){
        alert('success!');
      })
      .error(function(){
        alert("ERROR");
      });

  }
};
init() ;

Upon checking the console, I got the error

TypeError: $location is undefined

. I understand that I may not be utilizing AngularJS code correctly within a standalone function, so I'm seeking guidance on how to properly structure this function.

javascript angularjs http

Answer 1

Answer №1

Here is an example of writing a function in a service:

var myApp = angular.module('myApp', []);

myApp.factory('SomeService', function ($http, $location) {
  return {
    init: init
  };

  function init () {
    if ($location.search().hasOwnProperty('a') && $location.search().hasOwnProperty('b')){
      var a= $location.search().a;
      var b= $location.search().b;

      var sendurl = 'http://someurl'+a+b ;

      var req = {
        method:'GET',
        url: sendurl,
        headers:{
          'Content-Type': 'text/html'
        },
        data: {token: ''}
      };

      $http(req)
        .success( function(){
          alert('success!');
        })
        .error(function(){
          alert("ERROR");
        });
     }
   }
 });

Then, call the init function from the controller:

myApp.controller('MyController', function (SomeService){
 SomeService.init();
});

Answer 2

Here is an example of writing a function in a service:

var myApp = angular.module('myApp', []);

myApp.factory('SomeService', function ($http, $location) {
  return {
    init: init
  };

  function init () {
    if ($location.search().hasOwnProperty('a') && $location.search().hasOwnProperty('b')){
      var a= $location.search().a;
      var b= $location.search().b;

      var sendurl = 'http://someurl'+a+b ;

      var req = {
        method:'GET',
        url: sendurl,
        headers:{
          'Content-Type': 'text/html'
        },
        data: {token: ''}
      };

      $http(req)
        .success( function(){
          alert('success!');
        })
        .error(function(){
          alert("ERROR");
        });
     }
   }
 });

Then, call the init function from the controller:

myApp.controller('MyController', function (SomeService){
 SomeService.init();
});

Using AngularJS API within a standalone function: Tips and tricks

Answer №1

Similar questions

Issue with Bootstrap side navbar not collapsing when clicked on a link

In a React TypeScript application, prevent users from clicking on buttons that represent the same number of answers in a multiple choice question

Displaying Photo on Webpage using Bearer Authorization Token in JavaScript

"ng2-file-uploader necessitates a browser refresh in order to function

javascript An interactive accordion component created with Bootstrap

Creating HTML or PHP pages using jQuery

JavaScript (jQuery) module that fetches libraries

What is the best way to configure the loading state of my spinner?

Using JQuery to Enhance the Highlight Effect: Tips and Tricks

Efficient communication: sending emails using AngularJS and PHP

The Highcharts plugin is currently not able to render the data

Having trouble retrieving information from the Redux store and displaying it in the user interface component

The axios requests are sent to the backend API, but the webpage remains empty without

How can I efficiently create an editForm in Angular?

Guide to Establishing a Connection to WCF Service using Ionic Project and AngularJS

JavaScript takes the spotlight before CSS

Manipulating nested arrays using index values in JavaScript

I am having trouble getting Form.Select to work in my basic react-bootstrap application, despite following the guidelines provided in the react-bootstrap documentation. Can

What sets Koa apart when it comes to understanding the distinctions among await next(), return await next(), return next(), and next() in middleware?

What is the best way to add a URL dynamically when a click event occurs?