AngularJS API

Last modified on: November 30, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="e7d65d49-0dd1-4aa5-932b-10bae0e50240" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>AngularJS API: Key Features and Usage</h3>
<h4>Introduction</h4>
<p>AngularJS is a powerful framework for building dynamic web applications. It provides a rich set of built-in services, directives, and tools to help developers build scalable and interactive applications. The AngularJS API includes essential components for working with data, handling events, performing routing, and much more.</p>
<p>This guide explores the AngularJS API, highlighting the most commonly used services and features.</p>
<hr />
<h3>Key AngularJS API Services and Features</h3>
<ol>
<li>
<p><strong>$scope</strong><br />The <code>$scope</code> service is crucial for data binding in AngularJS. It connects the view (HTML) to the controller (JavaScript) and allows dynamic data updates. The <code>$scope</code> object can hold data, functions, and even models.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', [])
  .controller('MainCtrl', function($scope) {
    $scope.message = 'Hello, AngularJS!';
  });
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>HTML</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="app" ng-controller="MainCtrl"&gt;
  &lt;p&gt;{{ message }}&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>$http</strong><br />The <code>$http</code> service is used to make HTTP requests to the server. It supports methods like <code>GET</code>, <code>POST</code>, <code>PUT</code>, and <code>DELETE</code> for communicating with APIs.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', [])
  .controller('ApiCtrl', function($scope, $http) {
    $http.get('https://jsonplaceholder.typicode.com/posts')
      .then(function(response) {
        $scope.posts = response.data;
      });
  });
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>HTML</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div ng-app="app" ng-controller="ApiCtrl"&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="post in posts"&gt;{{ post.title }}&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>$location</strong><br />The <code>$location</code> service allows you to interact with the browser&rsquo;s URL, enabling navigation and manipulation of the path, search, and hash components of the URL.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', [])
  .controller('LocationCtrl', function($scope, $location) {
    $scope.changeUrl = function() {
      $location.path('/newPage');
    };
  });
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>$routeProvider</strong><br />The <code>$routeProvider</code> is used for setting up routing in AngularJS applications. It allows you to define URL patterns and the corresponding templates and controllers to handle those patterns.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeCtrl'
      })
      .when('/about', {
        templateUrl: 'about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/home'
      });
  });
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>$timeout</strong><br />The <code>$timeout</code> service allows you to execute a function after a specified delay, similar to JavaScript&rsquo;s <code>setTimeout()</code> method. It also supports cancelling timeouts.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', [])
  .controller('TimeoutCtrl', function($scope, $timeout) {
    $scope.message = 'Hello, world!';
    $timeout(function() {
      $scope.message = 'Timeout executed!';
    }, 2000);
  });
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>$interval</strong><br />The <code>$interval</code> service is similar to <code>setInterval()</code> in JavaScript and is used to execute a function repeatedly at specified intervals.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', [])
  .controller('IntervalCtrl', function($scope, $interval) {
    $scope.count = 0;
    $interval(function() {
      $scope.count++;
    }, 1000);
  });
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>$filter</strong><br />The <code>$filter</code> service allows you to filter data in AngularJS. It can be used to format data (e.g., currency formatting, date formatting) or to filter arrays based on conditions.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', [])
  .controller('FilterCtrl', function($scope, $filter) {
    $scope.data = [1, 2, 3, 4, 5];
    $scope.filteredData = $filter('filter')($scope.data, 2);
  });
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>$watch</strong><br />The <code>$watch</code> service is used to observe changes in a scope variable. It triggers a callback whenever the watched expression changes.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', [])
  .controller('WatchCtrl', function($scope) {
    $scope.count = 0;
    $scope.$watch('count', function(newVal, oldVal) {
      console.log('Count changed from', oldVal, 'to', newVal);
    });
  });
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>$compile</strong><br />The <code>$compile</code> service allows you to manually compile HTML strings or DOM elements and link them to a scope. This is useful for dynamically generating content.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', [])
  .controller('CompileCtrl', function($scope, $compile) {
    var element = angular.element('&lt;p&gt;{{ message }}&lt;/p&gt;');
    var compiledElement = $compile(element)($scope);
    angular.element(document.body).append(compiledElement);
    $scope.message = 'Hello, AngularJS!';
  });
</code></pre>
</div>
</div>
</div>
</div>
</li>
<li>
<p><strong>$log</strong><br />The <code>$log</code> service is a wrapper around <code>console.log</code> for logging messages. It provides methods like <code>info()</code>, <code>warn()</code>, and <code>error()</code>.</p>
<p><strong>Example</strong>:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">javascript</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-javascript"><code>angular.module('app', [])
  .controller('LogCtrl', function($scope, $log) {
    $log.info('This is an info log');
    $log.warn('This is a warning');
    $log.error('This is an error');
  });
</code></pre>
</div>
</div>
</div>
</div>
</li>
</ol>
<hr />
<h3>AngularJS API: Directives</h3>
<ol>
<li><strong>ng-app</strong>: Bootstraps the AngularJS application.</li>
<li><strong>ng-model</strong>: Binds form inputs to a model.</li>
<li><strong>ng-repeat</strong>: Repeats an HTML element for each item in a list or array.</li>
<li><strong>ng-click</strong>: Specifies behavior when an element is clicked.</li>
<li><strong>ng-show / ng-hide</strong>: Conditionally shows or hides an element.</li>
<li><strong>ng-bind</strong>: Binds the value of an expression to the element's content.</li>
<li><strong>ng-if</strong>: Conditionally includes or excludes an HTML element.</li>
</ol>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More