AngularJS Directives power the HTML

Saturday, February 7, 2015

The initial page setup, reference the scripts and add the angular directives


Create a module and controller in the script file


Create a valid directive in the most minimal way possible


Insert the directive as an attribute dash casing it


Load the page in the browser and view the div is listed there with the directive in it


Add an attribute that takes a string and will display inside the element the directive has been added to


View the text is now displayed


Transform the directive into a custom element


In directive defintion add restrict attribute to restrict the directive to an element


Up on scope there is a user object with a name property


Inside the template attribute databind the user on scope to the name property


View the result on the web page


Add in some extra data and bind in the template, HTML tags are also valid


Refresh the web page and view the result


Remove the address from the user object


View the address heading still shows in the HTML


Add ng-show directive if user has a valid address property


View the address heading has completely disappeared


Add the address back in


The address heading comes back in with the address


Add three missions to the user object


Display the three missions on the user card, using an ng-repeat


View the directive is working just the way we want it


Create a new template and paste the contents of the template property in it


Change the template property to templateurl property and specify the name of the template


View the user data card element has been left inside the document


To remove the element from the HTML set the replace property to true


To replace the directive with the content of the element a single root element is required


The custom element has now been replaced


As of angular 1.3 the replace attribute has been deprecated, back off all changes done


Add some styling to the index file


Add some bootstrap styles to the template


View the result in the browser


Add a button to king the current user


Handle the click event and set the users rank


In the template display the rank of the user


Add an ng-show to the div to only show the contents if the user has a rank property


To the button add an ng-show to hide the button if the user has a rank


Click the kingme button


View the rank shows and the button hides


Default Success Warning Important Info Inverse
B S W I ? O