Angular Best Practices: Breaking Down A Page into Components

Joe-EamesWelcome 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s