Angular Note
Project Structure
node_moudules: third-party modules
src
- app: component, module
- assets: static
- style.scss global css style
- environments: 各个目标环境准备的文件
- main.ts 应用入口
- polyfills.ts: 填充库
- tsconfig.spec.json TypeScript编译器的配置文件
.angular-cli.json: Angular CLI的配置文件
package.json: npm配置文件
Create Component
- create:
ng g component components/testCpt
- import
默认会在app.modules.ts里面引入
import { NewsComponent } from './component/news/news.component'
并且在放在装饰器@NgModule里面
@ngModule({
declarations: [
AppComponent, NewsComponent
],
})
- 就可以开始使用了
在页面中引入
数据定义、绑定、处理
- angular 基于typescript, 定义字段的时候最好指定类型
username:string = 'xizhou';
- 绑定数据
<h1>{{username}}</h1>
- 访问修饰符号
- public 所有(default)
- protected 当前类+子类
- private 当前类
- 定义对象
public userInfo:object = {
userName:"xizhou",
age:"27"
}
//也可以通过constructor赋值
constructor(){
this.userName='xizhou'
}
- 获取对象数据
<h1>{{userinfo.userName}}</h1>
- 绑定属性
<div [title]="title test">
test
</div>
- 绑定html熟悉
public content="<h2>html tag test</h2>"
<span [innerHTML]='content'></span>
- 数组定义,处理
public arr=['11','22','33'];
public list:any[]=[''];
public items:Array<any>=[''];
//对象数组
public userlist:any[]=[{
},{},{}]
<ol>
<li *ngFor="let item of arr">
{{item}}
</li>
<ol>
<ol>
<li *ngFor="let item of items">
{{item.userName}} -- {{item.age}}
</li>
<ol>
<ol>
<li *ngFor="let item of items;let key = index">
{{key}} -- {{item.userName}} -- {{item.age}}
</li>
<ol>
条件判断
-
ngIf
-
switch
-
ngClass
Pipeline限制数据格式
事件触发
- 按钮触发
ex2:
- 表单触发
- 键盘事件
- 键盘事件
双向数据绑定、表单
Create Service 实现方法共享
ng g service my-service-demo
app.modules.ts
Login.components.ts
应用场景:
利用Viewchild获取元素
组件之间的通讯
- 父组件给子组件传值
- 参数,方法也可以,直接传方法名
- 传整个组件给子组件 [parent] = ‘this’
- 子组件传给父组件
引入子组件时候,定义一个ID
生命周期函数
RxJS
使用
取消异步方法的执行(案例:多次执行)Promise就不支持
Map, Filter
数据请求
//app.modules.ts
import { HttpClientModule } from '@angular/common/http'
imports: [
BrowserModule,
FormsModule,
HttpClientModule
],
//demo.ts
import { HttpClient } from '@angular/common/http';
constructor(public http:HttpClient) { }
getData(){
let api = 'http://a.itying.com/api/productlist';
this.http.get(api).subscribe((res:any)=>{
console.log(res);
this.list=res.result;
});
}
传递对象给接口
export interface ActionLog{
policyNo: string;
client: string;
module: string;
}
let actionLog: ActionLog;
actionLog = {
policyNo: this.searchForm.getRawValue().policyNo,
client: "xizhou",
module: "NBWB"
}
debugger;
this.searchService.searchActionLog(actionLog)
.subscribe((data:any) => {
console.log(data);
})
searchActionLog(data: ActionLog) {
return this.post('/nb/v1/saveSearchPolicyLog', data);
}
Router
//创建带路由的项目
1 -- ng new angRouteDemo
2 -- ? Would you like to add Angular routing? Yes
//配置路由
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { ProductComponent } from './components/product/product.component';
<body>
<div style="text-align: center;">
<h2>I'm root component</h2>
<router-outlet></router-outlet>
<br>
<br>
<h2>routeDemo02</h2>
<a [routerLink]="[ '/home' ]">home</a>
<a [routerLink]="[ '/news' ]">news</a>
</div>
</body>
//默认跳转,匹配任意路由
{
path: '**', component: HomeComponent
}
Bugs Encoutered
ng serve --open: An unhandled exception occurred: spawn EPERM
360安全卫士拦截导致,关闭退出后解决。