Angular-CLI 入门教程

官网

https://angular.cn/

建议先学Angular基础教程 然后在去学习Angular-Cli环境搭建

Angular-CLI结构介绍

使用Angular-CLI 创建完项目后结构介绍

app/app.component.{ts,html,css,spec.ts}

使用HTML模板、CSS样式和单元测试定义AppComponent组件。它是根组件，随着应用的成长它会成为一棵组件树的根节点
1.
app/app.module.ts

定义AppModule，这个根模块会告诉Angular如何组装该应用。目前，它只声明了AppComponent。稍后它还会声明更多组件。
1.
assets//*

这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
1.
environments//*

这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。这些文件会在构建应用时被替换。比如你可能在产品环境中使用不同的API端点地址，或使用不同的统计Token参数。甚至使用一些模拟服务。所有这些，CLI都替你考虑到了。
1.
favicon.ico

每个网站都希望自己在书签栏中能好看一点。请把它换成你自己的图标。
1.
index.html

这是别人访问你的网站是看到的主页面的HTML文件。大多数情况下你都不用编辑它。在构建应用时，CLI会自动把所有js和css文件添加进去，所以你不必在这里手动添加任何 <script> 或 <link> 标签。
1.
main.ts

这是应用的主要入口点。
1.
polyfills.ts

不同的浏览器对Web标准的支持程度也不同。填充库（polyfill）能帮我们把这些不同点进行标准化。你只要使用core-js 和 zone.js通常就够了，不过你也可以查看浏览器支持指南以了解更多信息。
1.
styles.css

这里是你的全局样式。大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
1.
test.ts

这是单元测试的主要入口点。它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
1.
tsconfig.{app|spec}.json

TypeScript编译器的配置文件。tsconfig.app.json是为Angular应用准备的，而tsconfig.spec.json是为单元测试准备的。

创建组件

ng g component demo

Angular cli帮我们干了如下事情：
src/app/demo 目录被创建
demo 目录下会生成以下四个文件：
demo.component.css CSS 样式文件，用于设置组件的样式
demo.component.html HTML 模板文件，用于设置组件的模板
demo.component.ts TypeScript 文件，里面包含一个 GreatAngular 组件类和组件的元信息
demo.component.spec.ts Spec 文件，包含组件相关的测试用例
demo 组件会被自动地添加到最近模块app.module.ts内的 @NgModule 装饰器的 declarations 属性中。

Angular CLI其他命令

https://angular.cn/cli

打包项目

默认使用绝对路径 ,这种打包方式是一般将将项目内嵌到后端项目中使用的

打包后的index.html会发生 Failed to load resource: net::ERR_FILE_NOT_FOUND 错误这是路径问题,

ng build

使用相对路径 , 这种打包方式一般是前后端分离打包

ng build --base-href ./

入门项目: 英雄之旅

我知道大家到这里肯定懵逼,啥都不会学啥啊,学什么,这里解释下,这个项目是为了加快大家对Angular的学习

https://angular.cn/tutorial 官方教程安装这个写就行了,基本是没啥问题的

下面这个就是英雄之旅的原代码,有略微的改动(包括后端代码(增加了登录系统))

链接：https://pan.baidu.com/s/1iLj3tKZqcZnwR8h61Q2hAg
提取码：1234

注意: 后端项目使用SpringBoot开发的 ,需要找会后端的人给你启动

范例应用

https://angular.cn/guide/example-apps-list/#working-with-templates

错误参考和解决方案

https://angular.cn/errors/NG0100

Angular CLI -UI组件 (PC)

https://material.angular.cn/ (官网组件)

https://devui.design/home

https://ng.ant.design/docs/introduce/zh

Angular CLI -UI组件 (手机端)

一般手机端是没有table(表格的) 只有pc端电脑大能展示出来所以 Ant Design Mobile of Angular 就没有table组件

https://ng.mobile.ant.design//#/docs/introduce/zh

注意: 如果是做pc和手机通用自适应的话那么就是PC组件就行

Angular-ClI入门教程