Non-trivial Angular Example

I’m working on creating a simple application that shows off a non-trivial example of how to use Angular to create web applications.

The application, when complete, will be JobRM, a clever name that really means Job Relationship Manager. Well, I think it’s clever. The license is Unlicense, so feel free to use it, or change it — I don’t care. The goal of the project is to show how to integrate multiple technologies and how to go through the process of evaluating and implementing different tools, and potentially even reverting some once implemented.

Project Management

While this is a test bed of sorts, I will add a little management to the project, mostly for sanity’s sake and to have a place to add ideas and features for future development. I created a GitHub organization because I know that I will have multiple repos for different parts of the project, such as WebUI, WebApi, MobileUI. A great quick feature of GitHub is Projects that can be created at the organization level to keep track of features. I will set up a simple Kanban board and a starting story. I will most likely forget about this later and never update again, but when working with a team, this feature is worth exploring since it already comes with the tool set that I am using. I believe the most important tool is the one used by everyone, not the one with the most features, and think it’s important to explore other options until you find a good fit for your team. Sometimes what works is can be a giant email chain, a simple excel document, or a Google Sheet that keeps a list of all the features. There is no one universal tool to get things done.

Starting the project

I begin with a base of a project. Since this is an open source and free-to-use project, I start with a free template. I am also not well-versed in CSS so starting out with a template is great way to create something that is not terrible to use. The simplest for me to use and implement is Bootstrap, which is the base of the template. There are a great many templates out there and I chose CoreUI because it’s free, simple to use, and has a pretty decent Angular starting project.

To pick an open source project to use, I usually take the time to first research a bit about what I need and what the project offers, plus I figure out how well it is maintained. There are a lot of projects on NPM with pull requests to fix known bugs that never get merged-in since the project is essentially dead. So be certain to check the number of downloads on NPM, and then check the repo itself. You will then need to answer a couple of basic questions about how many commits have been there lately, how many issues have been solved, and how many are still open. I would then recommend reading through the code and making sure that it seems to be in good condition and has tests and coverage reports. After being sufficiently satisfied with health and quality, I usually clone the repo and try to get the simplest example going with that project. Once satisfied with that, I move on and never look back.

As with others, I tested out CoreUI before picking it as a base, and so far it seems to be good enough to start with. Łukasz Holeczek did a great job, so check out his other projects and buy his template! (I have no affiliation and he doesn’t know I’m promoting him, I just think he did a great job)

Once you download or clone https://github.com/mrholek/CoreUI-Angular you will see 2 types of projects; I would go with the starter, since it is a bare bones ui. The other one has the Full demo source code in it and may be useful if you want to get some ideas and/or copy/paste some code.

Logo

Let’s make a quick logo. I found a simple poster board with a bunch of notes and a list.

After about 20 minutes we have something that doesn’t look terrible.

Don’t forget to create a simple little favicon and check everything in.

Progression of the application can be viewed at https://github.com/JobRM/webui/releases.