PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

Angular怎么构建组件?3种方法介绍

青灯夜游
青灯夜游 转载
2021-08-12 10:32:56 6475浏览

angular怎么构建组件?本篇文章给大家介绍一下angular创建项目的方法,angular创建组件的三种方式。

一、angular 与angularjs的区别是什么?

  • 命名变化,Angular2 以后官方命名为Angular, 2.0 以前的版本称为AngualrJS。【相关教程推荐:《angular教程》】

  • 1.x 的使用方式是引入AngularJS 的js 文件到网页,2.0 之后就完全不同了,两者的区别类似Java 和JavaScript。

1.png

二、创建一个项目

1.安装全局的 Angular CLI 命令行工具

npm install -g @angular/cli

2.创建项目

ng new angular-tour-of-heroes

注意:node 版本需要在12以上,否则会提示:“'ng' 不是内部或外部命令,也不是可运行的程序 或批处理文件。”

3.跑项目

cd angular-tour-of-heroes
ng serve --open

2.png

三、创建组件的第一种方式:

1.src文件下,新建文件,命名hello-world.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'hello-world组件',
    // templateUrl: './app.component.html',
    // styleUrls: ["./app.component.scss"]
    template: `<h1>{{text}}</h1>`

})
export class HellowordComponent {
    constructor() {}
    text = "第一个模板";
}

3.png

2.app.component.html中或app.component.ts中新增组件标签

4.png

// 引入ng核心包和组件
import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,//当前组件的引用名称
  template:
    ` 
 <hello-world></hello-world>//x新增组件标签

    `  ,
  // templateUrl: &#39;./app.component.html&#39;,//组件模板
  styles: [&#39;h1 { color:red}&#39;]
  // styleUrls: [&#39;./app.component.scss&#39;]//组件的样式文件

})
export class AppComponent {//组件名称

}

3.app.module.ts中引入组件,声明组件

5.png

四、创建组件的第二种方式:

使用cli创建组件

输入命令:

ng generate component hello-world

6.png

五、创建组件的第三种方式:

1.在vscode下载 Angular Files

7.png

2.在components下面右键,则出现下图

8.png

3.点击Generater component输入组件名回车

9.png

4.组件生成

10.png

更多编程相关知识,请访问:编程入门!!

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除