浅析IDEA中如何开发Angular

本篇文章带大家了解一下如何使用IDEA开发Angular,简单介绍一下JetBrains IDEA中新建项目、运行项目的方法,希望对大家有所帮助! 之前文章中我们了解Angular...

本篇文章带大家了解一下如何使用IDEA开发Angular,简单介绍一下JetBrains IDEA中新建项目、运行项目的方法,希望对大家有所帮助!

浅析IDEA中如何开发Angular插图1

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

新建项目File=>New=>Project=>JavaScript=>AngularCLI

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

浅析IDEA中如何开发Angular插图3

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

ThefilewillhaveitsoriginallineendingsinyourworkingdirectorySuccessfullyinitializedgit.Done在IDEA中运行项目

1. Show npm Script

在项目根目录下找到pachage.json文件,右键选择Show npm Script就会出现一个新的窗口

浅析IDEA中如何开发Angular插图5

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

**AngularLiveDevelopmentServerislisteningonlocalhost:4200,openyourbrowseronhttp://localhost:4200/**√Compiledsuccessfully.

此时访问 http://localhost:4200/

浅析IDEA中如何开发Angular插图7

npm中的命令其实都定义在package.json中,我们也可以自定义命令。

我们在package.json的scripts节点下新增

"nodeversion":"node-v"

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

2. IDEA-RUN

在IDEA的最上方控制栏有可以直接运行项目的选项

浅析IDEA中如何开发Angular插图9

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

ngserver

从VCS中拉取项目

VCS=>GetFromVersionControll=>输入地址

产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;

日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉

本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;

部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入

如若转载,请注明出处:https://www.chanpinyuan.cn/27550.html;
(0)
上一篇 6天前
下一篇 6天前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部