DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • How to Effortlessly Host Your Angular Website on GitHub Pages
  • Angular vs. Flutter for Web App Development: Know Which One Is Best?
  • Difference Between Bootstrap and AngularJS in 2022
  • A Brief Guide to Using Sass/SCSS in an Angular App

Trending

  • Why Database Migrations Take Months and How to Speed Them Up
  • Build Your First AI Model in Python: A Beginner's Guide (1 of 3)
  • How to Build Local LLM RAG Apps With Ollama, DeepSeek-R1, and SingleStore
  • Scalable, Resilient Data Orchestration: The Power of Intelligent Systems
  1. DZone
  2. Coding
  3. Frameworks
  4. What is a Provider() in Angularjs?

What is a Provider() in Angularjs?

The provider() function allows us to create a configurable service where we can set input per application for the service created using the provider(). Let's take a look at it in detail.

By 
Josh Anderson user avatar
Josh Anderson
·
Feb. 26, 16 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
36.8K Views

Join the DZone community and get the full member experience.

Join For Free

The provider() function allows us to create a configurable service where we can set input per application for the service created using the provider(). For example, if we need to set API key to access a service on the application level, we can set that in the module config and pass input to the provider using the $provide service. All the others ways to create services internally use the $provide service.

Creating a Service Using $provide Service in module.config 

Let us start by creating a very simple service using the provider() function.  

app.config(function ($provide) {
 $provide.provider('globalsetting', function () {
 this.$get = function () {
 var appname = "Lawyer App";
 return {
 appName: appname
 };
 }
 })
});

 Let’s explore what is going on in the above snippet. To create a service using provider, we need to use the $provide service. The provider function of the $provide service takes two parameters: the name of the service and the function. A provider function must have a $get function. To create a simple service using the provider(), we need to perform following five steps:

  1. Inject the $provide service in the app config method
  2. Create a provider using the provider() function
  3. Pass two parameters to the provider() function: the name of the service and a function
  4. The provider function must contain a $get function
  5. Return an object literal from the $get function

We can use the globalsetting service created using the provider by injecting it in a controller as shown in the listing below:

app.controller("ProductController", function ($scope, globalsetting) {

 $scope.name = globalsetting.appName;

});

Eventually, we can display data from the globalsetting setting service on the view by using the ng-controller directive as shown in the snippet below:

<div ng-controller="ProductController">
 {{name}}
 </div>

Creating a Service Using the Provider() as a Function of the Module Object 

We have created a service using the provider inside the config of module. There is also another way to create a service using the provider: AngularJS also has exposed the provider() function on the module object. For simplicity’s sake, we can directly use the module.provider() to create a service and register the created service in the config of module.

To create the service using the provider() function on the module object, we need to:

  1. Create a service using the module.provider()
  2. Register the service in the module.config()
  3. While registering the service, we need to append the Provider with the service name. So if the service name is globalsetting, we will register in module.config as globalsettingProvider

Let us recreate the globalsetting service using the module.provider() function:

app.provider('globalsetting', function () {

 this.$get = function () {
 var appname = "Lawyer App";
 return {
 appName: appname
 };
 }
});

In step 2, we need to inject the service to the app config. Do you remember injecting the $routeProvider? In the same way, we need to inject the globalsettingProvider in the app config as shown in the snippet below:

app.config(function (globalsettingProvider) {

});

There is no setter in the globalsetting service, so we are not passing any value to the service created using the provider. We can use globalservice in the same way as when it was created using the $provide service in the config:

app.controller("ProductController", function ($scope, globalsetting) {

 $scope.name = globalsetting.appName;

});

Creating Setter for the Provider()

Let us take a look in the globalsetting service. Right now we are hardcoding the name of the app, but in a real life scenario, we may want to pass the name of the app from the main module app. To do this, we need to create a setter for the provider. Setters are nothing but a function like $get in the provider.  We can create a setter for the globalsetting service provider as shown in the listing below:

app.provider('globalsetting', function () {

 var appname = "LAWYER APP";
 this.setAppName = function (value) {
 appname = value; 
 }
 this.$get = function () {

 return {
 appName: appname
 };
 }

});

Let’s see what’s going on in here:

  1. We created a setter function.
  2. We are passing a parameter in the setter function.
  3. We’re also setting the appname with  parameter passed 

Now while injecting the globalserviceprovider to the app config, we can pass the name of the app.

app.config(function (globalsettingProvider) {
 globalsettingProvider.setAppName("Infragistics App");
});

Eventually, globalservice can be used in the controller as shown in the listing below:

app.controller("ProductController", function ($scope, globalsetting) {

 $scope.name = globalsetting.appName;

});

Refactoring Factory() to Use $provide Service 

As we discussed earlier, the service() and factory() functions are just syntactic sugar on $provide and internally uses $provide. Let us see how we could refactor a service created using the factory() to use $provide. Here we’re creating a service called greet using the factory() as shown in the listing below:

app.factory('greet', function () {
 return {
 message: "hello to my app"
 }
});

Internally, the factory() function uses the $provide service. So instead of using the factory() method on the module object, we can create the following as the service:

app.config(function ($provide) {
 $provide.factory('greet', function () {
 return {
 message: "hello to my app"
 }
 })
})

As you can see, the $provide service exposes a factory() method, which takes two parameters: the name of the service and the function.  So we can conclude that using the factory() function to create a service is a simplified syntax of $provide.factory().

Where to Use a Provider

We should use a provider when we are creating a service for the entire application. For example, when we are creating service to retrieve data from the API we need to set the API key once per application. We can set that in the config of app and pass that to the setter function of the provider.

And that about covers it for AngularJS providers! I hope you find this post useful, and thanks for reading!

This article was written by Dhananjay Kumar

app AngularJS

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • How to Effortlessly Host Your Angular Website on GitHub Pages
  • Angular vs. Flutter for Web App Development: Know Which One Is Best?
  • Difference Between Bootstrap and AngularJS in 2022
  • A Brief Guide to Using Sass/SCSS in an Angular App

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!