Angular怎么构建组件?3种方法介绍
2021-08-12 10:33:25
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-heroes ng 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: `<h1>{{text}}</h1>` }) export class HellowordComponent { constructor() {} text = "第一个模板"; }
2.app.component.html中或app.component.ts中新增组件标签
// 引入ng核心包和组件 import { Component } from '@angular/core'; @Component({ selector: 'app-root',//当前组件的引用名称 template: ` <hello-world></hello-world>//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种方法介绍的详细内容,更多请关注dnjidi.com其它相关文章!
相关阅读
- javascript如何获取用户输入的值
- JavaScript怎么设置页面标题
- jquery怎么修改元素css属性值
- node.js中什么是Buffer对象?使用场景是什么
- innerhtml和innertext间有什么区别?innerhtml和innertext的简单比较
- JS数组学习之清空全部元素的4种方法(代码详解)
- 分享6款实用的时钟特效(收藏)
- 手把手教你如何使用Vite+React进行组件开发(实践)
- 你知道前端是如何实现水印的吗
- js绘制两个相交的矩形并且其中有一个包含透明度
- js的趣味实现:给你一个戴眼镜的笑脸
- Node.js真的单线程吗?进程间如何通信?
- 了解angular10模块相关概念,快速入门!
- 手把手教你在Node.js项目中如何优化docker镜像
- 聊聊angular10中模板如何进行数据绑定?
- 通过JavaScript函数生成字符串的所有排列组合
- 为什么node.js要引入buffer?浅析缓冲区buffer
- Angular中什么是Ivy编译?如何开启Ivy编译?