angular 基础入门总结

工程文件创建和依赖下载

依赖npm工具

npm用来对node.js的模块进行管理

主要2个用途：下载别人编写的第三方包到本地使用；

              上传自己的包供别人使用；

package.json

执行npm init 可以根据提示生成包描述文件，就是自己包的工程文件：package.json

主要是添加"dependencies": {}中依赖的包；

下载依赖到本地

然后执行npm install

执行成功后，目录下就会生成一个 node_modules 目录，包含了我们这个实例需要的模块。

TS编译器和执行

安装TS

node_modules\typescript\lib\tsc.js:93编译错误

安装ts稳定版本：npm install -g typescript@4.2.3

编译TS

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。

然后执行以下命令将 TypeScript 转换为 JavaScript 代码：

执行TS

tsc test.ts

这时候再当前目录下（与 test.ts 同一目录）就会生成一个 test.js 文件，代码如下：

var message = "Hello World";

console.log(message);

使用 node 命令来执行 test.js 文件：

$ node test.js

Hello World

重要语法

this 关键字

https://www.runoob.com/js/js-this.html

 搞明白this指向的对象很重要，否则理解错了执行结果就和预期不同。写代码时如果不清楚时就具体查询下。

装饰器

https://blog.csdn.net/z_e_n_g/article/details/131099112

装饰器就是定义的一个函数，放在目标代码的前面用于包装或扩展代码功能。它接受所装饰的内容作为参数。分为类装饰器和类型成员装饰器，只是在接收的参数上不同。使用的时候用 @ 符号加上定义的装饰器名称放在要装饰的对象前即可。

匿名函数

https://blog.csdn.net/Jsy_997/article/details/124474285

匿名函数：就是没有函数名的函数，最大的作用就是闭包。

箭头函数

箭头函数的语法规则：http://www.javashuo.com/article/p-hqdbcfpw-dk.html

(parameters) => { statements }

箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法做用域，由上下文确定。箭头函数不会绑定this。 或则说箭头函数不会改变this原本的绑定。

Module

一个模块（module）就是一个文件。一个脚本就是一个模块。

​export​ 关键字标记了可以从当前模块外部访问的变量和函数。

​import​ 关键字允许从其他模块导入功能。

模块支持特殊的关键字和功能，因此我们必须通过使用 <script type="module"> 特性（attribute）来告诉浏览器，此脚本应该被当作模块（module）来对待。

在浏览器中，对于 HTML 页面，每个 <script type="module"> 都存在独立的顶级作用域。

对于模块，两个模块中的定义的全局变量是不能互相访问的，我们使用导入/导出进行访问替代全局变量方式。

https://www.w3cschool.cn/qoyhx/qoyhx-aoxp3q6n.html?RECACHE=1

http://weisim3.com/Download?Id=162  //这个比较好

https://cloud.tencent.com/developer/article/1907093?from=15425

普通的文件包含：

  <script src="example.js"></script>

https://blog.csdn.net/weixin_61766112/article/details/126850572

https://tool.4xseo.com/a/6006.html

创建应用

1、定义、导出组件AppComponent

@Component({

   selector : 'mylist',

   template : '<h2>菜鸟教程</h2>'

   directives : [ComponentDetails]

})

export class ListComponent{...}

@Component 装饰器，它实现了：接受一个配置对象，并把紧随其后的类标记成了组件类。

Angular 会基于这些信息创建和展示组件及其视图。

2、定义、导出模块AppModule ，模块包含组件

@NgModule({

  imports:      [ BrowserModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppModule  ]

})

3、创建main.ts启动AppModule

总结：**Module包含**Component然后main调用启动Module