Angular6入门学习
Anagular学习
创建Anagular快捷方式
全局脚手架 npm i -g @angular/cli
创建项目 ng new myapp
创建组件 ng generate component 组件名
ng g component 组件名
1.模块
NgModule,抽象的概念，用于封装组件，指令，管道等对像，与项目中的功能模块的概念对应。
自定义模块
Ng g module user
Ng g component user/login
提示自定义磨块中创建的组件如果希望被其他模块使用，必须做到：
1.当前模块中声明 decalarations
2.当前模块中导出 exports
3.使用模块导入 import
Appmodul
Providers 服务
Boostrap 引导模块
loginmodul
usermodul
….
2.组件
2.1组件时什么
是一块可以复用的页面区域·，包含独立的模板，样式，数据
2.2组件创建
1.声明
@component({
selector:’ ’,
templateUrl:’ ’
styleUrls:[‘ ’]
})
2.注册
App.module.ts
NgModule
declarations
3.使用
引入
ng g component 组件名
generate
3.Angular数据绑定
1.Model到view：插值表达式{{}}
2Model到view：属性绑定[ ]
3.View 到事件绑定：（）
4.双向绑定 ngModel[{ ngModel}]
4.Angular预定义指令
1.组件： ng中组件继承指令，是一种特殊的指令。
Component extends directive
2.结构型指令：会影响模板最终的Dom树结构的指令。必须以* 开头
ngFor ngIf ngSwitchCase ngSwitchDefault
3.属性型指令：会影响当前Dom元素的属性的指令 必须用·[ ]括起来
ngClass ngStyle ngSwitch ngModel
ngFor
{{i}}:{{n}}
var n=Math.floor((Math.random()*100));
this.arrys.splice(index,1)
this.arrys.push(String(n));
ngIf
<button (click)=“ispay=!ispay”>
<ng-template #myname>
剑圣柳白
ispay=true;
**属性指令：**ngSwitch
结构型指令：*ngSwitchCase *ngSwitchDefault
订单状况
<p *ngSwitchCase=“10”>等待付款
<span *ngSwitchCase=“20”>付款完成
<div *ngSwitchCase=“30”>备货中
<i *ngSwitchCase=“40”>运输中
<b *ngSwitchCase=“50”>派单中
<div *ngSwitchDefault>不可识别的状态
ngClass ngStyle
这是样式
>
ngModule使用
1. 引入模块
主模板 引入 froms
ngModule({
imports [ FormsModule
]
})
2.使用
对应模块的导入
请输入关键字 <input [(ngModel)]=“seach”> 当前输入{{seach}}
如何使用js,监视模型数据的改变
Vue.js { data:{Kw:””},watch{ ke(){} }}
Angular.ts
get
set
4.自定义指令
1.创建指令
@Directive({
selector: ‘[focusutil]’
})
export class focusutilS {
constructor(el: ElementRef) {
//ElementRef封装了，dom元素
//nativeElement原生的dom对象
el.nativeElement.focus();
}
}
\2. 注册指令
\3. @NgModule({
\4. declarations: [//注册当前模块内部组件。指令管道
\5. AppComponent, login, study, XzHeaderComponent, XzFooterComponent, focusutilS],
3.使用指令
自定义指令
6. 过滤器filter 1.x/管道pipe 2.x
Vue自定义过滤器，没有预定义过滤器
Vue.file(“filename”,function(val){
If ()Sex
Return sex
})
6.1Angular预定义过滤器
Angular 自定义过滤器
\1. date时间
\2.
员工时间：{{emptime|date:‘yyyy年 MM月 dd日 HH时 mm分 ss秒’}}
\3.
\4. number指定整数位小数位的字符串 8.2-3
\5. decimal
\6. currency货币 固定，货币符号，固定22位小数 三位逗号
\7.
货币：{{productprice|currency:“￥”}}
默认美元
\8.
\9. lowecase
\10. uppercase
\11. titlecase
\12. slice输出数组中一部分，字符串
\13. json: JSON.stringify(emp)不行，不能调全局变量，和new 对象
\14. percen 要格式化为百分比的数字
A:
{{a | percent}}
B:
{{b | percent:‘4.3-5’}}
B:
{{b | percent:‘4.3-5’:‘fr’}}
`
6.2angular自定义指令
1.创建过滤器
Transfrom(){
}
2.注册过滤器
3.使用管道
7. 装饰器和元数据
\8.
7.服务和·依赖注入
Servce反复多次，深入理解 单例模式 第一次调用时创建，
Componect:负责维护Dom,并提供Dom操作需要的方法–前台接待服务员
Service 负责为组件提供底层支撑，如日志服务，计时服务，存储服务 –后厨
组件依赖服务，使用DI注入给组件即可
则样写符合很多的“软件设计原则”
\1. 创建服务对象
\2. @Injectable()
\3. export class woderService {
\4.
\5. wordAarry = [];
\6. add(worder) {
\7. this.wordAarry.push(worder);
\8. }
\9. show() {
\10. return this.wordAarry;
\11. }
\12. }
\13.
\14. 注册服务对象
\15. providers: [woderService
\16.
\17. ]
\18.
\19. 使用服务
\20. export class XzFooterComponent {
\21. woders = ‘’;
\22. ws: woderService = null;
\23. constructor(w: woderService) {
\24. this.ws = w;
\25. }
\26. saveworder() {
\27. this.ws.add(this.woders);
\28. this.woders = ‘’;
\29.
\30. }
\31. }
\32.
9. 路由
使用步骤
\1. 在组件中声明路由插槽/出口
\2. 在根模块中配置路由词典
Var routes=[
{path:’ index’,component: XXXcomponent }
{path:’ **’,component: PageNotFoundcomponent }
]
\3. 在根模块中使用路由词典
Imports【
RouerModule.forRoot(routes)//使用路由
】
\4. 客户端测试
\5. 注意
配置路由词典不能加 /
首页‘’
匹配所有的**
9.软件设计原则
为什么有service原则
Kiss keep it simple & stupid
代码越简单越傻瓜
Dry Don’t repert yourself
不要重复自己写过的代码，尽量服用代码
SRP single Responsibility principle
单一责任原则
OCP open close principle
开闭原则；外部扩展，开放。 对内部修改闭合态度
HCLC Hight cohesion ,low coupling
高内聚低偶合
LoD Law of Demeter
迪米特法则,最少知识原则，每个对象知道的数据/操作越少越好
10 Ts语法
Angular脚手架项目自带Ts编译器，会在服务器端把所有的Ts,代码编译为Es,提供客户端下载使用
TS比ES6增加的三项主要内容：
stasic
（1） 强制类型声明
Es是弱类型语言，ts是强类型语言-所有的属性，形参，函数都需要声明数据类型
String number boolean object,objext,ang , xx[]
数组 list:number[]=null;
List:any=null
Emp:object
（2） 访问修饰符
Private
public default 共有 可以被class
protected 当前类，子类可用
一种特殊的简写方法
Class myclass{
Pricvate age:number=null;
Constructor(age:number){
This.age=age
}
}
简写方法
Class myclass{
Constructor(private age:number){
}
}
（3） Interface接口
Inerface implement
1. 不能声明属性
2. 不能创建对象
3. 不能有方法体
4. 不那能被继承
主要作用：规范class内方法，避免出错，换言之，接口中方法，实现类，必须实现这样的接口。
Js中没有，接口概念。
11Angular中组件的生命周期钩子函数。
Implements OnInit
ngOnInit(){
}
11,补充组件通信
11.1Vue.js中的组件间通信
1. 父子间通信
1Props Down
Parent{
Template:’
child:child:child-name=”myname”/
….
Data(){retrun { myname:”tom”}}
}
Child:{
Props:[‘childName’]
}
2.Events up
Parent{
Template:’
<child @childevent=”doevent”/>
Methods:{doEvent(data){
Data就是子组件传递的数据
}}
Child:{
data(){
return{ userInput:’ ’}
this.$emit(‘childevent’,this.userInput);
}
注意：doevent不能带括号，要不然传不过来，数据。
向父组件发射一个事件。
2.$refs $parent
2. 兄弟间通信
3. Bus机制
11.2Angular组件通信
提示 Angular中兄弟组件间信一班使用service 对象。父子间通信，采用“Props Down, EventsUP”机制。
父子间通信Props Down
@component({
Template:子组件引入 <child [child-name]=”myname”/>
})
Parent{
myName=’苍茫大地’；
}
@component:”tmplate:’
{{childName}}
’”
class Child:{
@Input
childName=null
}
Events up
子组件内部数据，传给父组件
My-phonte.ts
@Output()
private onChangeMySinge = new EventEmitter();
doSinge(): any {
this.onChangeMySinge.emit(this.usersign);
}
Myspart .html
<my-photo [childName]=“myname” (onChangeMySinge)=“dochang($event)”>
Myspart.ts
dochang(inputSinge) {
this.usersign = inputSinge;
}
12异步访问
13Angular中SPA和Router
Angular6入门学习相关推荐
- python速成要多久2019-8-28_2019最全Python入门学习路线，不是我吹，绝对是最全
近几年Python的受欢迎程度可谓是扶摇直上,当然了学习的人也是愈来愈多.一些学习Python的小白在学习初期,总希望能够得到一份Python学习路线图,小编经过多方汇总为大家汇总了一份Python学 ...
- MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时 包含 ...
- 3dmax Vray建筑可视化入门学习教程
面向初学者的3Ds Max Vray最佳Archviz可视化课程 从安装到最终图像的一切都将从头开始教授,不需要任何经验 大小解压后:3.25G 时长4h 6m 1280X720 MP4 语言:英语+ ...
- Blender 3.0基础入门学习教程 Introduction to Blender 3.0
成为Blender通才,通过这个基于项目的循序渐进课程学习所有主题的基础知识. 你会学到什么 教程获取:Blender 3.0基础入门学习教程 Introduction to Blender 3.0- ...
- Maya游戏角色绑定入门学习教程 Game Character Rigging for Beginners in Maya
准备好开始为游戏制作自己的角色动画了吗? 你会学到什么 了解Maya的界面 优化并准备好你的模型,为游戏做准备 了解关节以及如何使用它们来构建健壮的角色骨骼,以便在任何游戏引擎中制作动画 了解IK和F ...
- 三维地形制作软件 World Machine 基础入门学习教程
<World Machine课程>涵盖了你需要的一切,让你有一个坚实的基础来构建自己的高质量的电影或视频游戏地形. 你会学到什么 为渲染或游戏开发创建高分辨率.高细节的地形. 基于Worl ...
- Blender3.0动画制作入门学习教程 Learn Animation with Blender (2021)
要求 下载并安装Blender.免费下载和免费用于任何目的. 描述 加入我的动画课程. 在本课程中,我将从头开始讲述在Blender中创建动画场景的过程. 从第一步到最终渲染.在这个课程中,我们将使用 ...
- UE5真实环境设计入门学习教程
大小解压后:4.69G 时长4h 30m 1280X720 MP4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 虚幻引擎5–面向初学者的真实环境设计 Unreal Engine 5 – Rea ...
- ZBrush全面入门学习教程 Schoolism – Introduction to ZBrush
ZBrush全面入门学习教程 Schoolism – Introduction to ZBrush ZBrush全面入门学习教程 Schoolism – Introduction to ZBrush ...
最新文章
- 定制开发软件所有权_职业所有权软件开发人员指南
- PL/SQL编程：用for循环算出5的阶乘
- 我使用过的Linux命令之trap - 在脚本中处理信号
- Linux下C程序插入执行shell脚本
- 科技感十足的403html动态源码
- c语言模拟试题快速排序,快速排序（东软喜欢考类似的算法填空题，又如堆排序的算法等）...
- 黑群晖 linux 修改参数,黑群晖 DS918+ 修改引导参数隐藏引导盘和数据盘
- 最佳的46+14款免费软件
- ViewPager Kotlin 教程入门
- 博士申请 | 美国弗吉尼亚理工大学周大为老师招收图神经网络方向全奖博士生...
- 金融知识入门之基金基础概念
- [Unity3d] [图文]【寻路】 Waypoint 与 NavMesh 比较（转）
- 数据分析的重要性分析
- 默认接入点apn显示
- js 设置视频的音量大小
- 第三回 无处不在的计算
- iOS冰与火之歌番外篇 - 在非越狱手机上进行App Hook（转载）
- 华硕灵焕3装鸿蒙系统,神操作：学生拿iPhone换3部手机后竟然
- 进入xshell显示路径
- 它山之石，可以攻玉（二）