Tag: learn angular

In this post, we will learn about components and how to create new components in an Angular 9 application using Angular CLI. We will create the required components for our application and will show how components can be used to organize the content of the application.

What Are Angular Components?

An angular application is built using multiple modular pieces/sections known as components. Every component defines its own HTML, CSS, and data to be displayed on the web page. When the component data is changed then the Angular application updates only that component without reloading the whole web page.

We can think of components as different sections of a web page. In a typical web page, we have a header, footer, and content sections. Similarly in an Angular application, a web page may have 3 components i.e. a header component, footer component, and content component. In most of the cases, the header and footer components remain the same throughout the application and only the content section is updated when the user clicks a particular menu item.

App Component

The app component is automatically created when we created a new Angular application using Angular CLI as we did in the previous post. The app component is comprised of 4 files like any other Angular component. The component files are available inside the folder ‘myapp/src/app’:

• app.component.css (used to define CSS styles for the component)
• app.component.html (used to define markup for the component)
• app.component.spec.ts (used to define tests for the component)
• app.component.ts (used to define and prepare data for the component)

Create New Angular Components

To create a new Angular component using Angular CLI, open the command prompt as an administrator and CD into the application folder. Then run the command:

ng generate component header

The above angular command will generate a new angular component named as the header. Go ahead and create two more components i.e. for content and footer sections.

ng generate component content
ng generate component footer

You can find the files of these newly generated components in the folder ‘myapp/src/app’.

In this post, we have learned about Angular components and how to create new Angular components using Angular CLI. In the next post, we will learn how to change the content of Angular components and how to merge these 3 components in the app component. Stay tuned!

This is the second part of the series “Learn Angular 9 From Scratch”. In this post, we will learn how to create a new Angular application using Angular Command Line Interface i.e. Angular CLI. We will also learn about two new Angular commands i.e. ng new and ng serve. We will also test our new Angular application on localhost.

Create a New Application

• Open command prompt as an administrator
• When you open the command prompt, you will be inside the directory C:\WINDOWS\System 32>
• Change directory / CD into the folder where you want to create a new Angular application (see screenshot 1) e.g. to change the current directory to D drive, type D: and hit Enter.
• Run the command: ng new myapp // change ‘myapp’ to whatever name you want for your application
• Now Angular CLI will ask two questions i.e. would you like to add Angular routing? (I have selected Yes, because we will implement routing in our application) and which stylesheet format would you like to use? (I have selected CSS but you can select other format as well) [see screenshot 1]
• After the confirmations, Angular CLI will install all necessary packages and their dependencies and will create a new Angular application inside the folder ‘myapp’

Test the Application

• Change directory / CD into folder ‘myapp’ e.g. cd myapp
• Run the command: ng serve
• Angular CLI will compile the application code and will serve the application on http://localhost:4200 (see screenshot 2)
• Now you can test the application on http://localhost:4200 (see screenshot 3)

In the next post, we will learn what are the components and how to create components in an Angular application using Angular CLI. Stay tuned!

In this post, we will learn:

• What is Angular?
• What are Single Page Applications (SPA’s)?
• What are the prerequisites to create an angular application?
• What is NodeJS and Node Package Manager (npm)?
• What is Angular CLI?

What is Angular?

Angular is a framework developed by Google to design frontend applications. The Angular converts the complete application into a single-page application (SPA). The main advantage of single-page applications (SPA’s) is that the user can access different components and pages without reloading the website. Moreover, Angular application is bundled into a single HTML, CSS and JavaScript file, which greatly improves the overall performance of the application.

Prerequisites

We need NodeJS and Angular CLI to create an angular application.

• NodeJS
  • Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a web browser
  • Node.js provides a package manager (npm) to install libraries and packages
  • We will use Node Package Manager (npm) to install Angular CLI on our computer
  • To download and install the latest stable version of node.js, visit the official website https://nodejs.org/
• Angular CLI
  • Angular CLI or Command Line Interface is a command-line tool for creating angular applications
  • To install Angular CLI:
    • Click ‘Start Menu’
    • Type ‘cmd’ and open ‘Command Prompt’ as an administrator
    • Type the command: npm install -g @angular/cli. This command will install Angular CLI globally on your computer which means that we can run Angular commands from any directory on our computer.

Verification

To verify that node.js and Angular CLI are installed correctly:

• Click ‘Start Menu’
• Type ‘cmd’ and open ‘Command Prompt’ as an administrator
• To check if NodeJS is installed, run the command node –version in the command prompt
• To check if Angular CLI is installed, run the command: ng –version in the command prompt

If node.js and Angular CLI are installed correctly, then we are all set to create our very first Angular project. In the next tutorial, we will learn how to create an Angular application using Angular CLI.

Video Tutorial