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.

1. Learn the basics of TypeScript first

At Insiten, we have a major client who uses AngularJS (aka Angular 1.x) and we do our best to follow best practices. John Papa and Todd Motto are household names around the office.

Unfortunately, a working knowledge of version 1 does not readily translate to a working knowledge of version 2+ because the Angular team majorly overhauled the framework in their upgrade. There are a plethora of changes, but one the most (in)famous was the integration of TypeScript as a standard part of the framework in place of JavaScript.

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.

2. Build a fairly simple project

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.

3. Organize the project in a sensible way

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
  • The pages directory 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.
  • The shared directory contains (name).data.ts and (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 shared because 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.
  • The scss directory contains a few partials that can be imported into individual components as needed (namely _variables.scss and _mixins.scss), as well as a main.scss file 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.

Conclusion

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!