Angular 快速入门

Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。其开发便捷程度不亚于Vue及React。语法简单易理解。

首先你电脑需安装较新版本NodeJS（v12.20, v14.15, v16.10），然后使用npm安装Angular脚手架：

npm install -g @angular/cli

安装完成之后，通过命令ng v查看：

下一步，通过脚手架创建项目：

ng new projectname

创建项目的过程中，会让你选择是否安装路由及选择样式预处理器，这个看自己的需要进行选择。
等待项目创建完成之后，到项目根目录，通过命令 ng serve --open运行项目，在浏览器4200端口进行访问！

Angular也是组件化、模块化开发，其一个组件的构成由界面html、样式css、逻辑ts组成。

组件的创建，推荐使用命令创建，不要自己手动创建：

ng g component pages/home

例如我通过上面的命令在pages文件夹下创建了一个home组件。这里你需要注意的是，创建组件你只需要在项目根目录使用命令即可，组件会被创建在app文件夹下，为了方便管理，建议创建页面组件时就创建在pages文件夹下，创建通用组件时就建在components文件夹下。

ng g component components/layout

语法方面是真的超级简单，html中标签内通过双花括号写ts文件中的变量即可将变量信息展示到界面。


同样的，标签内的控制语法 *ngIf ；循环语法 *ngFor 都是简单明朗，一看就懂。

简单示例：


同样，在html中调用ts中的方法更为简单：



接着还有一个比较常用且很简单的知识点，标签属性绑定！
在html中，你可以正常在标签内写一些标签，但是如果要动态绑定标签呢？该如何实现？
新语法： [属性名]

动态属性就是这么简单，原属性外加个中括号：
例如：

最后一点，讲一下逻辑ts文件的构成吧

import { Component, OnInit } from '@angular/core'; //从Angular核心库引入Component等内容

@Component({
  selector: 'app-home', //组件名称，相当于Vue <script>中的name,在别的组件中直接使用 <app-home></app-home> 进行引用
  templateUrl: './home.component.html', //逻辑对应的模板
  styleUrls: ['./home.component.scss']  //对应的样式文件
})
export class HomeComponent implements OnInit {

  content = "This is a component I created myself!" //属性值

  userList = [
    { name: "张三", age: 20, show: true},
    { name: "李四", age: 18, show: true},
    { name: "王五", age: 18, show: false}
  ]

  alertName(e: any) { //方法
    window.alert(e)
  }

  constructor() { //构造函数
    console.log("constructor")
  }

  ngOnInit(): void { // 页面初始化执行的函数
    console.log("ngOnInit")
  }

}

掌握以上内容，Angular就入门了，后面再继续深造吧！