Angular------win10搭建Angular环境并运行hello-world

你的名字 2022-12-31 13:25 190阅读 0赞

**本文及系列所有文章均基于Win10系统**

# 前言 #

Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。 最近项目中的某个模块要使用Angular来做前端界面，所以现在开始要学习一下。

# node、npm安装 #

实际上只需要安装node，因为在安装node的过程中，会一起安装npm组件，我电脑上已经安装了node和npm，所以这里就不在展示安装过程了，大家可以直接进入node官网安装即可。

[node官网][node]

安装完成之后查看node和npm的版本

C:\Users\Administrator>node -v
    v14.15.2
    C:\Users\Administrator>npm -v
    6.14.9

# 安装cnpm #

npm和cnpm都是自动从网络上获取一些开发资源的工具，但是npm访问的是国外的资源，cnpm是访问的淘宝维护的国内的资源，所以在获取一些资源的时候，使用cnpm要快的多 。

执行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行结果

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
    npm WARN deprecated har-validator@5.1.5: this library is no longer supported
    C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
    + cnpm@6.1.1
    added 689 packages from 972 contributors in 60.995s

# 安装angular/cli #

执行命令

cnpm install -g @angular/cli

等待安装完成

# 创建一个angular项目 #

我的angular项目路径是D:\\project\\angular

进入项目路径并new一个angular项目

C:\Users\Administrator>d:
    D:\>cd project
    D:\project>cd angular
    D:\project\angular>ng new hello-world

构建选项

? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
      This setting helps improve maintainability and catch bugs ahead of time.
      For more information, see https://angular.io/strict Yes
    ? Would you like to add Angular routing? Yes
    ? Which stylesheet format would you like to use? Less   [ http://lesscss.org]

等待构建完成

The file will have its original line endings in your working directory
        Successfully initialized git.
        ```
    # 运行项目
    进入项目文件夹并启动项目
    ```shel
    D:\project\angular>cd hello-world
    D:\project\angular\hello-world>ng serve --open

等待项目编译完成

Compiling @angular/core : es2015 as esm2015
    Compiling @angular/common : es2015 as esm2015
    Compiling @angular/platform-browser : es2015 as esm2015
    Compiling @angular/router : es2015 as esm2015
    Compiling @angular/platform-browser-dynamic : es2015 as esm2015
    √ Browser application bundle generation complete.
    
    Initial Chunk Files   | Names         |      Size
    vendor.js             | vendor        |   2.66 MB
    polyfills.js          | polyfills     | 484.59 kB
    styles.css, styles.js | styles        | 344.16 kB
    main.js               | main          |  59.53 kB
    runtime.js            | runtime       |   6.15 kB
                          | Initial Total |   3.53 MB
    Build at: 2020-12-29T16:14:52.985Z - Hash: 01d7b61d91b9fb3c0772 - Time: 12210ms
    ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
    √ Compiled successfully.
    √ Browser application bundle generation complete.
    Initial Chunk Files   | Names  |      Size
    styles.css, styles.js | styles | 344.16 kB
    4 unchanged chunks
    Build at: 2020-12-29T16:14:59.660Z - Hash: 14a5cf3d9e5aae347e75 - Time: 2215ms
    √ Compiled successfully.

# 访问项目 #

访问网址 [http://localhost:4200/][http_localhost_4200]

# 项目首页 #

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

# 总结 #

搭建过程其实是非常简单的，没遇到啥问题，主要注意的就是如果你在国内开发的话，需要设置cnpm，我用了代理，所以这方面的需求也不高，如果你在搭建过程中下载文件非常慢，请注意设置cnpm

我是Baldwin，一个25岁的程序员，致力于让学习变得更有趣！  
现在关注作者即可领取海量学习资料与简历模板  
![微信扫描图片关注作者公众号领取福利][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 1]

往期好文：

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

[MySQL优化之explain][MySQL_explain]

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

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

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

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

[Java注解详解][Java]

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

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

[node]: https://nodejs.org/en/
[http_localhost_4200]: http://localhost:4200/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/307ccc4dd9774beea5d6802ffb5cca93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nob3VjaGVuY2h1YW41MjUz_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/d1ec9531bc554dc18a557e255ee5b05c.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