Angular：Angular安装与项目的创建

AngularJS和Angular是不一样的，AngularJS基于JavaScript，angular基于typescript，从angular2往后开始，统称为 angular，没有后面的JS,以此区分。

我这里是angular8...

1.安装node.js,里面包含了npm，所以不需要单独安装，环境变量安装好之后自动配置，不需要手动配置。

node.js官网：https://nodejs.org/en/

安装完成后检查，在cmd命令窗口执行node -v查看node.js版本，执行npm -v查看npm版本，下图说明安装成功。

2.设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

或者

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

        第一种是把npm的下载渠道改为淘宝镜像,第二种是直接从淘宝镜像下载，但是后期npm必须改为cnpm。这么做是因为如果直接通过npm下载是从国外下载，速度超慢，推荐使用第二种，因为第一种还是很慢。淘宝依赖下载的东西有可能存在不匹配之类的，但问题不大。

3.安装 typescript和typings

cnpm install -g typescript typings

         前面说过，angular是基于typescript开发的，所以要先安装typescript和typings,安装完成后，执行tsc –v检查

4.全局安装angular-cli

cnpm i -g @angular/cli

完成后执行ng version检查,以前是ng -v就可以了，现在要ng version才行，不知道以后会改成啥样...

至此基本安装完成，可以试着创建一个项目

5.目前我知道的创建方式有两种：(myApp是项目名，自定义)

1.ng new myApp

2.ng new myApp --skip-install

第一种是创建项目的同时安装node包，第二种是创建项目跳过node包的安装，需要单独安装

安装命令：cnpm i 或者cnpm install

单独安装还是因为速度问题，单独安装速度快一些

6.目录结构

创建完成后进入项目（可以通过编译软件进入，我用的是vscode），会看到以下目录

e2e:端到端的测试目录，用来做自动化测试

node_modules:第三方依赖包存放目录，这就是刚刚通过cnpm i安装的那个，所有的第三方依赖都在这里面

src:应用源代码目录

.editorconfig：webstorm的配置文件

.gitignore：git的配置文件

angular.json:工作空间配置文件，很重要的一个文件，node包里面的东西都要通过这个文件实现

browserslist:目标浏览器配置表

karma.conf.js:karma是单元测试的执行器，此文件时karma的配置文件

package-lock.json：这是在执行cnpm i的时候生成的一份文件，记录当前状态下实际安装的各个npm package的具体来源和版本号。说的再白话一点，package.json文件里面的配置很多是不固定的，别人在获取我们的项目后，需要cnpm i下载node包，如果没有这个文件，他下载的很有可能和我们本地的版本不一样，然后导致不兼容项目运行失败。这个文件相当于就是记录固定版本，别的人在下载node包的时候能够统一版本号。

package.json：也是很重要的一个文件，标准的npm工具的配置文件，文件里列出了该应用程序所用的第三方依赖包，我们在建项目初始化时就是在下载这些包，放在了node_modules这个目录中。在后期需要增加依赖的时候，通过命令执行，会自动的在这个文件或者angular.json文件中生成配置。提示一下，千万不要随便更改package.json里面的配置，angular很讲兼容性，随便更改可能会导致不兼容，然后项目运行失败

README.md:说明文件

tsconfig.app.json:TypeScript编译器的配置，添加第三方依赖时会修改

tslint.json:是tslint的配置文件，用来定义TypeScript代码质量检查的规则

7.src目录

app:包含应用的组件和模块，我们要写的代码都在这个目录里

assets：资源目录，存放静态资源，比如图片

environments：环境配置，angular支持多环境开发，比如开发环境、测试环境、生产环境公用一套代码，用来配置环境

index.html:整个应用的根html，程序启动首先访问这个页面

main.ts：整个项目的入口点，angular通过这个文件启动项目

polyfills.ts：主要用来导入一些必要库，为了让angular能够在老版本浏览器下正常运行

styles.css:放全局样式，这里面写的样式可以全局调用

test.ts:也是自动化测试用的

8.app目录

angular程序至少要保证有一个模块和一个组件，所以在创建项目的同时已经生成好了

app.component.ts:这个便是组件，组件是angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的html，有点类似于一个js文件，这个文件里面最重要的就是@Component装饰器（java里面叫注解，angular叫装饰器）,正是因为这个装饰器的存在，这个文件才能被称为组件

app.module.ts:模块文件

9.angular常用命令

创建工程：ng new 工程名

启动项目：ng serve 或者npm start（在package.json里面配置）

压缩启动项目：ng serve --prod --aot

编译项目：ng build --prod --aot

创建组件：ng g c 组件名

创建服务：ng g s 服务名

添加路由AppRoutingModule：ng g m app-routing --flat --module=app

--flat 把这个文件放进了 src/app 中，而不是单独的目录中

--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中

 

以上的内容是我观看angular教程，文档，以及别人的博客，在这里做的一个整合记录，方便以后自己观看，也希望能够帮到angular的初学者，如果有什么不对的地方还请大佬指点！