The AngularJS application is divided into five layers: an HTML user interface with embedded ng directives, an application JavaScript file that initializes the Angular application, a service layer that retrieves the data, a controller that coordinates the communication between your data access layer and your user interface, and, finally, the AngularJS library.
In step 3, we started by adding the AngularJS libraries to ensure that the browser's JavaScript engine understands the ng directives.
In step 4, we defined the app--a simple AngularJS app with the name packtApp.
In step 5, we built the controller with one built-in function. We injected the $scope variable into our controller, which will help us access variables from the global scope. We also injected packtCrmService, the service layer that we will define in the next step. The result from the service layer is then passed to the $scope.attributes variable accessible from the HTML View. The controller also set the $scope.loading variable to true and false. This will be used later in the HTML binding to show and hide sections, as the request is executing asynchronously.
In step 6, we defined the service layer that calls the metadata query from the previous recipe and returns the attribute's LogicalName values. Given that the result is in JSON format, the JavaScript engine is flexible enough to treat it as an array with attributes for each record. Notice how we are retrieving a value from windows.location.href. This attribute is defined in step 9, where we pass the entity GUID as a parameter. We can potentially use the Dynamics 365 metadata services to query the GUID of the entity and make the library completely generically, with minimal setup required. However, to reduce chattiness between client and server and improve performance, we are passing it as a static parameter value. As for the method to retrieve the query string value, we are simply using indexOf and the substring function. AngularJS provides better alternatives by enabling HTML5 mode. That said, to compact the code, and for simplicity, this has been omitted.
In step 7, we built our HTML file. Notice the relative path used to reference the JavaScript libraries, as we introduced a hierarchy using the forward slashes (/) in the name of the web resources.
In the HTML file, we use the dataLoading value to show and hide the relevant sections as the asynchronous calls are retrieving the data. Once the results are returned, the list <ul> appears. The ng-repeat directive loops through all the attributes and creates one list item, <li>, to display the LogicalName value of each attribute.
Finally, in step 9, we inserted the HTML web resource into the contact's form and we included the entity Metadata ID (retrieved in the previous recipe for the contact entity) as a parameter to avoid calling the metadata services twice. In case you are using the application on a different entity, you will have to retrieve the correct GUID for your entity using the technique from the previous recipe. There is always a compromise between how much you query, and how much you provide. It's a balance between performance and setup overhead.