新建 Angular 项目并启动

「爱情、让人受尽委屈。」 2023-06-17 05:52 28阅读 0赞

*  上一篇博客教大家如何搭建成功angular环境，那么在搭建完成环境之后该做什么工作？

### 建立angular 项目 ###

**第一步**： 打开DOS命令窗，输入命令（这里要指定一个地址，具体指定地址的方法在这里就不说了，可以去百度查看）

**输入建立项目命令：**

ng new todolist-angular

出现下面的图样，绿色字体出现完之后**使用 ctrl+c 终止进程，打断进程的原因是通过这个命令初始化项目之后它会自动帮我们使用npm 来下载第三方包，但是npm 是通过外网来下载的，由于网络的原因很容易撞墙，所以我们要打断**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70][]

**第二步**：我们上一步打断是因为不想使用默认的npm来下载，现在我们**使用 cnpm来下载**

cnpm install

**第三步：**等待几分钟后再次输入 **启动服务的命令（有以下两种方式）**：

ng serve

或者：

npm start

出现下面样式 那么就表示启动服务成功，我们需要复制 localhost：4200   到浏览器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1][]

**出现下面的图片表示   启动angular服务成功！ **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 2][]

# 注意： #

新建angular项目的方法不光有这一种，我们可以不通过DOS窗口执行，可以通过**在VS Code 中通过**

**“终端平台”来输入上面的代码同样也可以新建项目**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 3][]

现在我们自己建立的项目就大功告成！

### 最后和大家分享刘大佬分享给我的两点： ###

*  在使用angular的时候 最好使用VS code 中的终端平台来建立项目和启动项目，因为在 VS Code中我们改代码之后软件会帮我们自动的跟新当前最新的内容，这样运行出来的就是当前最新内容，   但是在DOS窗体中不会实时更新

*  如果我们在DOS中已经 使用 ng serve 启动了 angular项目 那么就无法再次通过VS Code的终端来启动项目，因为两个发生抢夺端口的现象。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191127170526170.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191127170759605.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191127171349161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191127171812255.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70