Angular js has lot of features but the one I like most is its services, well it has given the user to build a custom service and inject that service in to angular js components like controller where the data will be fetched from that service.
Angular Services are singleton for example if you store some retrieved data in the service as a variable and access that variable from various services or from various controller still it will give you the same data as it wont create multiple instances of the service.
In our current application we have just hard coded the data in our mainController as $scope.cars and in this tutorial we are going to bring the cars array form a carService which we are going to build in few minutes. Lets create a new js file in our services directive under js folder which we have created in the previous tutorials.
carService.js
app.service('carService',function(){ function getCarDetails(){ return ""; } return{ getCarDetails:getCarDetails } });In the above code we used app which is our angular app defined in the mainController and called a method from app which accepts two parameters. First is the string of service name “carService” and second is a function which is going to return/expose a method called getCarDetails. This method is then used from different places to get the car details. Now lets return the car array from this service.
carService.js
app.service('carService',function(){ //Hard coded cars Array var cars = [ {url:"https://static.pexels.com/photos/24353/pexels-photo.jpg", name:"SHELBY", desc:"The Shelby Mustang is a high performance variant of the Ford Mustang which was built by Shelby from 1965 to 1968, and from 1969 to 1970 by Ford. Following the introduction of the fifth generation Ford Mustang in 2005, the Shelby nameplate was revived as a new high-performance model, this time designed and built by Ford.[1]"}, {url:"https://static.pexels.com/photos/28993/pexels-photo.jpg", name:"BMW", desc:"BMW was established as a business entity following a restructuring of the Rapp Motorenwerke aircraft manufacturing firm in 1917. After the end of World War I in 1918, BMW was forced to cease aircraft-engine production by the terms of the Versailles Armistice Treaty.[5] The company consequently shifted to motorcycle production as the restrictions of the treaty started to be lifted in 1923,[6] followed by automobiles in 1928â29"}, {url:"https://static.pexels.com/photos/116675/pexels-photo-116675.jpeg", name:"LANDROVER", desc:"Land Rover is a car brand that specialises in four-wheel-drive vehicles, owned by British multinational car manufacturer Jaguar Land Rover, which is in turn owned by India's Tata Motors since 2008.[4] The Land Rover is regarded as a British icon, and was granted a Royal Warrant by King George VI in 1951"} ]; function getCarDetails(){ return cars; } return{ getCarDetails:getCarDetails } });Now lets see how we can use this new service in our mainController. Before injecting this service in controller we need to do few things.
- Add this carService.js in the index.html as script reference.
- Remove the cars array from controller but keep the $scope.cars as we will be fetching the data from the service and assigning it to $scope.cars.
Now lets do some angular injection…
mainController.js
app.controller('mainController',function($scope,carService){ $scope.cars = carService.getCarDetails(); $scope.desc = $scope.cars[0].desc; $scope.onSelect = function(index){ $scope.desc= $scope.cars[index].desc; } });The only change we did is moved the cars hardcoding from mainController to carService and injected carService in the mainController and assigned carService.getCarDetails() to $scope.cars rest everything is same. The app will be working as expected with the data part moved to service layer. For now we have hardcoded the cars array in carService itself. In the next tutorial we will get the cars array form a JSON service and we will be using $http service to fetch data from the service. Happy Coding.
Leave a Reply