Angular – getting started

Introduction

Angular is a fantastic open-source framework by Google. It’s designed for creating dynamic, single-page web applications (SPAs) with ease and efficiency. Angular is built on TypeScript, which is a statically-typed superset of JavaScript, offering you additional features and improved tooling.

If you’re totally new to frontend software development, you should want to start by familiarising yourself with the basics, such as HTML, CSS, and even JavaScript. These are the core languages used in web development, and Angular builds upon them to make your life easier when creating complex applications.

One of the coolest things about Angular is its use of components. Components in Angular are modular, reusable chunks of code that allow you to build scalable applications with a neat structure. You’ll also find that Angular has a vast ecosystem, including a rich library of pre-built modules and an incredibly supportive community.

Once you feel confident you know your way with HTML, CSS and JS, you can begin exploring Angular and be well on your way to becoming an ace frontend developer!

Installing tools

To work with Angular, you’ll need to install a few tools and packages. Follow these steps to set up your development environment:

1. Install Node.js and npm: Angular requires Node.js and npm (Node Package Manager) to manage dependencies and run commands. Download and install the latest LTS (Long Term Support) version of Node.js from the official website: https://nodejs.org/. npm comes bundled with Node.js.

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. It allows you to run JavaScript outside of the browser, which is crucial for Angular development.

npm on the other hand is the package manager for Node.js and helps you manage dependencies and install packages required by your project. Angular relies on various packages and libraries, so you need npm to manage them. npm for Angular is somewhat similar to Maven for Java as they are both tools to manage dependencies and automate builds.

2. Install Angular CLI: Angular CLI (Command Line Interface) is a powerful tool that simplifies Angular development tasks such as creating a new project, generating components, and building the application. To install Angular CLI globally on your system, open a command prompt or terminal, and run the following command:

npm install -g @angular/cli

The Angular CLI automates repetitive tasks, simplifies the development process, enforces best practices, and provides a standard project structure. It helps you create, build, test, and deploy Angular applications with ease. You could, theoretically NOT install it and add everything in the IDE or manually but it would be a serious overkill since the structure of Angular requires a many packages, files and configuration.

Under the hood, Angular CLI uses Webpack to bundle and transpile your application code, making it compatible with a wide range of browsers. It also provides a development server with live-reloading to simplify testing and debugging.

3. Install IDE for Angular development: You can choose from a variety of Integrated Development Environments (IDEs) and text editors for Angular development. Some popular options include:

• Visual Studio Code (VSCode): A free, open-source, and highly extensible IDE from Microsoft with excellent support for TypeScript and Angular.
• WebStorm and IntelliJ: A powerful and feature-rich IDE developed by JetBrains, specifically designed for web development, including great support for Angular. Unfortunately, there is no free version.
• Sublime Text: A lightweight and fast text editor with a large ecosystem of plugins, including support for TypeScript and Angular.
• Atom: A free, open-source text editor developed by GitHub, with a wide range of plugins and packages for Angular development.

Ultimately, the choice of IDE comes down to personal preference and your specific development needs. Most modern IDEs and text editors provide extensions or plugins for Angular and TypeScript support, so you can choose the one that fits your workflow best.

Creating a project

To start a new project with Angular, create it in the command-line interface (meaning, your terminal window). You need to run the following command:

ng new your-project-name

Replace your-project-name with the desired name for your project. The command will prompt you to choose some configuration options. The default ones are good enough. Once you make your selections, the CLI will create a new directory with your project files and install the required dependencies. The directory where you want to install your project needs to be empty or non-existing or it will not install.

4. Run the development server: Navigate to the newly created project directory using the command line, and start the development server by running:

cd your-project-name
ng serve

This command will compile the application, launch a local development server, and open the app in your default web browser. By default, the app will be available at http://localhost:4200/.

The “ng serve” command should be the first one you run whenever you open your project in the IDE (like Visual Studio) and do not close the window where you ran the command as long as you’re working with the project. Open another window to run any other Bash commands.

---

That’s it! Once you create the shell for the project, you can start creating the real structure of your code in the IDE of your choice.