angular的安装与使用

一、angular的介绍

Angular是谷歌开发的一款开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
根据项目数统计angular（1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架。

二、angular的安装

1、环境配置

1）Node.js的下载

下载 | Node.js 中文网

2）安装

        双击安装包，直接点击Next，勾选使用许可协议，点击Next，选择安装位置（可根据个人情况更换路径，我这里选择安装在D:\nodejs）

        继续点击Next，点击Next，点击Install，点击Finish完成安装。

3)  修改默认路径

        在node安装路径下新建两个文件夹node_global、node_cache

        npm config set prefix "D:\Program Files\nodejs\node_global"

        npm config set cache "D:\Program Files\nodejs\node_cache"

4）设置环境变量

        a、（win11）进入环境变量，编辑【系统变量】下的变量【Path】    （控制面板-->高级系统设置-->环境变量）

        b、进入系统变量查看Path 点击编辑  添加 D:\nodejs\

5）验证是否安装成功

        node -v

 先按win键+R键，输入cmd

弹出黑框，输入命令，显示以下内容，则表示node安装成功。

2、安装angular.cli脚手架

        npm install -g @angular/cli

 安装完成输入一下命令，查看angular脚手架是否安装成功

起项目的命令：

npm start 或者 ng serve 

3、文件说明

Node_modules    依赖包
|--Src    
   |--App    Angular应用文件
      |--App.module.ts    
      |---App.component.ts    
   |--assets    资源文件
   |--environments    环境配置：开发、部署
   |--index.html    应用的宿主页面。 它以特定的顺序加载一些基本脚本。 然后它启动应用，将根AppComponent放置到自定义<my-app>标签里。
   |--main.ts    项目的入口文件
   |--polyfills.ts    处理浏览器兼容问题
|--angular.json    Cli配置文件
|--.editorconfig    统一代码风格工具配置，不支持的需要安装插件
|--.gitignore    Git配置文件
|--karma.conf.js    在测试指南中提到的 karma 测试运行器的配置。
|--package.json    项目指定npm依赖包
|--tsconfig.app.json    Typescript编译配置
|--tsconfig.spec.json    Typescript测试编译配置
|--tsconfig.json    Typescript编译配置
|--tslint.json    Typescript语法检查器

4、自定义创建组件

ng g component /routes/flow-center/flow/order-resource-test-postpone-approve