Angular 13 tutorial 2nd part

Categories: Angular

Angular 13: Install the CLI & create a project

Now, let’s get started with our first practical step.

Angular provides an official tool for initializing projects that saves you from the hassle of configuring modern front-end development tools such as Webpack, and ESLint, etc. It’s available from npm and requires Node.js to work on your development machine.

You can install Node.js on your machine by following one of these methods:

• Get an installer for your operating system from the official website.
• Use the official package manager of your system.
• Use a Node version manager such as NVM which will allow you to manage multiple versions of Node on your development machine.

If you have Node installed on your machine; simply go to a command-line interface, Command Prompt, PowerShell (Windows) or bash terminal (Linux and macOS) and run the following command:

$ npm install -g @angular/cli

Note: If your Linux or macOS machine asks that you add sudo to your command, or if you need to use a Command prompt with administrator access in Windows to install Angular CLI globally, you’ll simply have to fix your npm permissions. Please refer to the official npm website for instructions. If you installed Node via NVM, you’ll not encouter this issue.

The previous command will install angular/cli v13.

Next, let’s generate a brand new Angular 13 project by running the following command:

$ ng new angular13app

Angular CLI will prompt you for the following information:

Angular CLI will prompt you for the following information:

Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? This setting helps improve maintainability and catch bugs ahead of time. Type N and press Enter.

Would you like to add Angular routing? (y/N) y.

Which style sheet format would you like to use? (Use arrow keys), pick CSS.

Just wait for the Angular CLI to generate your project’s files and install the required dependencies from npm. Next, navigate to your project’s root folder and start the development server using the following commands:

$ cd angular13app

$ ng serve

Angular live development server will start listening on localhost:4200, head over to your browser and navigate to http://localhost:4200/ to see your application running!

Now that we have created a project and started a development server that is serving our application locally and live-reloading any changes that we’ll be making on the project’s files; let’s proceed to the next part where we’ll add Bootstrap to our project and style our application shell using its awesome components.

Angular 13: Add Bootstrap 4

We can use various methods for adding Bootstrap 4 to Angular. In our example, we’ll install bootstrap from npm and include it in the angular.json file of our project.

Go to your command-line interface and run the following commands to install Bootstrap and jQuery:

$ npm install bootstrap

$ npm install jquery

After that, you’ll need to include the CSS style sheet and JavaScript files of both these libraries in the angular.json file:

At this point, we can use Bootstrap to style our angular components. Let’s start with the shell of our application which is the app component that contains the router outlet. Go to the src/app/app.component.html file and update it:

We added a Bootstrap container div and navbar for showing a navigation bar. Then, we added a Jumbotron component that is used for displaying hero unit style content.

We also moved the router outlet, inside the container right below the jumbotron. This is where the Angular router will render the matched component(s).

That’s it; next we’ll learn how to create an Angular service for encapsulating the code that sends GET requests to fetch data from the third-party REST API server.