Angular is one of the most famous JavaScript framework, It helps building dynamic web applications. If your a beginner in world of web development, or an experienced developer, Angular provides fantastic tools and ecosystem that makes web development efficient and scalable. In this article you will learn how to setup Angular in your system, and how to create a Angular project. Now you ready to dive into Angular web development world.
What Is Angular?
Before we get into the setup process, let’s understand what is Angular. Angular is a JavaScript framework, it builds single page applications for client side, It works with help of HTML and TypeScript. Its developed by Google. Angular is a component-based architecture or MVC architecture, and its provides powerful tools, libraries and great features. Angular specially designed for highly interactive and responsive applications.
Prerequisites for Angular Installation
For creates Angular applications, your system to have a few prerequisites. Based on the tools and dependencies your Angular is application will run efficiently. You need to install a few third-party libraries. Now we will look on that.
Node.js and npm
Angular depends on Node.js for managing its dependencies. Node.js is a JavaScript runtime, it is combines with Node Package Manager (NPM). First you need to check Node.js installed or not in your system, You run the command “node -v” in your terminal or command prompt.
node -vAfter that if you see a version number, it means Node.js is already installed. Otherwise you need to download it from official Node.js website (recommended LTS version) and install the node.js in your system.
Code Editor
For write and manage your Angular code you need a text editor. Now a days Visual Studio Code (VS Code) is a highly recommended and popular text editor compare with other editors. It is provides powerful features, extensions, and integrations with Angular applications. You can download it from the VS Code official website.
Installing Angular CLI
Angular provides a powerful tool the name of Command Line Interface (CLI). It helps in creating projects, adding compnents, running applications etc. You can install Angular CLI on your system globally. For the installation of CLI, you run the below command on your terminal.
npm install -g @angular/clithe “-g” ensures that the CLI is installed globally. It is accessible from any directory in your system. Once installed the CLI in your system, verify the installation by run the “ng version” command in your terminal.
This command will show you the version of Angular CLI. Now everything is done for Angular setup. You are ready to create and run your first Angular application.
Creating a New Angular Project
You can create a new Angular project with help of Angular CLI command tool. And you can use terminal for creating project and navigate to the project directory. After navigate the project directory you can use below command for create new project.
ng new my-angular-appThen a new Angular project creating with the name of “my-angular-app”. For routing and stylesheet format, the CLI will prompt you to select the configurations. You can select the formats based on your project requirements.
After you answered CLI prompts, Angular CLI generate the project structure and install the necessary dependencies, The CLI start the installation process for of Angular project. It takes a few minutes, depending on your internet speed.
Exploring the Project Structure
When your project set is complete, you can navigate into the project directory.
cd my-angular-appLet’s take a look on the files and folder structure of Angular project:
- src/app: Contains the application’s core components, modules, and services.
- src/assets: Stores static files like images and other resources.
- src/environments: Manages environment-specific configurations.
- angular.json: Defines the project’s configuration and build options.
- package.json: Lists the dependencies and scripts for the project.
First you understand the files and folder structure of the Angular project. Then you will be easy to work on projects.
Running the Angular Application
To run your Angular application in vscode editor, use the below command in your terminal:
ng serveThis command helps to start the development server and compiles the Angular application easily. In browser you can access the “http://localhost:4200” URL by default, and you can see the Angular welcome page on your browser. Congratulations! Now you have successfully set up your Angular first project.
The “ng serve” is a powerful command for watch changes in your code automatically. It means Whenever you make change and save the file, the application will automatically reload in your browser.
Customizing the Default Application
Now your Angular project is running, if you want to check as practically, I have mentioned the main component location in below.
src/app/app.component.htmlYou can edit and save this file for content changes, for style changes you can do same in app.component.css file, for logic you can do same in app.component.ts file, now the all changes displayed on your browser perfectly. For better understanding, you can experiment with these files, and understand Agular’s component-based structure.
Adding New Components
Angular applications are built depends on building blocks components. Whenever you want a component you can use the CLI. It is easy to create components. you can check below code:
ng generate component component-nameReplace the component name with the name of your component. And CLI automatically creates a new folder with the necessary files for the component. You can use the component in your application by adding its selector to the desired template.
Setting Up Routing (Optional)
When you set up the new project, then configured the routing for application. In this process Angular CLI provides a src/app/app-routing.module.ts file. It helps to navigate components and different pages.
For example, you want navigate different pages, like homepage, about page, and contact page in your application, Angular routing makes it easy to create multi-page application within a single application.
Conclusion
Angular project setting up is a easy, when you are understand the above description. Without knowledge you cannot do any thing. So first you understand the theory and do experiments and go through the practically. If you want to learn any thing, I will tell three words. There are “WHAT”, “WHY”, “HOW”, these are the fundamental theory for learning. If you go through these you will do any thing.
Resources: Angular
