Angular Note

最新推荐文章于 2024-08-24 17:09:16 发布

XIZHOUXIANG

最新推荐文章于 2024-08-24 17:09:16 发布

阅读量200

点赞数

分类专栏：前端文章标签： angularjs java html5 css

本文链接：https://blog.csdn.net/xizhouxiang/article/details/119821893

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

生命周期函数

在这里插入图片描述

Angular Docs

在这里插入图片描述

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安全卫士拦截导致，关闭退出后解决。

XIZHOUXIANG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Angular Note

Angular NoteProject StructureCreate ComponentProject Structurenode_moudules: third-party modulessrcapp: component, moduleassets: staticstyle.scss global css styleenvironments: 各个目标环境准备的文件main.ts 应用入口polyfills.ts: 填充库tsconfig.spec.json TypeScript
复制链接

扫一扫

专栏目录