Angular Architecture: Best Practices
December 17, 2018
Kickstarting an Angular 5 Project with Bootstrap 4, Sass, and Font Awesome
Getting started with a new programming language or framework can be daunting. So much time is spent just trying to figure out how to do the simple things until you have it all sorted out. At least, that was my experience when starting my current application. Based on the requirements, our team decided that developing it with Angular would be a better fit than ASP.NET MVC.
This article is based on the results of many Google searches on the topics. These searches often yielded confusing results because of how Angular is a separate framework from AngularJS. Angular is the newer framework.
I wanted to write this article to help developers who are simply looking for a concise checklist to get started with Angular using Bootstrap 4, Sass, and Font Awesome.
Step 1: Use Visual Studio Code
I decided instead to use Visual Studio Code (VS Code), a lightweight code editor that I was somewhat familiar with. The VS Code documentation is excellent, and even provides a tutorial for getting started using VS Code and Angular.
Step 2: Use Angular CLI
Initially, I did not realize that Angular had its own Command Line Interface (CLI). Although it is not required to use, I found it to be essential. Angular CLI helps the developer fall into the pit of success by implementing “best practices.” For example, using Angular CLI to create a new Angular app will create the recommended folder structure. I use Angular CLI all the time to generate Components and Services, thus making it part of my regular workflow.
Like other aspects of Angular, the documentation for Angular CLI is excellent. You can find documentation that describes how to install Angular CLI as well so that you can get up and running quickly.
Once installed, you can use the “ng new” command within a terminal window to create a new Angular solution. The documentation details various switches that you can use. For example, I used this command to create my application:
ng new myApp --style scss
This creates a new folder called “myApp” and is already configured to use Sass. The “myApp” folder contains the entire folder and file structure for the Angular App. I can open this folder using VS Code and can start the application with the terminal built into VS Code using the CLI Command “ng serve –o”
In the terminal, you should see the starter template building and then the default browser display the home page.
Bonus: Webpack and Typescript
The second reason why we need a build process is because we are using Sass. Like TypeScript, the Sass files need to be compiled to CSS so that the browser understands them.
Angular CLI uses a library called WebPack for its build pipeline. What is really helpful is that this is already set up for you. Angular provides a file called “.angular-cli.json” that allows you configure different aspects of the build process. But, I’ve found that I rarely need to touch this file.
Step 3: Using Bootstrap 4
Adding Bootstrap 4 to the project is accomplished by using NPM:
npm install email@example.com
This will add a dependency to the package.json file and download the Bootstrap files into the node_modules folder. Included in the download are the Sass files that are needed. Font-Awesome can also added the same way:
npm install font-awesome
We need to import the Sass files from both projects in order to use them. This can be done by editing the file named “main.scss,” which was by the Angular CLI when the project was created. Specifically, it was the “—style sass” switch that created it. If you forgot to use this switch, then Angular will expect you to use CSS. However, you can configure Angular to use Sass by running the command “ng set defaults.styleExt scss”
To add the Sass imports, edit the “styles.scss” and add the following imports:
That is all you have to do. Now the build process will compile the CSS for Bootstrap and Font Awesome and use them in your project.
Step 4: NG Bootstrap
Then I discovered a library called NG Bootstrap that provides Bootstrap 4 components powered by Angular. Since this is an Angular re-implementation of the Bootstrap components, it removes the external references such as JQuery and Popper.
Have I said how much I like the documentation I have found? The documentation for NG Boostrap is also excellent. It provides instructions for their widgets as well as step by step instructions for installing NG Bootstrap.
The final step is to bookmark the documentation to Angular: I recommend trying to find answers there before heading over to Stack Overflow. If you have access to Pluralsight, I also recommend “Angular: Getting Started” by Deborah Kurata, and “Angular CLI” by John Papa. Both of these courses are rated for beginners. Mosh Hamedani has a Complete Angular Course on Udemy.
So what was the biggest difference I found between AngularJS and Angular? The concept count is much lower for Angular, making it much easier to learn. Once you have the concepts of Components and Services down, you can be very productive. And isn’t that what we want at the end of the day? To not want to waste time on the mundane tasks involved with configuring a new project, and just get coding!
And for anyone interested, I added a source code sample on my git hub: https://github.com/ChuckBryan/KickstartingAngular
Good Luck and Happy Coding!