189 8069 5689

Angular怎么构建组件

本篇内容介绍了“Angular怎么构建组件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的班戈网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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

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

  • 命名变化,Angular2 以后官方命名为Angular, 2.0 以前的版本称为AngualrJS。

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

Angular怎么构建组件

二、创建一个项目

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

Angular怎么构建组件

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

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

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

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

{{text}}

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

Angular怎么构建组件

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

Angular怎么构建组件

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

    `  ,
  // templateUrl: './app.component.html',//组件模板
  styles: ['h2 { color:red}']
  // styleUrls: ['./app.component.scss']//组件的样式文件

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

}

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

Angular怎么构建组件

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

使用cli创建组件

输入命令:

ng generate component hello-world

Angular怎么构建组件

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

1.在vscode下载 Angular Files

Angular怎么构建组件

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

Angular怎么构建组件

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

Angular怎么构建组件

4.组件生成

Angular怎么构建组件

“Angular怎么构建组件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


分享标题:Angular怎么构建组件
网站地址:http://jkwzsj.com/article/phdsjo.html

其他资讯