【Angular2】新建Angular2项目

淡淡的烟草味﹌ 2022-06-08 13:15 240阅读 0赞

# 一、前言 #

相信大家已经看了小编上一篇博客，写的挺好的，[《【Angular2】搭建开发环境》][Angular2]，如果你是一个老手，配置好了，怎么可能不去做一个demo呢？对吧！，所以这篇博客，小编趁热打铁，搞一个Angular2的demo出来。

# 二、建立Angular2项目 #

在命令窗口，进入一个文件夹，小编进入的是E盘下的Angulardemo文件夹，用于存储项目。然后输入下面的命令：

ng new helloworld-project

注意：这里的helloworld-project是项目的名称，具体视情况而定。

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

当执行到Installing packages for tooling via npm的时候，就会自动使用npm下载相关的包，但是npm网络不支持，所以就会卡住。我们终止这个后，使用cnpm进行下载。

# 三、使用cnpm下载包 #

进入到helloworld-project一级目录中，使用cnpm install 命令进行安装项目所依赖的node.js包：安装的过程比较漫长~

cd angular-cli-project
    cnpm install

![这里写图片描述][SouthEast 2]

到这一步完成，咱们就相当是建立好了自己的项目。

# 四、启动项目 #

可以直接在命令窗口进行启动：  
      在helloworld-project一级目录中，输入ng serve命令，就可以了;

ng serve

当出现 Compiled successfully，就说明是完成了。

![这里写图片描述][SouthEast 3]

展示效果页面：  
      在浏览器中默认输入 localhost:4200,

![这里写图片描述][SouthEast 4]

# 五、小结 #

到这里位置，就算是我们可以建立一个Angular2的前端项目了，但是想要知道这个项目是如何运行的，如何加载出来app works！这个字的，小编会在下一篇博客中向大家介绍认识一下Angular2的组成部分。来吧~~

[Angular2]: http://blog.csdn.net/kisscatforever/article/details/78105506
[SouthEast]: /images/20220608/2e65adee3fc14dc3b00d052fceb3b69d.png
[SouthEast 1]: /images/20220608/886da81da5594cdc8f853ea07bbd0aa2.png
[SouthEast 2]: /images/20220608/6a15e6e6f5004979be35b85656b4aa30.png
[SouthEast 3]: /images/20220608/b96c33c0ff8644e89ca7ac25ce3822d6.png
[SouthEast 4]: /images/20220608/352ac1f81cd54f51842c6e342c4121a2.png