Welcome to Part 6 of this review of the Pluralsight course Angular Best Practices by Joe Eames.
Joe has worked both full and part time as a technical teacher for over ten years.
He has produced 18 courses for Pluralsight.
Breaking Down A Page into Components
Joe says its critical to understand how to break off pieces of functionality and separate them into Angular components.
We see an extended version of the app we saw in previous modules. It has login functionality.
Inline Controllers
First we look at our HTML and how to subdivide it off.
We make one section just for the navigation by adding an ng-controller directive.
We also do this for a Nav Bar Login, and we create a catalog controller.
There are a number of other changes to app.js demonstrated here.
In this lesson we go from one big controller, to several small and cohesive ones.
Controllers and ngInclude
We convert from inline controllers to using the ng-include
directive alongside the ng-controller
directive.
At 5 minutes into this lesson we see that the application works just as well as before.
Joe discusses the pros and cons of a variation we can use: we can move the ng-controller directive into the html file if we prefer.
We see that our Index.html is now very clean and easy to read.
Directives
Here we divide up our page into directives. We add navBar and navBarLogin directives.
After we see it working correctly, Joe changes the catalog directive from an inhirected scope to an isolated scope.
Conclusion
This module has been all about abstraction. Joe stresses that a good abstraction only contains the details that are relevant to our current perspective.