位置: IT常识 - 正文

Angular快速入门(angular 初学者快速上手教程)

编辑:rootadmin
Angular快速入门 Angular1.框架背景2.Angular CLI2.1 安装2.2 主要特性2.3 创建module,component,service,class3.架构3.1 模块3.2 组件3.2.1 创建组件3.2.2 组件生命周期3.2.3 组件交互3.3 模板3.3.1 插值语法3.3.2 属性绑定3.3.3 条件判断3.3.4 循环语句3.3.5 事件绑定3.3.6 双向绑定3.3.7 模板引用变量3.8 表单控件3.3.9 表单控件分组3.3.10 表单验证3.3.11 自定义表单验证3.3.12 管道3.4 服务3.5 依赖注入3.6 路由3.6.1 路由基本使用3.6.2 路由嵌套3.6.3 路由传参1.框架背景

推荐整理分享Angular快速入门(angular 初学者快速上手教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angular视频教程,angular 初学者快速上手教程,angular 初学者快速上手教程,angular1教程,angular1教程,angular 初学者快速上手教程,angular入门教程,angular 初学者快速上手教程,内容如对您有帮助,希望把文章链接给更多的朋友!

Angular 是一个由 Google维护的开源JavaScript框架,用于在HTML和JavaScript中构建Web应用程序,是三大框架之首。

不管是1还是2,Angular最显著的特征就是其整合性。涵盖了M、V、C/VM等各个层面,不需要组合、评估其它技术就能完成大部分前端开发任务。这样可以有效降低决策成本,提高决策速度,对需要快速起步的团队是非常有帮助的。

由于它是从一个用来做原型的框架演化而来的,加上诞生时间很早(2009年,作为对比,jQuery诞生于2006年),当时生态不完善,连模块化机制都得自己实现。

但Angular 2就不同了,发布于2016年9月份,它是基于ES6来开发的,它的起点更高,整合了现代前端的各种先进理念,在框架、文档、工具等各个层面提供了全方位的支持

在Angular 中最具特色的就是依赖注入系统了,它把后端开发中用来解决复杂问题、实现高弹性设计的技术引入了前端

2.Angular CLI2.1 安装

​ Angular CLI用于简单,快速构建Angular2项目,只要掌握几行命令就能扣减前端架构。依赖于NodeJs和npm。

//安装脚手架npm install -g angular-cli//创建项目ng new project_name(项目名称)//启动项目cd project_nameng serve --open 2.2 主要特性Angular CLI 可以快速搭建框架,创建module,service,class,directive等;具有webpack的功能,代码分割,按需加载;代码打包压缩;模块测试;热部署,有改动立即重新编译,不用刷新浏览器;而且速度很快有开发环境,测试环境,生产环境的配置,不用自己操心;sass,less的预编译Angular CLI都会自动识别后缀来编译;typescript的配置,Angular CLI在创建应用时都可以自己配置;在创建好的工程也可以做一些个性化的配置,webpack的具体配置还不支持,未来可能会增加;Angular CLI创建的工程结构是最佳实践,生产可用;2.3 创建module,component,service,class

3.架构3.1 模块

模块组件的特征在于可以用于执行单个任务的代码块。 您可以从代码(类)中导出值。 Angular应用程序被称为模块,并使用许多模块构建您的应用程序。 Angular 的基本构建块是可以从模块导出的组件类。

export class AppComponent { title = 'dsc';}3.2 组件

组件是拥有模板的控制器类,主要处理页面上的应用程序和逻辑的视图。 组件可以拥有独立的样式。 注册组件,使用 @Component 注释,可以将应用程序拆分为更小的部分。

3.2.1 创建组件

使用ng命令ng generate component <component-name>创建的组件会自动生成在app.module中的引用,推荐使用ng命令生成组件

//快速创建ng g c xxx@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss']})

@Component最常用的几个选项:

selector:这个 CSS 选择器用于在模板中标记出该指令,并触发该指令的实例化。

template:组件的内联模板

templateUrl:组件模板文件的 URL

styleUrls:组件样式文件

styles:组件内联样式

3.2.2 组件生命周期

​ Angular 会按以下顺序执行钩子方法。你可以用它来执行以下类型的操作。

钩子方法用途时机ngOnChanges()当 Angular 设置或重新设置数据绑定的输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象注意,这发生的非常频繁,所以你在这里执行的任何操作都会显著影响性能。在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。注意,如果你的组件没有输入,或者你使用它时没有提供任何输入,那么框架就不会调用 ngOnChanges()。ngOnInit()在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用,只调用一次。ngDoCheck()检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。ngAfterContentInit()当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。第一次 ngDoCheck() 之后调用,只调用一次。ngAfterContentChecked()每当 Angular 检查完被投影到组件或指令中的内容之后调用ngAfterContentInit() 和每次 ngDoCheck() 之后调用ngAfterViewInit()当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用第一次 ngAfterContentChecked() 之后调用,只调用一次。ngAfterViewChecked()每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。ngOnDestroy()每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏在 Angular 销毁指令或组件之前立即调用。3.2.3 组件交互Angular快速入门(angular 初学者快速上手教程)

​ @Input

父组件通过`@Input`给子组件绑定属性设置输入类数据//父组件<app-hello [name]="'tina'"></app-hello>//子组件import { Component, Input } from '@angular/core';@Input()name!: string;ngOnInit(): void {console.log(this.name)}

​ @Output

​ 父组件给子组件传递一个事件,子组件通过@Output弹射触发事件

//父组件 <app-hello (addList)="addListFun($event)" [name]="'tina'"></app-hello>list:number[] = [1,2,3,4] addListFun(num:number){ this.list.push(num) }//子组件import { Component, Output,EventEmitter } from '@angular/core';@Output() addList = new EventEmitter() pushList(v:string){ console.log(this.inpValue) this.addList.emit(v) }

​ @ViewChild()

通过`ViewChild`获取子组件实例,获取子组件数据<app-hello #myChild [name]="'tina'"></app-hello><button (click)="getView($event)">获取</button>@ViewChild('myChild') child: any;constructor() { }ngOnInit(): void {}getView(e:any){console.log(this.child)this.child.setInpValue('我是一段数据')}3.3 模板

在 Angular 中,模板就是一块 HTML。在模板中,你可以通过一种特殊语法来使用 Angular 的许多功能

3.3.1 插值语法

​ 所谓 “插值” 是指将表达式嵌入到标记文本中。 默认情况下,插值会用双花括号 {{ 和 }} 作为分隔符

<h3>hello {{ name }}</h3>

​ 花括号之间的文本通常是组件属性的名字。Angular 会把这个名字替换为响应组件属性的字符串值

​ 括号间的素材是一个模板表达式我们可以在{{}}内编写js运算

<h3>hello {{ 1+1 }}</h3>3.3.2 属性绑定

Attribute绑定

<h3 [id]="'h3-dom'">hello {{ 1+1 }}</h3>

类绑定

//单一类绑定<h3 [class.h3-dom]="true">hello {{ 1+1 }}</h3>//多重类绑定<h3 [class]="'h3-dom title-dom min-title'">hello {{ 1+1 }}</h3><h3 [class]="{'h3-dom':true,'title-dom':false}">hello {{ 1+1 }}</h3><h3 [class]="['h3-dom','title-dom']">hello {{ 1+1 }}</h3>//ngClassexport class AppComponent { isActive = true;}<h3 [ngClass]="{'active': isActive}">hello {{ 1+1 }}</h3>

样式绑定

//单一样式绑定<h3 [style.width]="'300px'">hello {{ 1+1 }}</h3>//带单位的单一样式绑定<h3 [style.width.px]="'300'">hello {{ 1+1 }}</h3>//多重样式绑定<h3 [style]="'background:red;color:#fff'">hello {{ 1+1 }}</h3><h3 [style]="{'background':'red','color':'#fff'}">hello {{ 1+1 }}</h3>//ngStyleexport class AppComponent { isMax = false;}<h3 [ngStyle]="{'color': 'red'}">hello {{ 1+1 }}</h3><h3 [ngStyle]="{'font-size': isMax ? '24px' : '12px'}">hello {{ 1+1 }}</h3>3.3.3 条件判断

​ *ngIf是直接影响元素是否被渲染,而非控制元素的显示和隐藏

export class AppComponent { isMax = false; isMin = false;}<div *ngIf="isMax">Max title</div><div *ngIf="isMin">Min title</div>//解析完<ng-template [ngIf]="isMax"> <div>Max title</div></ng-template><ng-container *ngIf="isMax; else elseTemplate"> isMax为true</ng-container><ng-template #elseTemplate> isMax为false</ng-template>3.3.4 循环语句

​ 解析器会把 let color、let i 和 let odd 翻译成命名变量 color、i 和 odd

微语法解析器接收of,会将它的首字母大写(Of),然后加上属性的指令名(ngFor)前缀,它最终生成的名字是 ngFor 的输入属性(colors)

NgFor 指令在列表上循环,每个循环中都会设置和重置它自己的上下文对象上的属性。 这些属性包括 index 和 odd 以及一个特殊的属性名 $implicit(隐式变量)

Angular 将 let-color 设置为此上下文中 $implicit 属性的值, 它是由 NgFor 用当前迭代中的 colors 初始化的

export class AppComponent { colors:Array<string> = [ 'red', 'blue', 'yellow', 'green' ];}<div *ngFor="let color of colors let i=index let odd=odd"> {{odd}} {{i}} {{color}}</div>//解析完<ng-template ngFor let-color [ngForOf]="colors" let-i="index" let-odd="odd"> <div>{{odd}} {{i}} {{color}}</div></ng-template>export class AppComponent { status = 1;} <ul [ngSwitch]="status"> <li *ngSwitchCase="1">已支付</li> <li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li> <li *ngSwitchDefault>无效</li> </ul>3.3.5 事件绑定

​ Angular 的事件绑定语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成。目标事件名是 click ,模板语句是 onSave()

事件对象通过$event传递

export class AppComponent { onSave(){ console.log('点击了按钮') }}<button 2(click)="onSave($event)">Save</button>3.3.6 双向绑定

双向绑定是应用中的组件共享数据的一种方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值

ngModel指令只对表单元素有效,所以在使用之前需要导入FormsModule板块

import { FormsModule } from '@angular/forms';@NgModule({ // 申明组件内用到的视图 declarations: [ AppComponent, HelloComponent, ], //引入模块需要的类 imports: [ BrowserModule, AppRoutingModule, FormsModule ], //全局服务 providers: [], //根组件 bootstrap: [AppComponent]})export class AppComponent { userName='';}<div> 输入: <input [(ngModel)]="userName"><h1>你输入了: {{userName}}</h1></div>3.3.7 模板引用变量

模板变量可以帮助你在模板的另一部分使用这个部分的数据。使用模板变量,你可以执行某些任务,比如响应用户输入或微调应用的表单

在模板中,要使用井号 # 来

本文链接地址:https://www.jiuchutong.com/zhishi/298651.html 转载请保留说明!

上一篇:【目标检测】YOLOV1详解(目标检测yolov5)

下一篇:Webmin--一个用于Linux基于Web的系统管理工具(一个用于表示特定的web页的标识符url称为)

  • 企业所得税季度预缴
  • 企业所得税退抵税费申请(汇算清缴)怎么撤销
  • 企业所得税季度申报填写示例
  • 应收账款转为其他应收款
  • 个税里任职受雇从业类型
  • 企业内部控制调查问卷
  • 如何降低应用耗电
  • 印花税购销合同计税金额怎么算
  • 无法收回的应收款计入什么科目
  • 加工费发票可以不开数量吗
  • 进项票超过180天还可以认证吗
  • 材料采购定期结算表
  • 差额征税扣除额大于收入时如何开票?
  • 购买垃圾袋的会计分录
  • 对公账户钱怎么退回去
  • 机顶盒包括
  • 通用申报表个人所得税应税项怎么填
  • 建筑劳务公司人员结构
  • 所得税季报季末从业人数怎么填
  • 股东利润分配预缴税款
  • 加工费计入应付账款可以吗
  • 抵扣发票可以在哪里抵扣
  • 实收资本和注册资本的账务处理
  • 怎么免费获取百度文库的付费文档
  • 安装费如何做账
  • 发出商品借方余额120000元
  • linux 部署
  • smss.exe是干嘛的
  • 本年利润贷方为正数
  • 传递优化的作用
  • win10新装系统我的电脑在哪
  • php连接mysql查询数据
  • win10 打开远程连接
  • php对接微信支付教程
  • php nl2br
  • 报错专业了可不可以改
  • php随机ua
  • 企业所得税按季还是按年
  • 脱不下孔乙己的长衫对应下一句
  • 材料款零头抹掉怎么做凭证
  • 前端上传文件夹怎么操作
  • 通信原理简明
  • AIGC之GPT-4:GPT-4的简介(核心原理/意义/亮点/技术点/缺点/使用建议)、使用方法、案例应用(计算能力/代码能力/看图能力等)之详细攻略
  • vim8.2插件
  • Huggingface之transformers零基础使用指南
  • 销售服饰
  • 支付银行贷款利息现金流量表填哪里
  • python卡方分布随机数
  • 海关缴款书能重开吗
  • 销售价格含税的会计分录
  • 房屋出租收到的发票
  • 开具利息收入发票需不需要有经营范围
  • 母公司与子公司的区别
  • 银行卡频繁小额转账
  • 用现金支付的款项
  • 小规模发票跨月冲红怎么纳税申报
  • 长期待摊销费用属于
  • 残保金中上年在职职工工资总额
  • 辞退福利什么时候确认
  • 结转后还可以改凭证吗
  • 以前年度损益调整怎么做账
  • 以旧换新会计科目
  • 高新技术企业进项税加计扣除10%如何填企业所得税季报
  • 公司的软件服务器设置什么意思啊
  • 本期缴纳上期应纳税额怎么算
  • 什么叫另类
  • ubuntu20.04配置
  • 解决win10蓝屏
  • zui哪个版本最好
  • unity serial number
  • html+css代码
  • 设计模式工厂模式使用场景
  • bat调用vbs脚本
  • android synchronized
  • jquery中加载文档的方法
  • 山东省国家地税局官网
  • 车辆购置税如何入账
  • 财政云操作视频
  • 集体诉讼的后果
  • 企业税收有哪些税种
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设