前端后端一锅端1

无哥

已于 2022-12-25 15:05:42 修改

阅读量87

点赞数

分类专栏： web 文章标签：前端 angular.js

于 2022-12-19 22:43:43 首次发布

本文链接：https://blog.csdn.net/willerwu/article/details/128371748

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

活到老学到老, 闲暇时琢磨琢磨web的开发，也算响应大潮流IIoT 4.0.

开个笔记栏目记录一下。

初步想法是web server + webhmi, node.js+angular.js + lua + websocket + c ,web开发小白一个，感觉学习曲线有点陡，不过闲着也是闲着，慢慢学起来吧。开始不太考虑实际问题比如soap+json的结合问题，效率问题，web server是standalone还是node.js起一个单独的，业务逻辑单独做一个Server，嵌入式环境有点特殊，需要考虑的东西还是很多.....

学习计划：

angular.js
node.js
穿插学习javascript, css, html, typescript
先拿angular.js入手。

day1: angular

直接网上普找一些入门文章：

1.运行自己的html,需要从官网上下载angular.min.js和angular-route.min.js到本地。

2. ebook: 揭秘angular2，大概扫视了一下，了解其构架，模模糊糊，太累。2022/12/19

3. angular-soap: 2022/12/20

https://github.com/andrewmcgivery/angular-soap

Send a SOAP Request over HTTP with Angular? - Stack Overflow

browser ----> web server ----> app server

+ +

websocket soap

倒腾一手，不知道performace如何？以后再考量，先实验一把argular-soap跟app直通，减少学习曲线。

wsdl2js

4. 2022/12/23: 昨天的没有保存。

vscode: 编译调试 typescript

a. "tsc.ps1 cannot be loaded because running scripts is disabled on this system"

解决：powreshell管理员执行，Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

b. open the Integrated Terminal (Ctrl+`)

c. TypeScript: Documentation - 面向编程初学者的 TypeScript

d. TypeScript tutorial with Visual Studio Code

e. 手工创建tsconfig.json，配置参数

f. 安装Install snippets from the Marketplace， Emmet 不需要安装Install snippets from the Marketplace，

g. debug js: launch.json {

"type": "node",

"request": "launch",

"name": "Launch Program",

"skipFiles": ["<node_internals>/**"],

"program": "${workspaceFolder}/out/helloworld.js"

}

h. debug ts: launch.json

{

"type": "node", //type属性是指你这次debug的类型常用的两类 node和chrome

"request": "launch", // 配置类型，launch和attach, vscode上说得晦涩，有嵌入式背景好理解

"name": "Launch Program", //调试配置的name，出现在start绿箭头

"skipFiles": ["<node_internals>/**"], //Skipping uninteresting code

//多行

Note: The legacy protocol debugger has to emulate the skipFiles feature because the V8 Debugger Protocol does not support it natively. This might result in slow stepping performance.
"skipFiles": [
    "${workspaceFolder}/node_modules/**/*.js",
    "${workspaceFolder}/lib/**/*.js"
  ]

"program": "${workspaceFolder}/helloworld.ts" //启动文件

}

chrome debugger: builder-in "JavaScript Debugger" An extension for debugging Node.js programs and Chrome.

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome",

"url": "http://localhost:8080",

"file": "${workspaceFolder}/index.html"

i: vscode,需要多用才有感觉，还是很牛掰的工具，有套路，跟visualstudio风格有很大差别。

每个IntelliSense suggestions (Ctrl+Space，或者输入""自己弹出attributes) to find out which attributes exist for a specific debugger. 可以看提示

j: A Logpoint is represented by a "diamond" shaped icon. Log messages are plain text but can include expressions to be evaluated within curly braces ('{}').这个断点类型好。

k: 明天消化一下preLaunchTask和postDebugTask，serverReadyAction

program - executable or file to run when launching the debugger
args - arguments passed to the program to debug
env - environment variables (the value null can be used to "undefine" a variable)
envFile - path to dotenv file with environment variables,

"envFile": "${workspaceFolder}/.env", //Load environment variables from external file

cwd - current working directory for finding dependencies and other files
port - port when attaching to a running process
stopOnEntry - break immediately when the program launches
console - what kind of console to use, for example, internalConsole, integratedTerminal, or externalTerminal
"runtimeVersion": "14": 可以指定node.js版本 2022/12/25
Attach to Node Process action: ? Ctrl+Shift+P，还没具体操作
sourceMaps ：true, 需要对应 the source and the generated JavaScript
passing --sourceMap to tsc, or by adding "sourceMap": true in your tsconfig.json
- 比如 tsc --sourceMap --outDir bin app.ts
- 但是Source Map Discovery，会拖慢编译，最好定义“outFiles” attribute in your launch.json， eg."outFiles": ["${workspaceFolder}/bin/**/*.js"], 这样仅仅搜索outFiles目录

l: remote debug: 后续板级调试再看

m: LOADED SCRIPTS view, 访问相关的access loaded scripts

"restart": true ：啥时起奇效？目前不知道， Pressing the Stop button stops the debug session and disconnects from Node.js, but nodemon (and Node.js) will continue to run. To stop nodemon, you will have to kill it from the command line (which is easily possible if you use the integratedTerminal as shown above)，需要手工杀！！

n: tasks.json：其实就是用来整合外部工具如make, like linting, building, packaging, testing, or deploying software systems, 暂时还没找到比较实际的使用场合（Transpiling TypeScript to JavaScript，Transpiling Less and SCSS into CSS）

在C++中

tasks.json (build instructions)
launch.json (debugger settings)
c_cpp_properties.json (compiler path and IntelliSense settings）

{//ts 转js的tasks.json配置
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}

o: tssconfig.json ：tsc -p jsconfig.json，tsc编译器不会自动探测jsconfig.json文件存在与否，需加参数-p, 关于performance后见:Performance · microsoft/TypeScript Wiki · GitHub

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"sourceMap": true,

"outDir": "out"

"allowjs":"true" //TypeScript and JavaScript 混合编程于一个工程

}

Misconfigured `include` and `exclude,常见的错误配置`

As mentioned above, the include/exclude options can be misused in several ways.

Problem	Cause	Fix
`node_modules` was accidentally included from deeper folder	`exclude` was not set	`"exclude": ["/node_modules", "/.*/"]`
`node_modules` was accidentally included from deeper folder	`"exclude": ["node_modules"]`	`"exclude": ["/node_modules", "/.*/"]`
Hidden dot files (e.g. `.git`) were accidentally included	`"exclude": ["**/node_modules"]`	`"exclude": ["/node_modules", "/.*/"]`
Unexpected files are being included.	`include` was not set	`"include": ["src"]`