angular 需要在node.js V10.9 以上版本使用

一、搭建angulaur 脚手架

1.下载并安装脚手架工具

npm i -g @angular/cli

2.运行脚手架工具，创建空白项目

ng new myngapp01

3.进入空白项目并运行开发服务器

cd myngapp01npm start 或者 执行 ng serve

4.进入客户端访问测试

http://localhost:4200

二、Angular 项目启动过程分析

1.angular.json ： NG 项目的配置

index:"./src/index.html" ==> <app-root></app-root>

main:"./src/main.ts" ==> 项目打包的入口文件

2.main.js > bootstrapModule(AppModule) ==> 引导项目启动

3.app.module.ts > bootstrap:[AppComponent]

4.app.component.ts > selector:"app-root"

> templateUrl:'app.app.componet.html'

5.app.component.html > HTML 片段

三、Angular 核心概念：组件

在终端，输入 npx ng g component 组件名，自动创建组件

在Angular 中，组件必须放在模块中，否则无法使用；

1）组件（component） = 模板（template）+ 脚本（Script） + 样式（style）

2）也可以将组件中的模板和样式全部拆分出来

模板：templateUrl:'路径'

样式：styleUrls:["路径”]

3）在终端，输入 npx ng g component 组件名，可以一次性创建出组件（包括模板+脚本+样式）

1.创建组件 class

==> 在app包中，创建.ts组件

// 创建组件
@Component({template: "<h2>这是我的第一个组件mycom</h2>",selector:'mycom'
})
export class MyComponent {}

2.在某个模块中注册组件class

==> app.module.ts > import { 组件名 } from '路径' 引入模块

> 在模块中声明注册模块

// 引入 MyComponent 组件
import { MyComponent } from './mycom';// 模块
@NgModule({// 声明注册组件declarations: [AppComponent,MyComponent],imports: [BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]
})

3.使用组件

在app.component.html 中使用组件，组件标签名为在组件中 selector 定义的名字

<h1>我的Angular项目</h1>
<hr>
<!-- 在Html中使用组件 -->
<mycom></mycom>

四、Angular核心概念之：数据绑定

（1）HTML绑定 ==> 可以使用表达式运算；和VUE一样；

（2）属性绑定 ==> 形式1：直接在属性上用{{}} <p title="{{ }}"></p>

形式2：使用中括号 <p [title]="{{ }}"></p>

注意：属性动态绑定的时候，需要做字符串拼接，如：<image src=" './asset/' + imgUrl ">

（3）事件绑定 ==> 在 html 文件中的标签上，使用（click）= "printFn()"

==> 在组件.ts文件中，export class 类中，写对象的函数；

注意：在Angular 中，事件必须加小括号；

五、Angular 指令系统

Angular 中得指令分为三类：

（1）结构性指令：会影响 DOM 结构得，使用 * 号开头，如 *ngIf *ngSwitchCase

（2）属性型指令：不会影响DOM 结构，知识影响元素得外观行为，使用中括号 [] ,如[ngClass] , [ngSwitch]

Angular 中的指令，使用 *ngFor || [ ngStyle ]这中方法来书写

（1）循环指令使用 for-of 的方式；

*ngFor= " let item of items; index as i "

（2）条件渲染使用 *ngIf=" 条件；else 代号 "

注意：else 对应得模板必须使用 <ng-template #代号></ng-template > 包裹

<!-- ngIf else 必须使用ng-template 模板来包裹else 的DOM-->
<div *ngIf=" age >= 18 ;else forChildren">此处是家长看到的内容。。。
</div>
<ng-template #forChildren><p>此处是孩子看的内容。。。</p>
</ng-template>

（3）样式绑定 [ngStyle]=" 变量|| 表达式 "

class得动态绑定==> [ngClass] = " obj "

==> obj 在 .ts 脚本文件中编辑，obj 对象得内容：key 为 .css 文件中得类选择器名，value为true 或者 false ;表示选中改样式，或者不选

// .html 模板文件
<div [ngClass]="myClassObj" (click)="changeClass()">class得动态绑定
</div>// .scss 样式文件
.bg {width: 200px;height: 200px;background-color: #efefef;
}
.bd{border: 1px solid red;border-radius: 5px;
}
.fs{font-size: 36px;font-weight: 700;
}// .ts 脚本文件
export class Mycom06NgStyleComponent implements OnInit {myClassObj = {bg: true,fs: true,bd: true}changeClass(){this.myClassObj.fs = !this.myClassObj.fs};
}

（4）[ngSwitch] = " 表达式 "

<div [ngSwitch]=" leave "><div *ngSwitchCase=" 'nomal' ">普通用户</div><div *ngSwitchCase=" 'vip' ">贵宾用户</div><div *ngSwitchCase=" 'godalVip' ">黑金用户</div><div *ngSwitchDefault>请登录</div>
</div>

（5）双向数据绑定 [(ngModel )]

方向1：Model => View ，模型改变视图，用[]绑定

方向2：View => Model ，视图改变模型，用（）绑定

所以 ngModel 使用 [ (ngModel) ]

注意：想要使用 ngModel 指令，必须在主模块 app.module.ts 文件中导入 FormsModule 模块哦

import { FormsModule} from "@angular/forms"
// 模块
@NgModule({// 声明注册组件declarations: [AppComponent,MyComponent],imports: [// 浏览器模块，只有用于web ，就要导入这个模块；包含了 common 模块BrowserModule,// FormsModule 模块导入FormsModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]
})

TIPS: 监听 model 改变事件（ngModelChange）= " modelChange（） "

这里得回调函数，比如可以用在搜索框中发送ajax请求；当用户输入时，发送请求，请求数据

<!-- ngModelChange 事件事件 监听 model 数据改变 -->
<input [(ngModel)]="usename" type="text" placeholder="请输入用户名" (ngModelChange)="usenameChange()">

六、Angular 核心概念：过滤器（管道 Pipe）

Filter:过滤器，本质是一个函数，用来处理数据，再以新得格式进行输出

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

1.自定义管道得步骤：

（1）创建管道 class 类，实现转换功能，在 xxx.pipe.ts 文件中创建管道

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

import { Pipe } from "@angular/core";
// 管道 Pipe 装饰器
@Pipe({name:'sex'
})
export class SexPipe {// 管道到执行过滤任务得是一个固定得函数// 相当于 filter 过滤器transform(val:number) {if (val == 1) {return '男'} else if (val == 0) {return '女'} else {return '未知'}}
}

（2）在模块中注册管道，app.module.ts 文件中注册管道

import { SexPipe } from './sex.pipe';
// 模块
@NgModule({// 声明注册组件declarations: [// 注册管道SexPipe],imports: [// 浏览器模块，只有用于web ，就要导入这个模块；包含了 common 模块BrowserModule,// FormsModule 模块导入FormsModule,AppRoutingModule],providers: [],bootstrap: [AppComponent]
})

（3）使用管道，在模板文件 .html 文件中使用管道

<!-- 表格 -->
<table><thead><tr><th>ID</th><th>姓名</th><th>工资</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr *ngFor="let item of employList"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.salay }}</td>   // 这里直接使用 管道得name:'sex' ，来自自动处理数据<td>{{ item.sex | sex }}</td><td>{{ item.age }}</td></tr></tbody>
</table>

2.Angular 中得预定义得管道

（1） lowercase ：转换为小写，{{ uname | lowercase }}

（2）uppercase ：转换为大写，{{ uname | uppercase }}

（3）titlecase ：转换为首字母大写，{{ uname | titlecase }}

（4）slice ：字符串截取，{{ ename | slice：start [ ：end ] }} start 为截取开始得下标，end为截取结束得下标

（5）json ：把JS对象转化为JSON 字符串，{{ obj | json }}

（6）number：对数字进行处理，转为指定得整数和小数位数，

{{ num | number }} {{ num | number :'4.2-2' }} 4表示整数位数至少是4位（不够4位自动补0），点2表示小数位最少为2位，-2表示，小数位最多有2位；

（7）currency ：把数字转换位货币格式字符串：{{ slary | currency:'￥' }}

（8）date ：日期转换管道，转换时间戳字符串指定格式得日期：{{ str | date:'yyyy-MM-dd HH:mm:ss' }}

七、Angular核心概念：服务和依赖注入

简化工具：ng g service 服务名

1.创建对象得两种方式

==> 方式1：手动创建式 let obj = new Car()

==> 方式2：依赖注入式不需要自己new，只需要声明依赖；服务提供者就会创建被依赖得对象，注入给声明依赖者

2.创建服务对象得步骤：

1）创建服务对象并指定服务提供者，在log.service.ts文件中创建服务对象，并导出

import { Injectable } from "@angular/core";
// 装饰器
// 所以得服务对象都是被注入得
@Injectable({// 指定当前服务对象在 "根模块"中提供 --AppModuleprovidedIn:'root'
})
export class LogService{doLog(action:string) {let uname = 'admin'let time = new Date().valueOf()// let action = '添加了新得商品：xxx'console.log(`管理员：${uname}时间：${time}动作：${action}`);}
}

2）在组件中声明依赖，服务提供者就会自动注入，组件直接使用服务对象即可；

在构造器得形参中设置log得类型=服务名，可以直接获取依赖服务对象得方法函数，并赋值给变量，给后续函数来调用；

import { LogService } from "../log.service";
@Component({templateUrl: './mycom03.component.html',selector: 'mycom03',styleUrls:['./mycom03.component.css']
})
export class MyCom03Component implements OnInit{// 构造器log:LogServiceconstructor(log: LogService) {console.log('log',log);this.log = log} addShop() {console.log('正在添加商品');let action = '添加了新得商品：xxx'this.log.doLog(action)}deleteShop() {console.log('正在删除商品');let action = '删除了商品：xxx'this.log.doLog(action)}
}

八、Angular 官方提供得请求服务对象：HttpClient Service

HttpClient Service 服务对象用于向指定得URL发起异步请求，使用步骤：

1）在主模块中导入HttpClient 服务所在得模块

在 app.module.ts中 import 导入HttpClientModule 模块；

Angular 基础相关推荐

第一章、第一节 Angular基础
第一章.第一节 Angular基础让我们先来看看Angular是如何实现组件模式的. 组件模式 Angular 应用程序使用组件模式.你可能听说过这个模式,它不仅用于软件开发,还用于制造.建筑和其他 ...
angular基础学习
angular基础学习核心一. angular环境搭建 1. 安装前准备: 1.1 安装nodejs 1.2 安装 cnpm, 尽量不要使用 1.3 使用npm/cnpm命令安装angular/c ...
Angular基础教程+Demo项目——尽可能全面一些——第二节
一.前言 Angular是一个类似于后端开发模式的前端开发框架,学习起来非常简单,当然需要一定的前端基础,本篇接着第一节继续介绍Angular基础学习过程中所写的Demo_GitHub--学习Ang ...
Angular 基础教程（7.0）
课程亮点按照初学者的学习路线规划内容所有代码均采用 Angular 7.0 版本覆盖日常开发中使用频率最高的特性 To B.To C 型界面,移动端 PWA 全面覆盖附赠 3 个附录,对比 5 ...
【Angular 基础入门】——知识点整合
文章目录快速入门一.Angular 环境搭建二.基本概念模块简介组件简介服务与依赖注入路由三.基础教程使用路由自定义组件常用结构型指令事件绑定模板引用模板表达式中的运算符 ...
Angular基础教程
https://www.runoob.com/angularjs/angularjs-tutorial.html 教程文档基本上学完这些,你就能正常的开发项目了,注意是正常开发而不是架构阅读本教程 ...
Angular基础(五) 内建指令和表单
2019独角兽企业重金招聘Python工程师标准>>> Angular提供了一些内建的指令,可以作为属性添加给HTML元素,以动态控制其行为. 一.内建指令 a) *ngIf,可 ...
Angular *NgFor - angular 基础教程
转载自 http://www.ngui.cc/news/show-115.html 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息. 使用 ngFor 指令更新 Mai ...
Angular基础知识学习记录
红色字体疑问:后端修改数据库数据时,网络异常,导致修改失败,抛出异常,前端该怎样处理呢?\textcolor{red}{疑问:后端修改数据库数据时,网络异常,导致修改失败,抛出异常,前端该怎样处理呢 ...

Angular 基础

一、搭建angulaur 脚手架

1.下载并安装脚手架工具

2.运行脚手架工具，创建空白项目

3.进入空白项目并运行开发服务器

4.进入客户端访问测试

二、Angular 项目启动过程分析

三、Angular 核心概念：组件

四、Angular核心概念之：数据绑定

五、Angular 指令系统

（1）循环指令使用 for-of 的方式；

（2）条件渲染使用 *ngIf=" 条件；else 代号 "

（3）样式绑定 [ngStyle]=" 变量|| 表达式 "

（4）[ngSwitch] = " 表达式 "

（5）双向数据绑定 [(ngModel )]

六、Angular 核心概念：过滤器（管道 Pipe）

1.自定义管道得步骤：

（1）创建管道 class 类，实现转换功能，在 xxx.pipe.ts 文件中创建管道

（2）在模块中注册管道，app.module.ts 文件中注册管道

（3）使用管道，在模板文件 .html 文件中使用管道

2.Angular 中得预定义得管道

七、Angular核心概念：服务和依赖注入

1.创建对象得两种方式

2.创建服务对象得步骤：

八、Angular 官方提供得请求服务对象：HttpClient Service

Angular 基础相关推荐

最新文章

热门文章

Angular 基础

一、搭建angulaur 脚手架

1.下载并安装脚手架工具

2.运行脚手架工具，创建空白项目

3.进入空白项目并运行开发服务器

4.进入客户端访问测试

二、Angular 项目启动过程分析

三、Angular 核心概念：组件

四、Angular核心概念之：数据绑定

五、Angular 指令系统

（1）循环指令 使用 for-of 的方式；

（2）条件渲染 使用 *ngIf=" 条件；else 代号 "

（3）样式绑定 [ngStyle]=" 变量|| 表达式 "

（4）[ngSwitch] = " 表达式 "

（5）双向数据绑定 [(ngModel )]

六、Angular 核心概念：过滤器（管道 Pipe）

1.自定义管道得步骤：

（1）创建管道 class 类，实现转换功能 ，在 xxx.pipe.ts 文件中创建管道

（2）在模块中注册管道，app.module.ts 文件中注册管道

（3）使用管道，在 模板文件 .html 文件中使用管道

2.Angular 中得预定义得管道

七、Angular核心概念：服务和依赖注入

1.创建对象得两种方式

2.创建服务对象得步骤：

八、Angular 官方提供得请求服务对象：HttpClient Service

Angular 基础相关推荐

最新文章

热门文章

（1）循环指令使用 for-of 的方式；

（2）条件渲染使用 *ngIf=" 条件；else 代号 "

（1）创建管道 class 类，实现转换功能，在 xxx.pipe.ts 文件中创建管道

（3）使用管道，在模板文件 .html 文件中使用管道