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 销毁指令/组件之前调用。

Angular系列教程-第一节

Html、CSS、Javascript介绍

什么是Angular
Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。
Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现,你可以把它们导入你的应用中。

模块
NgModule 为一个组件集声明了编译的上下文环境,它专注于某个应用领域、某个工作流或一组紧密相关的能力。 NgModule 可以将其组件和一组相关代码(如服务)关联起来,形成功能单元。
每个 Angular 应用都有一个根模块,通常命名为 AppModule。根模块提供了用来启动应用的引导机制。 一个应用通常会包含很多特性模块。

组件
每个 Angular 应用都至少有一个组件,也就是根组件,它会把组件树和页面中的 DOM 连接起来。 每个组件都会定义一个类,其中包含应用的数据和逻辑,并与一个 HTML 模板相关联,该模板定义了一个供目标环境下显示的视图。

模板、指令、绑定
模板会把 HTML 和 Angular 的标记(markup)组合起来,这些标记可以在 HTML 元素显示出来之前修改它们。
指令是指使用在模板当中的语法结构。
绑定分为事件和属性绑定,事件绑定可以让你根据用户输入响应不同数据,属性绑定是将你的应用数据显示到html当中。

路由
路由器会根据你应用中的导航规则和数据状态来拦截 URL。 当用户点击按钮、选择下拉框或收到其它任何来源的输入时,你可以导航到一个新视图。 路由器会在浏览器的历史日志中记录这个动作,所以前进和后退按钮也能正常工作。

官方文档:https://angular.io/docs

环境搭建
Node.js
Angular 需要 Node.js 版本 10.9.0 或更高版本
下载地址:https://nodejs.org/en/

检查版本指令
node -v

npm包管理器
Angular、Angular CLI 和 Angular 应用都依赖于 npm 包中提供的特性和功能。要想下载并安装 npm 包,你必须拥有一个 npm 包管理器。

检查是否安装指令
npm -v

安装Angular  CLI
指令
npm install -g @angular/cli
检查
ng -h

更多参考:https://angular.io/cli

创建工作目录和初始化应用
指令
ng new my-test-app

运行应用
打开工作目录
执行cli命令
ng server –open

Vscode插件
TSLint:Typescript语法检查
Prettier:代码格式化
IntelliJ IDEA Keybindings:IDEA风格的快捷键
Angular 7 Snippets:Angular语法填充(标签)
Angular Files:生成Angular的文件模板(Component、Module、Pipe等等)
Angular Follow Selector:文件跳转(Component跳转到html、scss文件)
Angular Language Service:引用填充和跳转到定义(html中进行引用补全)
Debugger for Chrome:调试Angular代码

部署环境并运行应用

Angular使用css

1.全局引入(index.html)

<link
rel="stylesheet"
href="http://demo.joyousphper.com/angular/part2/assets/css/video.css"
crossorigin="anonymous"
/>

2.全局样式文件(styles.css)

需要配置angular.json文件中

“styles”: [“src/styles.css”],

3.组件样式

3.1可以使用link引入到组件的html文件中

3.2可以使用<style>标签编写css文件

3.3可以在ts文件当中的定义styleUrls

3.4可以组件的html当中使用import导入组件(主要导入的时候路径 )

<style>
  @import url("assets/forms.css");
</style>

不然可能打包子目录的时候会出现css文件404的情况

Angular部署Nginx子目录

1.打包

ng build –base-href /angular/part2/ –prod

注意:part2后面需要带斜线

2.nginx配置

server {
    listen 80;
    root /data/web/html/blog.joyousphper.com;
    index index.php index.html index.htm index.shtml;
    server_name blog.joyousphper.com;    
    location = /favicon.ico {
        log_not_found off;
        access_log off;
    } 
    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }
    location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico)$ {
        access_log off;
        expires 7d;
    }
    location /angular/part2 {
       root /data/web/html/blog.joyousphper.com/angular/part2;
       index  index.html index.htm;
       try_files $uri $uri/ /index.html =404;
    }
}

示例:

http://demo.joyousphper.com/angular/part2/

Vue使用代理请求后端接口

//修改config/index.js
    
    proxyTable: {
      '/demo': {
        target: "https://blog.phpfs.com",
        changeOrigin: true,
        // pathRewrite: {
        //   '^/': '/'
        // }
      }

    },
//使用
 mounted () {
    var _this = this
    axios.get('/demo/demo.json').then(response => {
      console.log('返回数据', response.data)
      if (response.data.code === 0) {
        _this.$data.bannerItems = response.data.data.bannerItems
      }
    }).catch(error => console.log(error))
  },
//实际请求的接口地址是
https://blog.phpfs.com/demo/demo.json

PS:配置之后执行yarn run dev即可生效

Vue使用axios

使用axios访问API

一、按需引入
1、安装
yarn add axios

2、导入
import axios from ‘axios’

3、使用
  mounted: function () {
    // 按需引入
    axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘按需引入’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

二、全局引入
1、全局引入-结合Vueaxios
1.1安装
yarn add axios vue-axios

1.2入口文件导入
import VueAxios from ‘vue-axios’
import axios from ‘axios’

Vue.use(VueAxios, axios)

1.3使用
  mounted: function () {

    // 全局使用vue-axios
    this.axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘全局引入’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

2、全局引入-使用原型属性(不推荐)
2.1安装
yarn add axios

2.2入口文件导入
import axios from ‘axios’

更改属性
Vue.prototype.$axios = axios

2.3使用
mounted: function () {
    // 全局使用prototype
    this.$axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘全局引入2’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

3、全局引入-结合vuex
3.1安装
yarn add vuex

3.2入口文件引入
import Vuex from ‘vuex’
import axios from ‘axios’

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    num: 1
  },
  actions: {
    // 封装一个 ajax 方法
    test () {
      axios({
        method: ‘get’,
        url: ‘https://localhost:8080/test.json’,
        data: {}
      }).catch(error => { console.log(‘错误提示’, error) })
    }
  }
})

3.3使用
   methods: {
    submitForm: function () {
      console.log(‘被点击’)
      this.$store.dispatch(‘test’)
    }
  }

vuex插件手册
https://vuex.vuejs.org/zh/

Vscode配置vue、angular项目的settings.json

{
  "editor.rulers": [
    120
  ],
  "editor.wordWrapColumn": 120,
  "editor.lineNumbers": "on", //打开行号
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, // tab空格
  "editor.formatOnSave": true, //保存时自动格式化
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // eslint
  "eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  "eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  }
}

Vue使用ElementUI

1、全局安装
yarn add element-ui -S

2、入口js导入
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’

3、使用
Vue.use(ElementUI)

4、页面使用组件
 <el-button>默认按钮</el-button>

更多参考:
https://element.eleme.cn/#/zh-CN/component/installation

PS:
Image图片属性fit说明
fill 被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应
contain 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加黑边
cover 被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应
none 被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应
scale-down 内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸