1.angular介绍
- 谷歌开发的开源的web框架，诞生于2009年
- angular基于Typescript
- 它和react，vue相比，angular更适合中大型企业项目
- 截止2019/12/25 angular最新版本为angular9.X。根据官方介绍，angular每过几个月就会更新一个版本，angular2.X以后的所有的angular版本用法都是一样的。
2.学习angular必备基础
- html css js(es6)
- 有ts基础更好，没有ts基础那就要学了
3.angular环境搭建
必备nodejs(npm)
安装脚手架
npm install -g @angular/cli
//全局安装，随便哪里打开终端即可
创建工作空间
ng new my-app
突然报错
ng : 无法加载文件 C:\Users\SWQ\AppData\Roaming\npm\ng.ps1，因为在此系统上禁止 运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
解决方法（管理员身份打开powerShell）
自行百度
运行项目
cd my-app
ng serve --open
安装的时候会提示1.是否安装路由，2.安装什么样式预处理，3.是否数据共享(后期很熟练了我在补充这个地方)
4.文件目录结构
xxx
5.创建组件
1.创建命令行形式创建
ng g component components/new
//简写 ng g c components/new
//components/new 这个是我们想创建的文件路径以及文件名
// 命令行形式的创建组件，组件会自动的在aap.module.ts被引入和注册
2.使用
根据组件文件夹中 组件名.components.ts =》@Component=》selector 的名称，和vue
类似，直接标签形式使用即可
3.组件中定义数据
组件的ts文件中
export class FooterComponent implements OnInit {
//这就是我自己定义的数据title
//不写也可以 默认就是pubilc
public title="我是一个footer组件的数据";
//ts中定义数据，建议定义类型，怎么玩？ any(任意类型)
username:string='潇洒哥';
public student:any=['qwe'];
public arr2:Array<number>=[1,2,3,4,5]; //定义一个数组，并限制数组每一项的类型
constructor() { }
ngOnInit(): void {
}
}
组件的html文件中
{{title}} {{username}}
//直接用即可
声明属性的几种方式：
-
public 共有 可以在这个类中使用，也可以在这个类外面使用
-
protexted 保护类型 只能在这个类中，或者它的子类中使用
-
private 私有 只能这个类中使用
-
千万别习惯性的用var 去定义
6.Angular常用的指令
- 组件绑定数据（和vue中v-bind类似）
<div [title]="say">
鼠标放上去会有什么效果呢
</div>
<!-- 用[] say是我组件中的数据 -->
-
如果数据是一个html字符串怎么处理（和vue-html类似） 默认不处理原样输出
com:string='<h1>这是我自己html字符串</h1>'; <div > <span [innerHTML]='com'></span> </div>
-
{{中间允许简单的计算}}
1+2={{1+2}}
-
循环数据 *ngFor
<ul> <li *ngFor="let item of list;let key=index;"> {{item.title}} 索引为{{key}} </li> </ul>
-
引入图片
<!-- 引入本地图片 --> <img src="assets/images/jiaoben.png" alt="1"> <!-- 引入网络上的图片 --> <img [src]="pirUrl" alt="2">
-
*ngif
<!-- *ngif --> <h1>条件判断语句 *ngif</h1> <div *ngIf="flag"> <img src="assets/images/sc.png" alt=""> </div> <div *ngIf="!flag"> <img src="assets/images/sc_a.png" alt=""> </div>
-
ngSwitch
<!-- ngSwitch --> <div [ngSwitch]="orderStatus"> <div *ngSwitchCase="1">已经支付</div> <div *ngSwitchCase="2">已经发货</div> <div *ngSwitchCase="3">已经收货</div> <div *ngSwitchCase="4">已经退货</div> <div *ngSwitchDefault>无效</div> </div>
-
ngClass
.red{ color: red; } .big{ font-size: 48px; }<div [ngClass]="{'red': flag,'big':!flag}"> ngClass指令 </div>
-
ngStyle
<!-- ngStyle --> <div [ngStyle]="{'color': 'blue'}"> ngStyle的使用 </div>
-
管道 （感觉和Vue过滤器有点相似）
别人博客总结的：angular管道 https://blog.csdn.net/liusuxilinyue/article/details/86680223
<!-- 过滤器（管道） 下面的代码可以让时间变成我们想要的格式--> <div> {{today | date:'yyyy-MM-dd HH:mm ss'}} </div>
-
绑定事件
<!-- 绑定事件 事件后面的括号我省略了没反应 那就写吧--> <h3 (click)='toSay()'>点我触发事件</h3> <h3 (click)='toSay2()'>点我改变上面星星的颜色</h3>// 就在ngOnInit后面写自己的方法即可，不需要加，因为我们是ts toSay(){ alert('事件绑定成功') } toSay2(){ this.flag=!this.flag }
-
表单事件 事件对象
<!-- 表单事件 事件对象 --> <!-- <input type="text" (keydown)='down()'> --> <input type="text" (keydown)='down($event)'>
down(e) {
// 按了回车接受输入框中的值
console.log(e.target)
if (e.keyCode == 13) {
console.log(e.target.value)
}
}
-
双向数据绑定
//app.module.ts 引入 import {FormsModule} from '@angular/forms' //在 @NgModule 中的 imports 注册 FormsModule<h1>双向数据绑定 只针对表单</h1> <!-- 双向数据绑定 MVVM视图改变数据改变，数据改变视图改变 只针对表单--> <input type="text" [(ngModel)]="keywords"> {{keywords}} <button (click)='changeKeywords()'>改变左边的的值</button>public keywords:string='默认值' changeKeywords(){ this.keywords='变化后的值' }
7.Angular中的服务
- 组件的方法 不能互相调用
- 有公共的方法，可以放在service（服务）中
创建服务
// 1.创建服务 ng g service services/storage// 2.app.module.ts 引入并配置服务 import {StorageService} from './services/storage.service' //在 @NgModule 中的 providers 注册 StorageService// 3.组件的.ts文件中 引入 import {StorageService} from '../../services/storage.service'//4. 组件的.ts文件中 使用 constructor(public storage: StorageService) { console.log(storage.swq()) }
8.Angular 中的DOM操作
-
方法一 通过DOM操作
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.less'] }) export class HomeComponent implements OnInit { public flag: any = true constructor() { } ngOnInit(): void { // ngOnInit 组件和指令初始化完成时的钩子函数 // angular 动画效果 实现 // 方法一 通过DOM操作 let dv = document.getElementById('dv') dv.style.color = 'red' console.log(dv.innerHTML) //获取不到DOM节点 因为我们是ng去控制的 /* let dv2:any =document.getElementById('dv2') dv2.style.color='red' console.log(dv2.innerHTML) */ } // 视图加载完成以后 dom加载完成（建议吧都DOM操作放在这里） ngAfterViewInit(): void { let dv2:any =document.getElementById('dv2') dv2.style.color='red' console.log(dv2.innerHTML) } }
- 方法二 通过ViewChild操作
import { Component, OnInit,ViewChild,ElementRef } from '@angular/core';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.less']
})
export class NewsComponent implements OnInit {
//获取DOM节点
@ViewChild('MyBox') ElementRef:any
constructor() { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
console.log(this.ElementRef.nativeElement.innerHTML)
this.ElementRef.nativeElement.style.width='100px'
this.ElementRef.nativeElement.style.color="yellow"
}
}
@ViewChild总结
-
总结 利用 @ViewChild 获取DOM节点
-
html中给DOM起个名字
<div #MyBox> 我是new </div> -
在业务逻辑中引入
import { Component, OnInit,ViewChild,ElementRef } from '@angular/core'; -
在类里面写
@ViewChild('MyBox') ElementRef:any -
使用
this.ElementRef
-
-
总结利用@ViewChild 获取子组件并调用子组件的方法
-
引入组件
<app-header #hs></app-header> -
引入ViewChild
import { Component, OnInit,ViewChild,ElementRef } from '@angular/core'; -
获取到子组件
//获取子组件 @ViewChild('hs') hs:any -
使用this 调用对应的组件实例
this.hs.say_yan()
-
9.Angular父子组件的通信
-
父传子
-
父组件的html中使用子组件，直接绑定属性
<app-header [smsg]="msg"></app-header> -
子组件引入input模块
import { Component, OnInit, Input } from '@angular/core'; -
子组件类中接受变量
// 接受父组件传来的数据 @Input() smsg: string; -
子组件使用父组件的数据
<div> 我是子组件 <p>{{smsg}}</p> </div>
总结：父传子，上述方法，可以 (1)传递变量，(2) 传递数据，也可以 (3) 直接传递this，将父组件传递给子组件.
-
-
子传父
- 利用上面写的
@ViewChild，可以实现 父组件获取子组件数据
- 利用上面写的
-
非父子组件
-
Service
-
localStorage
-
网友评论