Recently, I completed my first project in Angular: a portfolio site for a friend of mine who’s a Senior Producer at an advertising agency. Along the way, there were a handful of things I learned that might provide some useful direction for other developers interested in building their own project with the framework.
I was intimidated by this substitution. TypeScript seemed complicated, plus I had never worked with a strictly typed language before. I tried to dive right into the official Angular tutorial, but it went poorly because there was simply too much new material and unfamiliar syntax for me. In order to break down the unknown into smaller chunks, I decided to put Angular aside for a while and focus purely on learning TypeScript for a few weeks.
This turned out to be a great decision and one that I would definitely recommend. A decent understanding of TypeScript’s features was tremendously helpful in jumping the gap between the old and new versions of Angular. When I came back to give the official tutorial another shot, I was able to clearly distinguish which code was the language (TypeScript) versus which code was the framework (Angular) and I learned far more than I did in my first attempt.
When starting out with a new language/framework/tool, building a straightforward project is a surefire way to learn a lot about it. This is an unoriginal piece of advice, but it’s repeated often because it truly works. Becoming an excellent developer is a long, arduous process; it’s important to achieve and celebrate small victories along the way.
Angular is a massive, high-octane framework loaded with impressive features. There’s a lot of cool stuff you can do with it, but it’s an opinionated tool and it takes time to get used to it. In my project, I intentionally focused on the basics: using the Angular CLI, storing business logic in simple services, passing data from parent to child components, and using the animations module for slick page transitions. Nothing too crazy, but at the end of the day it’s a project that my friend loves and I’m proud to show off.
What makes good project architecture is subjective, but the official style guide does offer some guidance on the matter that essentially boils down to “keep it intuitive.”
In the specific case of my project, I found that the cleanest way to structure the project was the following:
// inside the src folder
> app > pages > home > work > project > about > misc > components > header > project-tile > services projects.service.ts misc.service.ts > pipes safe.pipe.ts > shared projects.data.ts project.model.ts misc.data.ts misc.model.ts app-routing.module.ts app.component.html app.component.scss app.component.ts app.module.ts > assets // ... files and images go here > scss _reset.scss _variables.scss _mixins.scss main.scss // ... all other files
pagesdirectory contains the components that are used to show an entire page of the portfolio. This idea was sparked by this Medium postwritten on the topic of Angular project structure.
(name).model.tsfiles. The model files contain TypeScript interfaces (chunks of code that define what the shape and types of a set of data should be), and the data files contain hard-coded data that populate different pages of the portfolio. The folder is titled
sharedbecause I wanted to make it semantically clear that the files inside of it get imported in multiple places across the app. This was a technique I learned from this Udemy course.
scssdirectory contains a few partials that can be imported into individual components as needed (namely
_mixins.scss), as well as a
main.scssfile that imports said partials and also defines all of the project’s global styles. Hands down, the best resource I found to answer my questions on configuring SCSS in my project was this scotch.io tutorial.
There’s nothing that bolsters a developer’s confidence like building a project. Angular hasn’t been the easiest tool to learn, but I’m pleased with my overall experience and I’m looking forward to using it again. If you’re reading this and have any wisdom on how to build great Angular applications, don’t hesitate to leave a comment!