A brief analysis of how to develop Angular in IDEA

This article will take you through how to use IDEA to developAngular, and briefly introduce the methods of creating and running projects in JetBrains IDEA. I hope it will be helpful to everyone!

In the previous article, we learned about the environment that needs to be prepared for Angular development. After we set up the environment, it is impossible to directly use text tools for programming. We must choose an IDE, and an A good IDE can allow us to develop with twice the result with half the effort. I chose JetBrains IDEA, mainly because of the several editors in my work, IDEA is a better IDE that supports Angular development.

New project

File => New => Project => JavaScript => Angular CLI

After selecting the next step, we can configure our project in it. If you followed me from the beginning to this step, you will find that IDEA has automatically configured both the Node interpreter and Angular CLI. We only need to set our project name. [Related tutorial recommendations: "angular tutorial"]

After clicking Finish, you are waiting for the build to be completed. When the console outputs the following content, it means Successfully built

The file will have its original line endings in your working directory
    Successfully initialized git.
Done

Run the project in IDEA

1. Show npm Script

Find the pachage.json file in the project root directory, right-click and select Show npm Script and a new window will appear

In this window there is Some of our commonly used commands, the start command is equivalent to the ng serve command. Double-click start, and the project will start compiling and starting. After the startup is completed, the console will output the following information

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

√ Compiled successfully.

At this time, visit http://localhost:4200 /

The commands in npm are actually defined in package.json, and we can also customize commands.
We add

"node version": "node -v"

under the scripts node of package.json and then refresh the npm interface. You can see that a new node version command has been added. The effect of double-clicking is as follows: node -v command.

2. IDEA-RUN

In the top control bar of IDEA, there is an option to run the project directly

We can choose to run the project directly by RUN or DEBUG. This is actually equivalent to executing

ng server

Pull the project from VCS

VCS => Get From Version Controll => 输入地址

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of A brief analysis of how to develop Angular in IDEA. For more information, please follow other related articles on the PHP Chinese website!