本文章所有内容基于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都自动配置了，我们只需要设置我们的项目名即可。

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

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

3. 在IDEA中运行项目

3.1. Show npm Script

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

在这个窗口中就有一些我们常用的命令，其中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/

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

"node version": "node -v"

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

3.2. IDEA-RUN

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

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

ng server

4. 从VCS中拉取项目

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

5. 总结

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

往期好文：

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

MySQL优化之explain

Spring源码分析-MVC初始化

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

造轮子的艺术

源码阅读技巧

Java注解详解

教你自建SpringBoot服务器

更多文章请点击

Angular------使用IDEA开发Angular相关推荐

angular模块库开发实例
angular模块库开发实例随着前端框架的诞生,也会随之出现一些组件库,方便日常业务开发.今天就聊聊angular4组件库开发流程. 下图是button组件的基础文件. nk-button.comp ...
angular语言前端开发_web前端开发入门全套学习方法路径，兼职在家做网站也能月入上万...
前端学习路径 1.WEB前端快速入门在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性.这个部分内容非常简单,而且非常容易掌握.相信你也更愿意学习这个部分,毕 ...
[北京微软技术直通车]前端 Visual Studio Code 开发 Angular 与亿级 SQL Servern
微软技术直通车第一期将于2017年9月9日与大家见面,本次邀请华北区微软技术专家和大家一起交流前端工具与技术, Visual Studio Code,TypeScript 与 Anuglar 项目开发 ...
《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记二〇一九年二月十三日星期三2时28分54秒前提:本书适合有初步HTML.CSS.JavaScri ...
Angular响应式开发中报错Property 'map' does not exist on type 'Observable'.引用rxjs也没用。
Angular响应式开发源代码如下: import { Component, OnInit } from '@angular/core'; import {Observable} from 'rxjs ...
52abp框架asp.net core Angular全栈开发实战视频课程
课程标题 52abp框架asp.net core & Angular全栈开发实战视频课程课程简介从零开始学 52ABP企业开发框架,企业项目是如何开发和技术选型,代码如何管理,团队协同开发 ...
【必备】VSCode开发Angular的必备插件
[热门]AutoScssStruct4Vue:自动构建SCSS代码 [推荐]Angular File Changer (Supporting Touch Bar and NgRx)→用于快速切换同名H ...
Angular介绍、安装Angular Cli、创建Angular项目入门教程
场景 Angualr 是一款来自谷歌的开源的web 前端框架,诞生于2009 年,由Misko Hevery 等人创建,后为Google 所收购.是一款优秀的前端JS 框架,已经被用于Google ...
破境Angular（三）Angular构件之模块
一.知识点 Angular模块核心知识点如下: 1.模块的作用. 2.模块各个元数据的含义和作用 3.模块有哪些分类,分类原则 4.模块的惰性加载机制 5.开发时如何对模块进行规划二.模块作用首先 ...
swagger 源代码_我们如何使用swagger代码生成器从Angular 4更新到Angular 5
swagger 源代码 by Mark Grichanik 马克·格里卡尼克(Mark Grichanik) 我们如何使用swagger代码生成器从Angular 4更新到Angular 5 (How ...

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