Angular基本概念及用法总结

最新推荐文章于 2024-04-29 17:01:02 发布

zgbro

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量4.6k

点赞数 2

文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44801414/article/details/125614448

版权

文章目录

前言
一、Angular是什么？
二、使用步骤
三、核心概念及用法
总结

前言

本文将用最简约的语言介绍angular的基本概念及相关快捷指令等，便于开发者快速入门学习以及日常工作中的使用。（ps：笔记内容源于b站学习资源观后整理及个人总结。）

一、Angular是什么？

Angular是Google开发的开源web前端框架。
作为三大框架之首，是现在网上使用量最大的框架。
基于typescript，和react，vue相比更适合中大型企业级项目。
必备基础 html,css,js,es6。

二、使用步骤

1.安装node.js

//查看node.js版本
node -v

//查看npm版本（自动安好）
npm -v

2.安装angular/cli(仅一次)

//二选一即可，建议安装cnpm代替npm。 
npm install -g@angular/cli
cnpm install -g@angular/cli

// 安好后可以查看angular版本
ng -v

3.创建angular项目

先在本地目录下创建一个新的文件夹，例如angular1文件夹。

cd angular1

给新建的angular项目起名，例如angulardemo01。

//二选一
ng new angulardemo01
ng n angulardemo01

之后的两步直接选N , SCSS即可。
系统自动安装依赖，也可以ctr+c结束自行安装：cnpm install。
安好后cd到对应目录下。

cd c://
cd angular1
cd angulardemo01

打开项目

//三选一
Ng serve --open 
ng s --o
npm start

三、核心概念及用法

1.angular核心概念之一：模块（module）

就是一个抽象的容器，用于对组件进行分组。
整个应用初始时有且只有一个主模块 AppModule。

2.angular核心概念之二：组件（component）

是一段可以反复使用的页面片段，如页头、轮播、手风琴。
组件（component）=模板（template）+脚本（script）+样式（style）。
在NG(angular)中，任何一个组件都必须声明在一个模块中。
组件可以当作属性使用（selector里加[]），或者是元素标签使用（selector里什么都不加）。

自定义组件的步骤

（1）创建组件class:

@component({
selector:'app-myc01',
templateUrl:'./myc01.component.html'， //或template:'<h2></h2>'，
styleUrls:['./myc01.component.css']
})

export class myc01Component{}

(2)在某个模块中注册组件class:

//app.module.ts
declarations:[AppComponent,myc01Component]

(3)使用已经注册过的组件:(任意一个dom里，除了自己)

//app.component.html
<myc01></myc01>

创建组件的简化工具

//任选其一
ng generate component 组件名
ng g component 组件名
ng g c 组件名

//上述不好用，可如下任选其一。npx可用于执行当前项目中node_modules/.bin目录下的可执行文件。
npx ng generate component 组件名
npx ng g component 组件名

3.angular核心概念之三：数据绑定和指令

(1）HTML绑定：{{}}

创建对象不可以（ng表达式中禁止出现new）
json序列化不可以（ng表达式中json是undefined）

(2) 属性绑定：{{}} or []

形式1：直接在属性上用{{}}。<p title="{{msg}}">
形式2：使用[]做属性绑定。<p [title]="msg">
属性绑定可以绑定变量、常量。注意绑定常量字符串需要引号。<p [title]="'消息是'+msg">
注意：属性绑定通常赋值为变量，如果赋值为常量（如字符串常量），必须用引号括起来。

(3) 事件绑定：（）

事件名用（）括起来，处理函数名后必须有（）。(click)="zengjia()"

(4) 指令绑定：* 或 []

详见下节

(5) 双向数据绑定指令：[()]

详见下节

4.angular核心概念之四：指令系统（预定义指令+自定义指令）

(1）循环绑定：*ngFor

 <any *ngFor="let 临时变量 of 数据">

 <any *ngFor="let 临时变量 of 数据; let i=index;">

 <any *ngFor="let 临时变量 of 数据; index as i">

(2）选择绑定：*ngIf

//如果布尔表达式为false，则当前元素从dom树上删除
<any *ngIf="布尔表达式">

 <any *ngIf="布尔表达式；else ELSE块的编号">…</any>

<ng-template #ELSE块的编号>
<any>…</any>
</ng-template>

(3）样式绑定：[ngStyle]

详见之前写的文章: 巧用angular指令系统——样式绑定（ngClass和 ngStyle的使用详解）

ngStyle绑定的值必须是一个对象！对象属性就是css样式名。<any [ngStyle]="obj">

(4）样式绑定：[ngClass]

详见之前写的文章: 巧用angular指令系统——样式绑定（ngClass和 ngStyle的使用详解）

ngClass绑定的值必须是一个对象！对象属性就是 class名，属性值为true\false,true的话该class就出现，否则该class不出现。<any [ngClass]="obj">

(5）特殊的选择绑定（了解即可）

(6）双向数据绑定指令：[(ngModel)]——重点

方向1：model=>view,模型变则视图变,用[]绑定
方向2：view=>model,视图（表单元素）变则模型变，用（）绑定
<input/select/textarea [(ngModel)]="uname">

注意：

如果想直接监视模型数据改变，可以绑定ngModelChange事件。
ngModel指令不在CommonModule模块中，而在FormsModule中，使用之前必须在主模块中导入该模块：

//app.module.ts:
@NgModule({
imports:[BrowserModule，FormsModule]
})

如何自定义指令?

自定义指令都是作为元素属性来使用的，selector应该是【指令名】

ng g directive 指令名

小节

angular预定义指令分三类：
（1）组件指令：NG中component继承自Directive。是一种特殊的指令。
（2）结构型指令：会影响dom树结构，必须使用星号开头，如*ngFor,*ngIf。
（3）属性型指令：不会影响dom树结构，只是影响元素外观或行为，必须用[ ]括起来，如[ngClass]，[ngStyle]。

5.angular核心概念之五：过滤器

filter：过滤器，用于在view中呈现数据时显示为另一种格式。
过滤器的本质是一个函数,接受原始数据转换为新的格式进行输出：function(oldVal){ 处理 return newVal }
使用过滤器：{{ e.salary | 过滤器名}}
angular 2.x，过滤器更名为“管道（pipe）”

自定义管道的步骤：

（1）创建管道class，实现转换功能。管道执行过滤任务的是一个固定的函数，transform(val){ }。

@Pipe({name:'sex'})
export class SexPipe{
transform(val){return…}
}

（2）在模块中注册管道

//app.module.ts
declarations:[SexPipe]

（3）在模板视图中使用管道

{{e.empSex|sex}}

<p [title]="empSex|sex">

说明：管道的transform方法除了val还可以接受其他参数，调用管道时用冒号为这些参数赋值，例如：{{e.empSex|sex:'en'}}

创建管道对象的简便工具：ng g pipe 管道名

预定义管道：

lowercase ：转换为小写 {{ename|lowercase}}
uppercase ：转换为大写 {{ename|uppercase}}
titlecase ：转换为首字母大写{{ename|titlecase}}
slice:只显示字符串的一部分。如下从索引0开始不包括索引3{{ename|slice:0:3}}
json：把js对象序列化为JSON字符串:{{obj | json}}
number:把数字转换为具有指定整数位和小数位的字符串{{ num | number}}
{{ e.salary | number:'4.1-4'}} //含义：整数至少四位，小数点后至少一位最多四位
currency:将数字转换为货币格式字符串：货币符号+三位一逗号+二位小数。
{{ e.salary | currency}}
{{ e.salary | currency:'$'}}
date：把数字转换为日期字符串
{{ num | date:'yyyy-MM-dd HH:mm:ss' }}

6.angular核心概念之六：服务和依赖注入——抽象&重点！

Service:服务，angular认为：组件是与用户交互的一种对象，其中的内容都应该与用户操作有关系的；而与用户操作无关的内容都应该剥离出去，放在“服务对象”中，为组件服务；例如：日志记录，计时统计，数据服务器的访问……

所有的服务对象都是“可被注入的”

创建服务对象的步骤：

1.创建服务对象

export class LogService{}

2.声明服务提供者

方式一：创建的服务对象是“单例的”——不论多少个组件使用该服务，只创建一个服务。常用，保证服务中没有属性，该方式是可行的，否则有覆盖问题。

//根模块级服务对象
  @injectable({providedin:'root'})

方式二：（等同方式一）

//app.module.ts
providers:[LogService]

方式三：每个组件对应的服务对象都是新建出来的。在当前组件中声明，仅用于当前组件的服务提供

@injectable()   
export class LogService{} 

---------------------------------

@Component({
...
providers:[LogServce]  //组件级服务对象
})

export class LoginComponent{}

3.在组件中声明依赖，服务提供者就会自动注入进来，组件直接使用服务对象即可.
服务对象都是在某个组件中使用。

export class xxComponent{
constructor(log:LogService){    
//此处的log变量就会被注入为LogService的实例
}
}

简化工具：ng g service 服务名

总结

以上就是今天要讲的内容，本文仅仅简单介绍了angular的使用与一些概念，扎实的掌握还需要日积月累的学习与实践的经验总结，让我们一起加油，小伙伴们有什么问题与质疑欢迎留言一起讨论哟！

zgbro

关注

2
点赞
踩
32

收藏

觉得还不错? 一键收藏
1
评论
Angular基本概念及用法总结

本文将用最简约的语言介绍angular的基本概念及相关快捷指令等，便于开发者快速入门学习以及日常工作中的使用。（ps笔记内容源于b站学习资源观后整理及个人总结。）selector'./myc01.component.html'，//或template}(3)使用已经注册过的组件(任意一个dom里，除了自己)...
复制链接

扫一扫