Angular------使用IDEA开发Angular

朴灿烈づ我的快乐病毒、 2023-01-01 03:37 365阅读 0赞

**本文章所有内容基于[win10搭建Angular环境并运行hello-world][win10_Angular_hello-world]**

# 1. 相关 #

上一篇文章中我们了解Angular开发所需要准备的环境，我们搭建好环境之后不可能直接使用文本工具进行编程，必须选择一款IDE，而一款好的IDE能让我们开发起来事半功倍。我选择的是JetBrains IDEA，主要原因是在我工作内容中的几款编辑器，IDEA是支持Angular开发的做的比较好的一款IDE。

# 2. 新建项目 #

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

选择下一步之后，就可以在里面配置我们的项目了。如果你从一开始跟着我进行到这一步，你就会发现IDEA已经将Node interpreter和Angular CLI都自动配置了，我们只需要设置我们的项目名即可。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center]

点击Finish之后就是等待构建完成了，当控制台输出以下内容，就代表着已成功构建

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

# 3. 在IDEA中运行项目 #

## 3.1. Show npm Script ##

在项目根目录下找到**pachage.json**文件，右键选择Show npm Script就会出现一个新的窗口  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 1]

在这个窗口中就有一些我们常用的命令，其中start命令就相当于ng serve命令，双击start，项目就开始编译并启动，启动完成控制台输出以下信息

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

此时访问[http://localhost:4200/][http_localhost_4200]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 2]

npm中的命令其实都定义在package.json中，我们也可以自定义命令。  
我们在package.json的scripts节点下新增

"node version": "node -v"

然后刷新npm界面就可以看到新增了一条**node version**命令，双击效果如执行**node -v**命令。

## 3.2. IDEA-RUN ##

在IDEA的最上方控制栏有可以直接运行项目的选项  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 3]

我们可以选择直接RUN或者是DEBUG的方式来运行项目，这里其实也是相当于执行

ng server

# 4. 从VCS中拉取项目 #

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

# 5. 总结 #

对于熟悉IDEA使用的同学来说，这里都不算很难，也可以自己去尝试其他的用法。如果你是一个新手，可以关注我，后续文章会慢慢带大家熟悉Angular语法和IDEA的用法  
我是Baldwin，一个25岁的程序员，致力于让学习变得更有趣！  
现在关注作者即可领取海量学习资料与简历模板  
![微信扫描图片关注作者公众号领取福利][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 4]

往期好文：

[用Python每天给女神发一句手机短信情话][Python]

[MySQL优化之explain][MySQL_explain]

[Spring源码分析-MVC初始化][Spring_-MVC]

[春风得意马蹄疾，一文看尽（JVM）虚拟机][JVM]

[造轮子的艺术][Link 1]

[源码阅读技巧][Link 2]

[Java注解详解][Java]

[教你自建SpringBoot服务器][SpringBoot]

[更多文章请点击][Link 3]

[win10_Angular_hello-world]: https://yzstu.blog.csdn.net/article/details/111939972
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/114c8a6bc306483a975af65c54f9a990.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/0b1f93da1ae3424fb2ff241ab39d9c0a.png
[http_localhost_4200]: http://localhost:4200/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/d8a9463a6806465abbb3bc1bd850f78b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/fbe8652534644f719c0f2b25adf111b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/13ea7fe8874d49b09e908473ebfa42f4.png
[Python]: https://blog.csdn.net/shouchenchuan5253/article/details/105753596
[MySQL_explain]: https://blog.csdn.net/shouchenchuan5253/article/details/105722148
[Spring_-MVC]: https://blog.csdn.net/shouchenchuan5253/article/details/105625890
[JVM]: https://yzstu.blog.csdn.net/article/details/105462458
[Link 1]: https://blog.csdn.net/shouchenchuan5253/article/details/105256723
[Link 2]: https://blog.csdn.net/shouchenchuan5253/article/details/105196154
[Java]: https://blog.csdn.net/shouchenchuan5253/article/details/105145725
[SpringBoot]: https://blog.csdn.net/shouchenchuan5253/article/details/104773702
[Link 3]: https://blog.csdn.net/shouchenchuan5253/article/details/105020803