Yesterday’s blog we learned how Angular framework manipulated the DOM, so let’s actually use it. First of all to install angular it is downloadable on their website Angularjs.org. In the course we downloaded it as a CDN, which is downloaded it from another server. This is beneficial so that applications work faster since it’ll be from another server and not on our app.
Angular makes it easier to maintain and manipulate the DOM through directives. You create directives with ng-(name), in my case the directive name was ng-app. A directive is generally either an attribute or a value of an attribute sitting on an HTML element. When HTML is processed these directives(special attributes) cause Angular to do work. When the directive name is found in the Angular app that references this name(app) well know we are looking at that slice of HTML.
Now to add in our Angular code. To do it we need to reference our own file. The script source has to equal the folder used for static content and that we actually respond to HTTP requests. In our project the folder code was “/assets/js/app.js/“.
<div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-155635758-508-5ce3d60cdb0fe' data-src='https://widgets.wp.com/likes/#blog_id=155635758&post_id=508&origin=trilamanila.com&obj_id=155635758-508-5ce3d60cdb0fe' data-name='like-post-frame-155635758-508-5ce3d60cdb0fe'><h3 class="sd-title">Like this:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class="loading">Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>