Angular基本概念及用法总结
文章目录
- 前言
- 一、Angular是什么？
- 二、使用步骤
-
- 1.安装node.js
- 2.安装angular/cli(仅一次)
- 3.创建angular项目
- 三、核心概念及用法
-
- 1.angular核心概念之一：模块 （module）
- 2.angular核心概念之二：组件 （component）
-
- 自定义组件的步骤
- 创建组件的简化工具
- 3.angular核心概念之三：数据绑定和指令
-
- (1）HTML绑定：{{}}
- (2) 属性绑定：{{}} or []
- (3) 事件绑定：（）
- (4) 指令绑定：* 或 []
- (5) 双向数据绑定指令：[()]
- 4.angular核心概念之四：指令系统（预定义指令+自定义指令）
-
- (1）循环绑定：*ngFor
- (2） 选择绑定：*ngIf
- (3）样式绑定：[ngStyle]
- (4）样式绑定：[ngClass]
- (5）特殊的选择绑定（了解即可）
- (6）双向数据绑定指令：[(ngModel)]——重点
- 如何自定义指令?
- 小节
- 5.angular核心概念之五：过滤器
-
- 自定义管道的步骤：
- 6.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:''，
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：直接在属性上用{{}}。
- 形式2：使用[]做属性绑定 。
- 属性绑定可以绑定变量、常量。注意绑定常量字符串需要引号。
- 注意：属性绑定通常赋值为变量，如果赋值为常量（如字符串常量），必须用引号括起来。
(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样式名。
(4）样式绑定：[ngClass]
详见之前写的文章: 巧用angular指令系统——样式绑定（ngClass和 ngStyle的使用详解）
- ngClass绑定的值必须是一个对象！对象属性就是 class名，属性值为true\false,true的话该class就出现，否则该class不出现。
(5）特殊的选择绑定（了解即可）
(6）双向数据绑定指令：[(ngModel)]——重点
- 方向1：model=>view,模型变则视图变,用[]绑定
- 方向2：view=>model,视图（表单元素）变则模型变，用（）绑定
注意：
- 如果想直接监视模型数据改变，可以绑定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的使用与一些概念，扎实的掌握还需要日积月累的学习与实践的经验总结，让我们一起加油，小伙伴们有什么问题与质疑欢迎留言一起讨论哟！