angular怎么构建组件？本篇文章给大家介绍一下angular创建项目的方法，angular创建组件的三种方式。
一、angular 与angularjs的区别是什么？
命名变化，Angular2 以后官方命名为Angular, 2.0 以前的版本称为AngualrJS。【相关教程推荐：《angular教程》】
1.x 的使用方式是引入AngularJS 的js 文件到网页，2.0 之后就完全不同了，两者的区别类似Java 和JavaScript。
二、创建一个项目
1.安装全局的 Angular CLI 命令行工具
npm install -g @angular/cli
登录后复制
2.创建项目
ng new angular-tour-of-heroes
登录后复制
注意：node 版本需要在12以上，否则会提示：“’ng’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。”
3.跑项目
cd angular-tour-of-heroesng serve --open
登录后复制
三、创建组件的第一种方式：
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 = "第一个模板";}
登录后复制
2.app.component.html中或app.component.ts中新增组件标签
// 引入ng核心包和组件import { Component } from '@angular/core';@Component({ selector: 'app-root',//当前组件的引用名称 template: ` //x新增组件标签 ` , // templateUrl: './app.component.html',//组件模板 styles: ['h1 { color:red}'] // styleUrls: ['./app.component.scss']//组件的样式文件})export class AppComponent {//组件名称}
登录后复制
3.app.module.ts中引入组件，声明组件
四、创建组件的第二种方式：
使用cli创建组件
输入命令：
ng generate component hello-world
登录后复制
五、创建组件的第三种方式：
1.在vscode下载 Angular Files
2.在components下面右键，则出现下图
3.点击Generater component输入组件名回车
4.组件生成
更多编程相关知识，请访问：编程入门！！
以上就是Angular怎么构建组件？3种方法介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2708896.html
