搜索到
6
篇与
的结果
-
angular基础知识之路由 基本使用首先从@angular/router库中导入一些常量。修改我们的app.module.ts文件，增加以下内容import { RouterModule, Routes } from '@angular/router'; import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common';增加路由const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]修改imports增加以下内容RouterModule.forRoot(routes),修改providers增加以下内容{ provide: LocationStrategy, useClass: HashLocationStrategy }安装路由器platformBrowserDynamic().bootstrapModule(AppModule)完整代码app.module.ts修改后，完整代码如下，请忽略无效内容import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http'; import { RouterModule, Routes } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NZ_I18N } from 'ng-zorro-antd/i18n'; import { zh_CN } from 'ng-zorro-antd/i18n'; import { HashLocationStrategy, LocationStrategy, registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzFormModule } from 'ng-zorro-antd/form'; import { NzInputModule } from 'ng-zorro-antd/input'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzSelectModule } from 'ng-zorro-antd/select'; import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzCardModule } from 'ng-zorro-antd/card'; import { SimpleHttpComponent } from './simple-http/simple-http.component'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import { AboutComponent } from './about/about.component'; import { HomeComponent } from './home/home.component'; registerLocaleData(zh); const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ] @NgModule({ declarations: [ AppComponent, SimpleHttpComponent, AboutComponent, HomeComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule, RouterModule.forRoot(routes), HttpClientJsonpModule, BrowserAnimationsModule, NzDatePickerModule, NzButtonModule, NzFormModule, NzInputModule, NzIconModule, NzSelectModule, NzGridModule, NzCardModule, NzMenuModule ], providers: [ { provide: NZ_I18N, useValue: zh_CN }, { provide: LocationStrategy, useClass: HashLocationStrategy } ], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule)创建模块我们创建两个模块，分别是Home、About修改App模板文件，配置路由<ul nz-menu nzMode="horizontal"> <li nz-submenu nzTitle="Home" nzIcon="mail" [routerLink]="['home']"></li> <li nz-submenu nzTitle="About" nzIcon="mail" [routerLink]="['about']"></li> </ul> <br /> <router-outlet></router-outlet><router-outlet>用于展示路由内容，[routerLink]用于配置节点的路由配置完成后，我们可以访问一下首页传递参数我们可能需要路由中传递参数，那么我们继续改造。修改路由参数修改about的路由，我们传递一个name属性。修改后如下const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'about/:name', component: AboutComponent }, { path: 'about', component: AboutComponent } ]修改模块import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.css'] }) export class AboutComponent implements OnInit { route: ActivatedRoute; name: string = ""; constructor(route: ActivatedRoute) { this.route = route route.params.subscribe( param => { this.name = param['name'] console.log(param) } ) } ngOnInit(): void { } }修改about模板<p>about works!</p> <br> {{name}} -
angular HTTP请求 Angular有自己的HTTP库，我们可以用它来调用外部API。 在老的版本中HTTP模块位于@angular/http ，新的版本已经迁移到@angular/common/http。导入http模块在app.module.ts中，引入http模块import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';然后注入模块@NgModule({ declarations: [ AppComponent, SimpleHttpComponent ], imports: [ HttpClientModule, HttpClientJsonpModule ], providers: [{ provide: NZ_I18N, useValue: zh_CN }], bootstrap: [AppComponent] })新建一个测试模块执行以下命令创建模块ng g c SimpleHttp引入HttpClient在新建模块的ts文件中，引入HttpClient模块，并在构造函数中注入。import { HttpClient } from '@angular/common/http'; private httpClient: HttpClient; constructor(httpClient: HttpClient) { this.httpClient = httpClient }使用let url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1" this.httpClient.get(url).subscribe((response) => { console.log(response); }, (err) => { console.warn(err) })其他除了get方法，还有我们常用的post、put、delete、request等方法。传递参数当然我们可以给后台传递参数的，这里我模拟一个login请求。post处理请求时，我们可能需要传递头部还有返回值类型信息，不然会报错。后台用Spring Boot模拟登陆@RestController public class LoginController { @PostMapping("login") @CrossOrigin public String Login(@RequestBody LoginEntity loginEntity){ LoginEntity entity = loginEntity; return "success"; } }前端完整调用代码import { Component, OnInit } from '@angular/core'; import { HttpClient ,HttpHeaders} from '@angular/common/http'; @Component({ selector: 'app-simple-http', templateUrl: './simple-http.component.html', styleUrls: ['./simple-http.component.css'] }) export class SimpleHttpComponent implements OnInit { private httpClient: HttpClient; private headers = new HttpHeaders({'Content-Type': 'application/json'}); constructor(httpClient: HttpClient) { this.httpClient = httpClient } ngOnInit(): void { let url = "http://localhost:8080/login" let param = { userName:'张三' } this.httpClient.post(url,param,{headers:this.headers,responseType:'text'}).subscribe(function(response) { console.log('我取到数据了：'+response) }, function(err){ debugger console.log('报错了:'+err) }) } }
-
angular监听表单变化及双向数据绑定 监听表单变化FormGroup及FormControl都带有EventEmitter（事件发射器）用于监控表单控件的变化。要监听控件的变化，我们通过以下步骤：通过调用control.valueChanges访问这个EventEmitter然后调用.subscribe方法添加一个监听器。html代码如下<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')"> <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> </nz-card>ts代码如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup constructor(formBuilder: FormBuilder) { this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } 双向数据绑定ngModel是一个特殊的指令，它将模型绑定到表单中。ngModel的特殊之处在于它实现了双向绑定。相对于单向绑定来说，双向绑定更加复杂和难以推断。Angular通常的数据流向是单向的：自顶向下。但对于表单来说，双向绑定有时会更加容易。我们在ts文件添加一个sku属性，修改后如下import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-demo-form-sku-form-builder', templateUrl: './demo-form-sku-form-builder.component.html', styleUrls: ['./demo-form-sku-form-builder.component.css'] }) export class DemoFormSkuFormBuilderComponent implements OnInit { myForm: FormGroup sku: string constructor(formBuilder: FormBuilder) { this.sku = '' this.myForm = formBuilder.group({}) let formControl: FormControl = new FormControl("", Validators.compose( [Validators.required, this.skuValidator] )) this.myForm.addControl("sku", formControl) formControl.valueChanges.subscribe((value: string) => { console.warn('值改变' + value) }) this.myForm.valueChanges.subscribe((form: any) => { console.warn('表单改变：' + JSON.stringify(form)) }) } ngOnInit(): void { } onSubmit(form: any): void { debugger this.myForm.controls['sku'] console.log(form) } skuValidator(formControl: FormControl): { [s: string]: boolean } { if (!formControl.value.match(/^123/)) { return { invalidSku: true } } return { invalidSku: false } } } html模板中通过[(ngModel)]绑定我们添加的属性<nz-card style="width:300px;"> <form [formGroup]="myForm" nz-form (ngSubmit)="onSubmit(myForm.value)"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="sku">sku</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="sku" type="text" id="sku" [formControl]="myForm.controls['sku']" [(ngModel)]="sku"> <nz-tag *ngIf="myForm.controls['sku'].hasError('required') && myForm.controls['sku'].touched" [nzColor]="'magenta'">请输入SKU</nz-tag> <nz-tag nzColor="error" *ngIf="myForm.controls['sku'].hasError('invalidSku')" > <i nz-icon nzType="close-circle"></i> <span>error</span> </nz-tag> </nz-form-control> </nz-form-item> <nz-form-item> <button type="submit" nz-button class="primary">Submit</button> </nz-form-item> </form> <div> sku:{{sku}} </div> </nz-card>
-
angular内置指令 ngIf用来决定显示或隐藏元素，指令条件可以是表达式。app.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { doNotDisplay: boolean = false display(): boolean { return true } } 隐藏的元素不会创建。ngSwitchngSwitch指令可以通过ngSwitchCase、ngSwitchDefault走不通的分支。app.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate" [ngSwitch]="choice"> <p *ngSwitchCase="1">1</p> <p *ngSwitchCase="2">2</p> <p *ngSwitchCase="3">3</p> <p *ngSwitchDefault>default</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { choice: string = "4" }ngStyle给DOM元素设置CSS属性。最简单的用法[style.property]=valueapp.component.html代码<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()" [style.background-color]="backgroundColor">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { doNotDisplay: boolean = false backgroundColor: string = 'red' display(): boolean { return true } }另外一种方式是使用键值对<nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate"> <p *ngIf=false>1</p> <p *ngIf="doNotDisplay">2</p> <p *ngIf="display()" [ngStyle]="{'background-color':backgroundColor}">3</p> </nz-card> <ng-template #extraTemplate> <a>More</a> </ng-template>ngClassapp.component.css中定义一个类.bordered{ border: 1px dashed royalblue; }app.component.html代码<div [ngClass]="'bordered'" style="height: 400px;"></div>也可以通过如下代码<div [ngClass]="{bordered:false}" style="height: 400px;"></div>ngFor用于循环app.component.html代码<ul> <li *ngFor="let color of colors" [ngStyle]="{color:color}">{{color}}</li> </ul>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { colors:Array<String> constructor(){ this.colors=[ 'red','blue','green' ] } }循环时，我们也可以获取索引<ul> <li *ngFor="let color of colors;let index=index" [ngStyle]="{color:color}">{{index}}--{{color}}</li> </ul>ngNonBindable指定不编译或者绑定页面中的某个特殊部分。app.component.html代码<p ngNonBindable> {{content}} </p> <p> {{content}} </p>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { content:string="<div>content</div>" }innerHTML、innerText通过{{}}输出内容，会强制转换成文本。我们可以通过[innerHTML]输出html。[innerText]可以将html代码强制输出文本。app.component.html代码<div [innerHTML]="content"> </div> <div [innerText]="content"> </div>app.component.ts代码import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { content:string="<div>测试</div>" }
-
angular组件的输入与输出 所谓组件的输入与输出，其实就是给组件传值或者组件往外传值。类似于父组件向子组件传值或者子组件回调父组件的方法（也可以回调传值）。angular在模板上，通过[]实现组件的输入，()实现组件的输出。组件的输入比如有一个test的组件，其中有一个name属性，我们需要通过app组件将name传递给test组件。方式一：通过@Input()注解@Input()注解适合数据比较少的情况。首先，我们需要在TestComponent类中增加一个name属性，然后导入Input，然后在name属性前增加@Input()注解。import { Component, EventEmitter, OnInit,Input } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { @Input('newName') name: string; constructor() { this.name = "" } ngOnInit(): void { } } @Input('newName')中的newName代表我们起的一个别名，也就是说在传值的时候，我们是通过[newName]将值传递到组件的name属性。然后我们在模板文件test.component.html增加输出，以便测试值是否传递。<p>{{name}}</p>我们在app.component.html中调用app-test组件，并通过[]传值。<app-test [newName]='"test"'></app-test>测试方式二：通过Inputs[]配置项首先，我们需要在TestComponent类中增加一个name属性，然后在@Component注解中，增加Inputs[]配置项。import { Component, EventEmitter, OnInit } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'], inputs: ['name:newName'] }) export class TestComponent implements OnInit { name: string; constructor() { this.name = "" } ngOnInit(): void { } } inputs: ['name:newName']中，name代表当前类的属性，冒号后面的newName代表别名，也就是说在传值的时候，我们是通过[newName]将值传递到组件的name属性。然后我们在模板文件test.component.html增加输出，以便测试值是否传递。<p>{{name}}</p>我们在app.component.html中调用app-test组件，并通过[]传值。<app-test [newName]='"test"'></app-test>组件的输出angular中通过()实现组件的输出。比如我们在app-test组件中，定义了一个like方法，此方法执行时，回调父组件的ringWasPlace方法，并传递一个字符串。在app.component.ts代码如下import { Component, EventEmitter, OnInit,Input } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'], outputs: ['putRingOnIt'] }) export class TestComponent implements OnInit { putRingOnIt: EventEmitter<string> @Input('newName') name: string; constructor() { this.name = "" this.putRingOnIt = new EventEmitter(); } ngOnInit(): void { } liked(): void { this.putRingOnIt.emit('oh oh oh') } }父组件模板文件app.component.html<app-test [newName]='"test"' (putRingOnIt)="ringWasPlace($event)"></app-test> <h1> {{message}} </h1>父组件类app.component.ts如下import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { message: string; constructor() { this.message = "" } ringWasPlace(message: string):void { this.message = message; } } 测试，点击一下like按钮，看到输出如下
-
开启angular之旅 前言这年头，作为新生代的农民工真的太难了。虽说活到老，学到老，但是学习的速度永远跟不上技术的迭代。细数一下，做过的东西真不少了。angular开发环境打开安装nodejs进入nodejs官网，找到自己对应版本，下载安装即可安装完成后，输入node -v npm -vnpm替换淘宝源npm config set registry https://registry.npm.taobao.org安装angular/cliangular/cli是一个类似工具的东西，具体的我也没有深究，根据我使用一次的直观感受，它的作用就是，安装它后，我们可以通过各种不同的命令行来实现angular项目的创建，运行，调试等等npm install -g @angular/cli输入ng version输出以上页面，代表安装成功。创建angular项目ng new 项目名称创建angular项目，如下示例：创建名为 angular的项目ng new angular生成项目如下运行angular项目在项目文件夹下，输入ng serve打包运行项目，然后我们可以通过默认的4200端口访问http://localhost:4200/查看项目
