npm run dev/serve/build

场景:

vue2x的时候使用npm run dev来进行vue开发

vue3x改为npm run serve

那具体什么时候用serve什么时候用dev呢?

你需要查看package.json里面的scripts的配置

export和import

1、引入第三方插件
import echarts from ‘echarts’
import axios from ‘axios’

2、引入工具类
2.1单个引入
import {getList} from ‘./util’;

const getList = (params) => {
return 
}
export getList; 

2.2批量引入
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from “@angular/core”;

3、export 和 export default 
export可以批量导入,需要携带{}
export default 只能导入一个,不需要携带{}

Angular命令

node -v 检查node.js安装
npm  -v 检查npm安装
npm install -g @angular/cli 安装CLI
ng new my-app 创建工作空间并初始化应用
ng serve 运行应用
ng help 命令帮助
ng generate –help 命令帮助
ng add 添加包到项目中
ng build 编译发布
ng build –base-href /angular/my-test-app/ 指定子目录
ng config 添加配置信息
ng generate component video/video 创建组件
ng generate module demo 创建模块
ng generate enum video/GENRE 创建枚举类型
ng generate class video/video 创建类
ng generate service service/Logger  创建服务
ng generate directive my-directive 新建指令
ng generate pipe my-pipe 新建管道

备注
–base-href 注意目录结束要带/

Angular系列教程-TypeScript

安装环境
npm -g install typescript
检查是否安装
tsc -v
编译帮助
tsc -h
编译文件输出到指定目录
tsc –outDir  ./js/  ./src/index.ts
编译项目
tsc   会查找当前目录下的tsconfig.json文件进行编译

<br />

tsconfig配置说明
    {
    "compilerOptions": {
      "allowUnreachableCode": true, // 不报告执行不到的代码错误。
      "allowUnusedLabels": false,   // 不报告未使用的标签错误
      "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
      "baseUrl": ".", // 工作根目录
      "experimentalDecorators": true, // 启用实验性的ES装饰器
      "jsx": "react", // 在 .tsx文件里支持JSX
      "sourceMap": true, // 是否生成map文件
    //   "module": "commonjs", // 指定生成哪个模块系统代码
      "noImplicitAny": false, // 是否默认禁用 any
      "removeComments": true, // 是否移除注释
      "types": [ //指定引入的类型声明文件,默认是自动引入所有声明文件,一旦指定该选项,则会禁用自动引入,改为只引入指定的类型声明文件,如果指定空数组[]则不引用任何文件
        "node", // 引入 node 的类型声明
      ],
      "paths": { // 指定模块的路径,和baseUrl有关联,和webpack中resolve.alias配置一样
        "src": [ //指定后可以在文件之直接 import * from 'src';
          "./src"
        ],
      },
      "target": "es2015", // 编译的目标是什么版本的
      "outDir": "../js/", // 输出目录
      "declaration": true, // 是否自动创建类型声明文件
      "declarationDir": "./lib", // 类型声明文件的输出目录
      "allowJs": true, // 允许编译javascript文件。
      "lib": [ // 编译过程中需要引入的库文件的列表
        "es5",
        "es2015",
        "es2016",
        "es2017",
        "es2018",
        "dom"
      ]
    },
    // 指定一个匹配列表(属于自动指定该路径下的所有ts相关文件)
    "include": [
      "src/**/*"
    ],
    // 指定一个排除列表(include的反向操作)
    // "exclude": [
    //   "demo.ts"
    // ],
    // 指定哪些文件使用该配置(属于手动一个个指定文件)
    // "files": [
    //   "demo.ts"
    // ]
  }

Angular系列教程-第六节

1.第三方类库使用

2.rxjs库使用
网络请求HttpClient

3.编译发布
ng build –base-href /angular/my-test-app/ –prod

4.使用bootstrap
参考
https://v3.bootcss.com/css/#responsive-utilities

5.管道
date
json
lowercase 转小写
uppercase 转大写
titlecase 把文本转换成标题形式。 把每个单词的第一个字母转成大写形式,并把单词的其余部分转成小写形式。 单词之间用任意空白字符进行分隔,比如空格、Tab 或换行符。
slice 切割子集
percent 把数字转换成百分比字符串, 根据本地化规则进行格式化,这些规则会决定分组大小和分组分隔符、小数点字符以及其它与本地化环境有关的配置项。

7.安全
XSS攻击
跨站脚本(XSS)允许攻击者将恶意代码注入到页面中。这些代码可以偷取用户数据 (特别是它们的登录数据),还可以冒充用户执行操作。它是 Web 上最常见的攻击方式之一
XSRF
在跨站请求伪造(XSRF 或 CSFR)中,攻击者欺骗用户,让他们访问一个假冒页面(例如 evil.com), 该页面带有恶意代码,秘密的向你的应用程序服务器发送恶意请求

8.i18n国际化
日期、数字、百分比以及货币等

9.API手册使用
https://angular.cn/api
https://angular.io/api

Angular系列教程-第五节

1.模块
NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象,用于描述如何编译组件的模板,以及如何在运行时创建注入器。 它会标出该模块自己的组件、指令和管道,通过 exports 属性公开其中的一部分,以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的依赖注入器中。
NgModule 的元数据会做这些:
声明某些组件、指令和管道属于这个模块。
公开其中的部分组件、指令和管道,以便其它模块中的组件模板中可以使用它们。
导入其它带有组件、指令和管道的模块,这些模块中的元件都是本模块所需的。
提供一些供应用中的其它组件使用的服务。
每个 Angular 应用都至少有一个模块,也就是根模块。 你可以引导那个模块,以启动该应用。

@NgModule 装饰器表明 AppModule 是一个 NgModule 类。 @NgModule 获取一个元数据对象,它会告诉 Angular 如何编译和启动本应用。
declarations —— 该应用所拥有的组件。
imports —— 导入 BrowserModule 以获取浏览器特有的服务,比如 DOM 渲染、无害化处理和位置(location)。
providers —— 各种服务提供商。
bootstrap —— 根组件,Angular 创建它并插入 index.html 宿主页面。

该模块的 declarations 数组告诉 Angular 哪些组件属于该模块。 当你创建更多组件时,也要把它们添加到 declarations 中。
每个组件都应该(且只能)声明(declare)在一个 NgModule 类中。 如果你使用了未声明过的组件,Angular 就会报错。
declarations 数组只能接受可声明对象。可声明对象包括组件、指令和管道。 一个模块的所有可声明对象都必须放在 declarations 数组中。 可声明对象必须只能属于一个模块,如果同一个类被声明在了多个模块中,编译器就会报错。
这些可声明的类在当前模块中是可见的,但是对其它模块中的组件是不可见的 —— 除非把它们从当前模块导出, 并让对方模块导入本模块。

1.1根模块和特性模块
应用最少有一个模块(根模块)
特性模块是用来对代码进行组织的模块。

2.服务和依赖注入
服务是一个广义的概念,它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事,并做好。
Angular 把组件和服务区分开,以提高模块性和复用性。 通过把组件中和视图有关的功能与其他类型的处理分离开,你可以让组件类更加精简、高效。
理想情况下,组件的工作只管用户体验,而不用顾及其它。 它应该提供用于数据绑定的属性和方法,以便作为视图(由模板渲染)和应用逻辑(通常包含一些模型的概念)的中介者。

依赖注入
在 Angular 中,要把一个类定义为服务,就要用 @Injectable() 装饰器来提供元数据,以便让 Angular 可以把它作为依赖注入到组件中。 同样,也要使用 @Injectable() 装饰器来表明一个组件或其它类(比如另一个服务、管道或 NgModule)拥有一个依赖。

3.路由
在用户使用应用程序时,Angular 的路由器能让用户从一个视图导航到另一个视图。

<base href=”/”>

3.1路由配置

3.2路由占位符

3.3路由点击状态

3.4路由参数

4.配置说明
项目文件说明
.editorconfig 代码编辑器的配置
.gitignore 指定 Git 应忽略的不必追踪的文件
README.md 根应用的简介文档.
angular.json 为工作区中的所有项目指定 CLI 的默认配置,包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项。
package.json 配置工作空间中所有项目可用的 npm包依赖 
package-lock.json 提供 npm 客户端安装到 node_modules 的所有软件包的版本信息
src/ 根项目的源文件。
tsconfig.json 工作空间中各个项目的默认 TypeScript 配置。
tslint.json 工作空间中各个项目的默认 TSLint 配置。
karma Karma是一个对JavaScript代码执行提供多种浏览器运行环境的工具
Polyfills (腻子脚本)主要支持低版本浏览器的兼容。

5.npm和yarn
无论使用 npm 还是 yarn 安装的包,都会记录在 package.json 文件中。

npm install –save-dev <package-name>
yarn add –dev <package-name>

Angular系列教程-第四节

1.表单
Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。 两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径

使用’@angular/forms’库中的FormGroup, FormControl,FormArray,FormBuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule)

模板驱动的表单是我们实例化好一个类的数据之后,在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel)]来将表单的数据和和视图进行双向绑定,NgForm 指令为 form 增补了一些额外特性。 它会控制那些带有 ngModel 指令和 name 属性的元素,监听他们的属性。

总结
响应式表单是动态的,模板驱动表单是固定的

2.响应式表单使用
注册ReactiveFormsModule
组件导入FormControl
模板中注册组件
控件的值(获取setvalue和更新)
formgroup使用
表单提交
更新部分内容(patchValue)
表单验证(导入Validators,设置字段属性)
表单状态(status)
formarray(管理任意数量控件)
表单验证
同步验证器和异步验证器
备注:同步验证先执行,异步验证后执行

3.模板驱动表单使用
导入formcontrol
使用ngModel实现双向绑定
使用模板变量来获取表单

4.内置验证器
min 此验证器要求控件的值大于或等于指定的数字
max 此验证器要求控件的值小于等于指定的数字
required 此验证器要求控件具有非空值
requiredTrue 此验证器要求控件的值为真
email 此验证器要求控件的值能通过 email 格式验证。
minLength 此验证器要求控件值的长度大于等于所指定的最小长度。当使用 HTML5 的 minlength 属性时,此验证器也会生效。
maxLength 此验证器要求控件值的长度小于等于所指定的最大长度。当使用 HTML5 的 maxLength 属性时,此验证器也会生效。
pattern 此验证器要求控件的值匹配某个正则表达式。当使用 HTML5 的 pattern 属性时,它也会生效。

5.指令
组件 — 拥有模板的指令。
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令,比如ngfor、ngif
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,比如ngstyle

6.属性型指令
6.1创建
6.2引入
6.3编写

7.自定义指令
directive

Angular系列教程-第三节

1.ng generate指令使用
1.1缩写ng g 
1.2创建类
ng generate class video/video 创建类
1.3创建组件
ng generate component video/video 创建组件

2.TS数据类型
布尔值
数字
字符串
数组
元组
枚举
空值
Null 和 Undefined

3.变量和常量
let 定义变量(var也可以定义,但是推荐使用let)
const 定义常量(不允许重新赋值)

4.函数
函数定义
可选参数(参数名旁使用 ?实现可选参数的功能,可选参数放在必填参数之后)
默认参数(默认参数可传值也可不传,一般默认参数在必须参数之后,但也可以定义在默认参数之前,但此时必须明确传入undefined以获取默认值)
剩余参数(当参数个数不确定时,可以使用三个点)

5.接口和类
interface:接口只声明成员方法,不做实现
class:类声明并实现方法

6.构造方法和类方法

7.console.log使用
调试代码

8.组件使用
8.1创建组件
8.2导入组件(app.module.ts导入)
8.3列表组件实现
8.3.1模拟数据
8.3.2显示数据
8.3.3添加click事件
8.3.4详情区显示
8.3.5点击内容添加样式
8.4列表组件引入页面

9.组件生命周期
当 Angular 新建、更新和销毁它们时触发。 通过实现一个或多个 Angular core 库里定义的生命周期钩子接口,开发者可以介入该生命周期中的这些关键时刻
每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上 ng 前缀构成的。比如,OnInit 接口的钩子方法叫做 ngOnInit, Angular 在创建组件后立刻调用它

ngOnInit()
在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用,只调用一次。

ngOnDestroy()
每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。
在 Angular 销毁指令/组件之前调用。