- AngularJS has the feature to create provider which act like a factory to provide data to the application.
- A provider can be defined using provider() function.
- A provider has to implement $get() method to be used.
- In this demo, "We will create a fruit name provider which will injected in application configuration and used by the controller to display all the fruit name in the browser".
- Below code shows the HTML markup used for displaying fruit name as a ordered list.
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.min.js">
</script>
<meta charset="utf-8">
<title>AngularJS Provider Example</title>
</head>
<body ng-controller="FruitController">
<ol>
<li ng-repeat="fruit in fruits">
{{fruit}}
</li>
</ol>
</body>
</html>
- Below code shows the declaration and use of fruit name provider.
var studentApp = angular.module("studentApp",[]);
//Declaring a provider
studentApp.provider('fruitNames',function(){
return {
$get: function(){
return {
"list":[
"Apple","Grapes","Orange",
"Banana","Pears","Plum",
"Mango","kiwi","litchi"
]};
}
};
});
//Injecting the provider to application config
studentApp.config(function(fruitNamesProvider){});
//Using a provider inside controller
studentApp.controller("FruitController",
function ($scope,fruitNames) {
$scope.fruits = fruitNames.list
});
- Code for the above demo is present in the given fiddle link .Output of the above demo is shown below embedded fiddle.
