Breaking out the list application into two controllers :-
Reformatted both List Column and detail column. Added new controller description to both columns as PersonListController and PersonDetailController. In main.js, modified PersonsController to PersonListController and added a new controller as PersonDetailController. When I tested out by clicking on row they are getting highlighted, ordered but its binding to details column is broken. In the next section we will bind the data with two controllers using $rootScope.
code :- https://github.com/praneethkumarpidugu/angular1-core/commit/c352be272a7f5559661eec03ce533be0bb0215bc
Sharing data between controllers using $rootScope :-
In index.html, for PersonDetailController, it is selectedPerson of PersonListController which isn’t binded. One of the solution is to add $rootScope as argument to PersonListController function and change the selectedPerson scope from $scope to $rootScope. This works now! But angular-js community says that this kind of approach pollutes data and a better way is to use services.
code:- https://github.com/praneethkumarpidugu/angular1-core/commit/bfc2518a6d1cce9f5b3730d870276ad312bb5454
Sharing data between controllers using Services :-
List of angular js services with detail are here in this link.
First Service:-
After module definition we will add define the service as below:-
app.service('ContactService', function() { });
At the end of main.js, we will delete the persons array and insert it into services. Also we can add functions to the services.
Consuming our service in our controllers :-
Here in this sub section we will inject the service we created into controller. We approach this by adding it as an argument in PersonListController function. When we run the index.html, we see that persons data is not getting rendered.
We fix this by adding persons scope variable in PersonListController by assigning it to ContactService.persons. And the data is loading now.
But the selected row is not working. To fix this we will go back to index.html and change selectedIndex of background-color to person.email == selectedPerson.email. Next we will add the selectedPerson scope variable in PersonListController by assigning to ContactService. Add the same selectedPerson scope variable in PersonDetailController also. When we try to test details panel is still empty if we select on rows. To see the issue whether the data is binding in both controllers, we could use ng-inspector and clearly shows that selectedPerson is rendered in PersonListController.
We could also see if PersonDetailController is getting data or not in selectedPerson scope variable.
We notice from the above screenshot that selectedPerson is null. To fix this we will use dot notaion to bind selectedPerson. Firstly, inside the PersonListController we add a new scope variable which is getting directly binded with ContactService. We remove the selectPerson completely from PersonListController. In the Index.html, in ng-repeat directive we are not looping through the persons but contacts.persons and replaced selectedPerson with contacts.selectedPerson in all places (used command+R). Finally we will bind person to contacts.selectedPerson at ng-click directive. Test results show that in both ng-inspector and details panel it passed by showing selectedPerson details.
code:- https://github.com/praneethkumarpidugu/angular1-core/commit/e66ca27ce674b9220888e7728f1ef26d8eb1c56d
Connect our application to a REST API using ngResource :-
What are resources ?
Previous we have seen angular-js uses $http service to consume api requests and the api is CRUD application (Create, retrieve update and delete). angular has another system which is called ngResource, which takes care of lot of boilerplate code which we normally if we use $http service. Firstly we have to add it to our application and we will install using bower. We will add minified angular-resource path in index.html. Secondly, we need to add this to the dependencies section in main.js module definition.
code:-https://github.com/praneethkumarpidugu/angular1-core/commit/ef442fab9219e6c2e3dcc0507308dd4884305437
Configuring AngularJS resources :-
Firstly we will setup the $http service which is required for ngResource. In main.js, we will write app.config function to configure the application(config is normally called before controller, $http service requests). In Angular-js, services have factories such as $httpProvider which creates $http service. Here in the config, we will add the authorization of $httprovider with header of token.
//httpProvider is the factory of service which provides $http services. app.config(function ($httpProvider) { $httpProvide.defaults.headers.common['Authorization'] = 'Token TOKEN_NUMBER' });
additionally only for the above example, we will use $resourceProvider by a setting which will remove trailingslashes from the api data.
code:- https://github.com/praneethkumarpidugu/angular1-core/commit/03c6870ae79e1014f04522c8782fdcc54ee688f9