How To Start From Scratch with Angular - A Beginner's Guide

​Because I use it at work, one of the things I've learned a bit about in the last six months as a developer is the JavaScript framework Angular (not to be confused with AngularJS; they're different). As a follow up to my last post, I want to post a step-by-step of how to get started with Angular from scratch. I'm going to write it as generic as possible, but I mainly work with Windows 10, so you may have to adapt pieces if you're using MacOS; however, I have also set up an environment to develop with Angular on my Macbook, so I'll try to throw those nuances in if I can remember them. I'll use my previous post about the Star Wars challenge as an example.

Step 1 - Get a good text editor for web development

There are two main things you're going to need to develop with Angular. One is a text editor, and the other is Node (NodeJS). For a text editor, I prefer Visual Studio Code. It's free and pretty straightforward to use. It has an integrated terminal, and extensions are readily available for you to customize it's functionality, look and feel. The built-in terminal (command line) will come in super handy when developing with Angular, Node, React, Vue, or any other JS framework. So, step number one is download and install VS Code. https://code.visualstudio.com/

Step 2 - Install NodeJS

Download and install Node if you don't already have it. The easy way would be to go to nodejs.org and download the appropriate installer for your platform (Windows/MacOS). However, if you have multiple projects that need to use different versions of Node, then using some sort of Node Version Manager would be helpful. This is easy on MacOS and Linux by using nvm, for which a Windows port also exists. However, in my experience, this creates an extra level of maintenance and awareness on your part. If you're completely new to this, I suggest just downloading the appropriate installer and install the current LTS (long term support) version of Node.

Why do you need Node? The simple answer is because developing an Angular app needs it. Node is a way to run javascript code outside of the browser. A website/webapp requires a webserver to host its files in a way that an end-user can view and interact with them in the browser. For a developer, Node can create a simple web server for you to view your work in the browser. (Now, later on when you're all done and ready to deploy your site/app, you'll do a production build and you can simply copy/upload the html, css, and javascript files to a webserver and it *should* work.) Besides being able to view, test and troubleshoot your app in a browser while you work on it, there's another big reason/benefit to having Node: NPM.
​
NPM stands for Node Package Manager. If you started out in development like I did, using .Net and C# you might recall NuGet Package Manager which is integrated into the Visual Studio IDE. NPM is a similar concept. It allows you to manage packages of code (made up of one or more node modules) for your project. By the way, I should quit capitalizing it because most of the time, you'll just see it as 'npm'. (I should point out that there are other package managers out there, but since we're using Node and going to be installing node modules, we'll just stick with npm for now.)

Step 3 - Create your project

Remember the built-in terminal that comes with VS Code? We're going to use it to create the basic pieces of our project. So go ahead and open VS Code, and click Terminal > New Terminal from the menu. Now that you have Node installed, you'll run commands in the terminal to use npm, Angular CLI (I'll tell you what that is soon), and work with the files/directories on your system. If you've never worked with the terminal/command line before, just jump in and pick it up as you go (remember, Google is your friend). Here's what you need to know about terminal: most of us are used to a GUI where we tell the computer to do things by point & click (or touch, tap, and swipe); well, in the command line your tell the computer to do things by typing (or copying and pasting in) a text command and pressing enter. So, here we go...

3a - Choose a place where you're going to store your project

(Note: You don't have to use the command line to do this, but why not? It's good practice.) The first thing you'll notice about the Terminal is that it will show you your current path where commands are being executed. Keep this in mind because any files/directories you create will be created here. When Terminal first launches, it usually starts in your Home folder, which is usually Users/<your username> (NOTE: Windows uses backslashes '\' in paths, but MacOS and Linux use '/'). You'll want to create a folder that you're going to work in. I created a folder in my Users/Ben/Documents folder called Development, but you can choose whatever you like. You don't have to have a name for your project/app yet. This is just a generic folder where you can save multiple projects. To do this in terminal, you'll have to navigate to that directory by executing the command 'cd Documents' and then the command 'mkdir Development'. Then navigate to the Development directory you just created by running 'cd Development'. (HINT: when using the 'cd' command, most terminals have tab-completion for existing directories so you can just type the first few letters and hit tab to autocomplete the rest of the directory/file name.)

Example Terminal Commands (on Windows)

3b - Install Angular CLI

You could do this step before choosing and creating your directory, but I wanted you to get some practice using terminal first. To develop with Angular, you'll want to use Angular CLI (Command Line Interface). To install it, run 'npm install -g @angular/cli'. When I first started with Angular, I went to Angular.io and clicked the "Get Started" button. It walks you through the setup, and then has a step-by-step tutorial to follow where you can learn the basics of building an Angular web app. (NOTE: The '-g' is important. It stands for 'global'. This means that the Angular CLI will be installed globally on your system so you can use it to create lots of apps.)

3c - Create your Angular app

Now that you're in your working directory and have installed Angular CLI, you're ready to generate the base files and file structure for your Angular app. Simply execute the command 'ng new my-app' in the terminal, where 'my-app' is any name of your choice. Using my previous post as an example, I chose 'sw-movie-checklist'. Once you hit enter, you'll see things start to happen. The Angular CLI will create a new folder and build out the files and folders it needs, which involves npm installing some packages. Once it's done running, inside the folder it just created you will see at least 3 folders and some files. One of these folders is named 'node_modules', that's where npm installed packages for the Angular app. You don't really need to do anything with that folder or those files, I'm just pointing out what the Angular CLI does when you execute 'ng new'.

3d - Open your working folder in VS Code

Now that you've created an app there's one more thing you need to do before you can view it and start working on it. In VS Code click File > Open Folder..., then select the 'my-app' folder that Angular CLI just created. In my case, I selected the folder named 'sw-movie-checklist'. Once VS Code opens that folder, you'll see the filesystem in the left hand sidebar File Explorer. Go ahead and now click in the VS Code menu Terminal > New Terminal. Now when you open terminal, the prompt shows your working folder as the one you just chose. This is where you'll want to run any npm and angular cli commands as you develop your project. For example, if you execute the command 'ng serve --open', you'll see your default web browser open up to your new app that you created. Make note of the address, http://localhost:4200, this is the default local address that node is serving your angular app to. The 4200 is a port number, which can be changed by adding the '--port ####' flag to the 'ng serve' command (so our whole command could look like 'ng serve --port 4201 --open' and the webbrowser would open to the specified location). (Note: While an Angular app is being served, you won't be able to execute any commands in that terminal; however, Visual Studio Code allows you to open multiple terminals by either selecting the 'New Terminal' option from the menu again, or by clicking the plus sign ('+') next to the dropdown in the upper right corner of the terminal pane. You can use that drop down to switch between terminals, and you can split terminals into an additional pane. Most of the time, I use one terminal at a time, so I stop serving by pressing CTRL+C and hitting 'Y' and then Enter for yes. I do that for safety in case some commands mess with the webserver; I'm probably being overly cautious.)

Step 4 - Using Source Control

If you watched closely when the 'ng new' command was running, you may have noticed that Git was set up for the project. If it was set up successfully, you'll notice the lower left-hand corner of VS Code, in the status bar, there's a git symbol and the word master, and a couple other symbols and numbers. Yes, source control is integrated into VS Code, and Angular CLI helped set it up for you. That status bar is telling you that you're in the master branch of your code and if there's all zeroes, then there's no errors or warnings about Git/source control. You'll also notice in the toolbar on the left-hand side of VS Code there's a Git icon. Click it and you'll see the Git controls in the sidebar. If you want to share your code on GitHub, like I did with the Star Wars challenge, then there's a couple of easy steps to take.

4a - Create a GitHub repository

Go to the GitHub website and login to your account (create one if you haven't already). Next, click the green button that says 'New' and has a book icon on it. Type in a name for the repo and click the green "Create repository" button at the bottom. (Note: You can type in a description and select Private if you like, but DO NOT check the box that says "Initialize this repository with a README" because we will be importing an existing repository in the next step.)

4b - Import your code to GitHub

On the next page, look at the section titled "...or push an existing repository from the command line". There, you'll see two commands to run in terminal. Copy and run each one in the order they appear on the page (top one first, then the second one). If the first one fails, it may be that Git isn't setup or isn't set up correctly on your system. The terminal should display an error. Google the error (include your system Windows/Mac in the search) and find a way to fix it. Hopefully, both commands run without any problems. Once that's done, your code is synced to GitHub. Now, as you work on it, you use the Git tools in the sidebar to commit changes, and push/pull/sync/etc.

Step 5 - Build your app

Ok, now the fun begins. You can edit the files and see your app take shape. I recommend following a tutorial for your first try. The Tour of Heroes tutorial at angular.io is a good place to start. In my next post, I'll share the steps I took to complete the Star Wars challenge (from my previous post). To get started click the files icon in the left-hand toolbar of VS Code so you can see the filesystem. The files you'll be interested in are located in src/app. Look at the file src/app/app.component.html and you'll see the code that Angular CLI generated as the example boilerplate app that you saw in the browser when you ran the 'ng serve' command.

Since this is getting long-winded, I’ll save most of these details for my next post where I’ll walkthrough the Star Wars movie checklist example. For now, if you edit the app.component.html, app.component.css and the app.component.ts files, and serve the app, then you’ll see your changes. If you’ve never worked with Angular before, you’ll notice that instead of traditional javascript (*.js) files, you have typescript (*.ts) files. Typescript is mostly like javascript except it includes the ability to use data types (think “strongly typed language”). Typescript is what Angular uses. It’s also slightly different from regular browser javascript because you’re able to use ES6 standards (ECMAScript 2015). You can read up on it here https://www.typescriptlang.org/.

Step 6 - Deployment

Once you get your app to a place that you’re ready to publish it, there’s one more Angular CLI command you can use. From the working folder of the project run ‘ng build --prod’. This will create a new folder called ‘dist’. Inside that folder is another folder with the same name as your project folder, and inside that are the files you’ll need to put on a web server for others to view. For my Star Wars challenge project, I followed the instructions at https://angular.io/guide/deployment to ‘Deploy to GitHub Pages’. There you’ll also see instructions for “Simplest Deployment Possible” and guidance on web server setup/configuration. Since I didn’t want to get my little project out to others quickly and cheaply GitHub pages was the way to go. If you’re going to put something into production for others to use, you’ll want to set up a web server through a web host or some other cloud hosting service.

Summary

There’s a lot more to Angular, but this should at least get you to the point that you can start playing around, creating basic things, and complete tutorials. Now that your computer is all set up, creating another Angular app is as simple as running ‘ng new my-app’. There are more Angular CLI commands to learn, and plenty of tutorials out there to help you learn them. Be curious, and see what you learn!