App Module vs Core Module vs Shared Module vs Feature Modules in Angular

Angular Icon

Angular development best practices indicate we should break our applications into modules. Modules in Angular refer to a place where we group like components, services, directives, pipes, etc for our applications.

The easiest to think about would be Feature Modules we simply break these up by feature or domain. But what about the App Module, Core Module, & Shared Module?

What should we put into each of them? What components should live in each of them? Why do we need all of them? Let’s take a look at each of the types of modules and what they are used for.

App Module

Lets first take a look at the App Module in Angular. The App Module can also be called the root module. Every app must contain at least one module and that is the App Module. We launch our applications by bootstrapping the root module.

We want to keep our App Module pretty compact. There should not be a lot of content in the App Module or App Component. We want to encapsulate our application into domain-specific modules, the Core Module, & the Shared Module, which we will look into now.

Core Module

The Core Module is where we want to put our shared singleton services. So the services that we want only one instance of while having them shared among multiple modules should live here.

The Angular injector creates a new instance of a service for each lazily loaded module that it is provided in. We want to keep our singleton services in the core module so only one instance is ever created. We do not want to spread them out in our feature modules.

Another piece of our application that should live in the Core Modules are app-level components. A good example of an app-level component would be the navigation bar. Only the app needs to know about our navigation component.

We do not want to put components used throughout the application inside of the Core Module. We have the Shared Module for that and we will look at that now.

Shared Module

The Shared Module is where we want everything to live that is shared throughout the application. Components, directives, guards, & pipes can all live in the Shared Module.

An example of something commonly found in the shared module would be a loading spinner. If you have any other components that you want to be distributed throughout your application the shared module is where you want to keep them.

It is also common to import and export Angular built modules inside your Shared Module if you need to access them in multiple locations. Because Shared is imported into many of your Feature Modules it’s common to import/export Common Module or Angular Material modules. Import/Export the modules once in Shared Module and now anyone that imports Shared will have access to them.

Feature Modules

Applications commonly have multiple Feature Modules. Depending on the size of your application you may have A LOT of Feature Modules. Breaking things up into domain-specific areas can help in the long run for development.

One of the main reasons to break your features up into different modules is lazy loading. If you want to learn more about lazy loading check out the Angular documentation on Lazy Loading Feature Modules.

Laptop Code

Now you have a better understanding of how to separate your different modules in Angular. For more on modules check out the Angular Introduction to Modules.

Creating a C# ASP.Net Core API course now available on Thinkster.io

In June of this year, I began working on my first ever online technical course. It just got published! Check out my course published on Thinkster.io: Creating a C# ASP.Net Core API. I put in a ton of hard work to create the course and hope others can learn from it and enjoy it.

Link to Thinkster.io Course Creating a C# ASP.Net Core API

The course covers how to make your own API with C# using ASP.Net Core. It starts with the basics covering the GET, POST, PUT, & DELETE HTTP methods and expands into the more advanced cases. You will also learn about status codes, error handling & C# best practices.

The course provides you with the skeleton code for a space-themed API and contains four different exercises to reinforce and test your learning. By the end of the course, you will have your own fully functioning space-themed API written in C# using ASP.Net Core.

Basic knowledge of C# and the desire to learn is all you need to be successful in the course.

Brooke Avery and Joe Eames deserve a big THANK YOU for the support and help in developing this course. Expect more courses in the future. I think my next one will be on LINQ!

I am a podcaster now!

Over the past two weeks, I have been a guest on two podcasts The Mob Mentality Show and the Dev Ed Podcast. These two recordings have been my first ever experiences on a podcast and I have to say they were both lots of fun! As of right now, the two recordings are not live but expect posts in the upcoming weeks highlighting the recordings.

On The Mob Mentality Show, I got to talk about my recent presentation at the Pacific Northwest Software Quality Conference on Creating Quality with Mob Programming. I also got to talk about my other experiences as a mob programmer for the past 4 years.

For the Dev Ed Podcast, the topic was ASP.Net. I have a course coming out very soon on Thinkster.io teaching how to create a C# ASP.Net Core API so that is why the topic was ASP.Net. I got to speak to ASP.Net but also my experience as a university instructor.

When the two podcasts are live and out in the wild I will be sure to update the post with links! Also, I hope to be a part of many more podcasts in the future.

What are Structural Directives in Angular?

Structural Directives in Angular modify what is displayed in a view. They live directly in the HTML. They modify our HTML by adding, removing, or manipulating elements.

Why are they called structural directives? It is because they modify the structure of the Document Object Model (DOM).

Structural directives are easy to spot. They will begin with an asterisk (*). And the two most common structural directives are *ngIf and *ngFor.

Above is how we use a *ngIf. The if statement will evaluate on TheTomBomb and only if that is true will it include “Thomas is the best” into our DOM and viewable to the user.

If TheTomBomb evaluates to false “Thomas is the best” will not display. And not only that, but it will also not be present in the DOM.

The above *ngFor will print out a list of website url’s. The websites variable is a list of websites and we will loop of that and generate a new <li> for each one in our collection. So a new <li> element will be created in the DOM for each item in websites.

Structural directives are popular and give us added capabilities inside of our HTML. *ngIf is perfect for showing and hiding data. *ngFor is great when we need to generate repeated HTML.

To learn more check out the Angular documentation on Structural Directives.

What is Test-Driven Development (TDD)?

At my organization, we utilize test-driven development (TDD) to develop our software. To get a better understanding of TDD myself, I want to put together a post about what is test-driven development.

What Is a Test?

Before jumping straight into TDD let’s define what a test is. A test is something that verifies that our code works as we expect it to. Typically, this is a procedure or method that executes and asserts that a given valid response is received.

With a test, we verify that our code solves the problem it was intended to solve. That given a particular set of inputs and setup we get back the responses or see the changes that we would expect.

What is Test-Driven Development?

Test Driven Development

TDD can be defined as a programming practice that instructs developers to write new code only if an automated test has failed. Guru99

The above definition is from Guru99. Let’s break it down and I will put TDD into my own words.

The code we develop is driven forward by our test hence, Test-driven development. We write our test first before the implementation has been written. Making sure the test fails and for the right reason. Our test asserts proper functionality. Our test should satisfy the requirements of the software.

We then write the code that makes the test pass. This means our production code is already under test because we wrote the test first.

Red Green Refactor

Red Green Refactor is an important concept in TDD. Above I described how we wrote a failing test this is the red. Then we wrote the actual implementation code to make the test pass this is the green.

We have made it to the refactor step. Now that we have code written that is tested we can feel comfortable to refactor it. Maybe we see code duplication or any number of code smells.

With the tests backing us up, we can feel comfortable modifying the code running our tests and ensuring we are still green.

The simple definition of Test-Driven Development is that we write our tests first. The code is tested from the very beginning. We gain the confidence to refactor and improve our code.

Expect more posts on TDD as I expand my own knowledge of test-driven development!

PNSQC 2019 Talk Complete! Creating Quality with Mob Programming

PNSQC Culture Of Quality 2019 Logo

This week I had the pleasure of attending and speaking at the Pacific Northwest Software Quality Conference (PNSQC). This is my second time attending the conference and my first time presenting at this conference or any conference for that matter.

I wrote a technical paper and gave a presentation on Creating Quality with Mob Programming. Writing the paper was the most difficult part. I had not written a research paper in years. But it all came together and after writing the paper the presentation was easy. In addition, the presentation has boosted my confidence and makes me want to submit talks to more conferences.

Unfortunately, the archived links of the paper and presentation slides are not available yet, but I will update this as soon as they are.

The presentation was well-received. It sparked great conversations with people interested in learning more about Mob Programming. It helped to inspire a renewed passion for Mob Programming and reinforced that we must be doing something right.

Michael Larsen attended my presentation. He was generous enough to write a live blog post on his thoughts on Mob Programming. Check it out here! (https://www.mkltesthead.com/2019/10/creating-quality-with-mob-programming.html)

Without a doubt I want to attend and potentially speak at another PNSQC conference. The people, content, and downtown Portland location are great.

Thanks again PNSQC 2019!

Creating Quality with Mob Programming talk at PNSQC 2019

A few months back I was accepted to give a technical presentation at PNSQC 2019 (Pacific Northwest Software Quality Conference) titled Creating Quality with Mob Programming.

My final draft of the technical write up has been turned in and will be published in the 2019 proceedings. The paper and finding will be shared at my presentation. I am excited and nervous about the presentation as it will be my first ever talk at a conference. I am definitely more excited than nervous though!

Get more information on the talk here https://www.pnsqc.org/creating-quality-with-mob-programming/. If you can make it to PNSQC 2019 check out my talk.

ASP.Net Core API Course in the works

Recently, my time has been spent working towards creating my first ever online video course. I am currently generating content for a course focusing on C# ASP.Net RESTful API’s. The course teaches students about API’s and how to implement their own in C#. I will be publishing the course on Thinkster.io later this year.

I found out about Thinkster.io at a recent conference that I attended. They were looking for content authors. I had recently put in my resignation as an instructor at my local university and wanted a new challenge. Authoring online courses had always intrigued me and the opportunity to work with the Thinkster team piqued my interests. Their focus on exercise-based learning was a big plus.

I have a brand new recording configuration in my office and hope to generate a lot of video content. Take a look at my setup. I am excited to be working on my first ever online course and hope to create many more in the future.

Weather Ride Hits the iOS App Store

Weather Ride is officially released to the iOS app store. It’s free and available to download now. Give it a go now!

The app has been iOS ready for a while but I finally pulled the trigger and paid the $99 subscription fee to get my Apple Developer account. I’m glad I did because now I’ve got my app in both major store iOS and Android.

Now that it is getting more into Motorcycle Riding season I hope to promote the app more. I want it in the hands of more riders.

Expect plenty updates in the future, a major focus is UI overhaul to allow the app to function better on smaller screens is in the works. Right now, you can check out the latest versions of Weather Ride on the Android Play Store and the iOS App Store.

Weather Ride A Motorcycle Riding Weather App UI Overhaul

I have recently found motivation to work on my Android app Weather Ride. It is a weather app that makes suggestions on whether or not today or the current week is a good day to hop on your motorcycle and go for a ride.

I did some refactoring over the past few weeks but the bulk of my work has been put into revamping the terrible UI. First I got a designer to create some mockups and icons. Then I began implementing the much more professional look and feel. Below you’ll see the UI progress made so far.

Current UI of Weather Ride mobile app.

There is still more to do. I have not had a chance to touch the settings screen yet. I have mockups for that and I hope to tackle it soon. It gets the job done but not in the prettiest way.

Please install and provide feedback on Weather Ride available in the Android play store now.