AngularJS API: Built‐in Power for Your App - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Unlocks AngularJS’s Secret Tools

Scene: Looking for Shortcuts

After building forms, validation, and connecting to data, the StartApp team is ready for some advanced features.

“We want our app to be even smarter, but we don’t want to reinvent the wheel. Is there a way to access timers, utility methods, and powerful helpers without third-party libraries?”

Sara (Junior Dev): “I heard AngularJS has a whole set of built-in services and objects, like $timeout, $interval, $filter, $log, and more. They’re all part of the AngularJS API!”

Mike (Team Lead): “Let’s see how these can make our life easier—and our code shorter!”

1. Using $timeout for Delays and Animations

Sara: “Need to show a message for a few seconds? Use $timeout!”

app.controller('msgCtrl', function($scope, $timeout) {
  $scope.showMsg = false;
  $scope.displayMsg = function() {
    $scope.showMsg = true;
    $timeout(function() {
      $scope.showMsg = false;
    }, 3000); // 3 seconds
  };
});

<button ng-click="displayMsg()">Show Message</button>
<p ng-show="showMsg">This message will disappear in 3 seconds!</p>

2. Using $interval for Repeating Actions

Mike: “Want to update the clock or poll the server every second? Use $interval.”

app.controller('clockCtrl', function($scope, $interval) {
  $scope.time = new Date().toLocaleTimeString();
  $interval(function() {
    $scope.time = new Date().toLocaleTimeString();
  }, 1000);
});

<p>Current Time: {{ time }}</p>

3. Formatting Data with $filter

Lina (Designer): “Can I use a filter in code, not just in HTML?”

app.controller('priceCtrl', function($scope, $filter) {
  $scope.price = 1234.567;
  $scope.prettyPrice = $filter('currency')($scope.price, '$');
});

<p>Price: {{ prettyPrice }}</p>

4. Logging and Debugging with $log

Sara: “No need for console.log everywhere!”

app.controller('debugCtrl', function($scope, $log) {
  $log.info('This is an info message.');
  $log.warn('This is a warning!');
  $log.error('This is an error!');
});

$log lets you write info, warnings, or errors—filtered by your app’s debug level.

5. Working with $location and $window

Mike: “Want to get or set the URL, or open a new window?”

app.controller('navCtrl', function($scope, $location, $window) {
  $scope.goHome = function() {
    $location.path('/home');
  };
  $scope.openGoogle = function() {
    $window.open('https://www.google.com');
  };
});

6. The $rootScope: Sharing Data Across Controllers

Sara: “Put shared data on $rootScope to make it available everywhere.”

app.controller('mainCtrl', function($scope, $rootScope) {
  $rootScope.appTitle = "StartApp Task Manager";
});

<h2>{{ appTitle }}</h2>

Now, every controller and view can access appTitle.

7. Full Example: Using Multiple AngularJS API Services

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="apiApp" ng-controller="apiCtrl">
  <h2>{{ appTitle }}</h2>
  <button ng-click="displayMsg()">Show Timed Message</button>
  <p ng-show="showMsg">This disappears in 2 seconds!</p>
  <p>Current Time: {{ time }}</p>
  <p>Pretty Price: {{ prettyPrice }}</p>
  <button ng-click="openGoogle()">Open Google</button>
</div>
<script>
angular.module('apiApp', [])
.controller('apiCtrl', function($scope, $rootScope, $timeout, $interval, $filter, $window) {
  $rootScope.appTitle = "StartApp API Demo";

  $scope.showMsg = false;
  $scope.displayMsg = function() {
    $scope.showMsg = true;
    $timeout(function() {
      $scope.showMsg = false;
    }, 2000);
  };

  $scope.time = new Date().toLocaleTimeString();
  $interval(function() {
    $scope.time = new Date().toLocaleTimeString();
  }, 1000);

  $scope.price = 1234.567;
  $scope.prettyPrice = $filter('currency')($scope.price, '$');

  $scope.openGoogle = function() {
    $window.open('https://www.google.com');
  };
});
</script>
</body>
</html>

8. Team Discussion: Why Use the AngularJS API?

Sara: “So many ready-to-use tools—no need to reinvent the wheel!”
Lina: “Formatting, timers, logging, navigation, shared data… all built-in.”
Mike: “Cleaner, more reliable code, and lots of power under the hood.”

Key Takeaways

The AngularJS API is full of built-in objects, services, and methods to help with timers, formatting, logging, navigation, and more.
Use them for more professional, maintainable, and concise code.
Explore the [official AngularJS API documentation](https://docs.angularjs.org/api) for even more features!

Team Conclusion

Mike: “Using the AngularJS API, our app is smarter, faster to build, and easier to maintain.”

Sara: “Let’s look at AngularJS routing, animation, or custom directives next!”

Try all these examples live in the [W3Schools AngularJS TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_api).