angular速成小技巧

angular基本使用小技巧

你好！ 如果你想学习如何使用angular技巧, 可以仔细阅读这篇文章，了解一下angular的基本语法知识。

一、起步

1.安装 Angular CLI

npm install -g @angular/cli

2.创建项目

ng new my-app

3.运行项目

ng serve -o

4.创建页面

创建自定义页面：ng g c 创建的页面路径。 如：ng g c components/home，在components目录下创建了一个home的页面

ng g c components/home

4.配置路由

在app-routing.module.ts页面下配置路由。小技巧：可以先去app.module.ts目录下，复制创建生成的HomeComponent路径，然后在app-routing.module.ts粘贴引用即可

	import { HomeComponent } from './components/home/home.component';
	
	const routes: Routes = [
	  {
	    data:{title:"首页"},
	    path:"home",
	    component:HomeComponent 
	  }
	]

二、常用指令

1.*ngIf

下面展示一些 *ngIf用来显示隐藏

<div *ngIf="show"></div>

2.*ngFor

下面展示一些 let item of list用来循环遍历数组

<div *ngFor="let data of list"></div>

3.[class]

下面展示一些 [class] [style]。这是属性指令

<div [class]="attr"></div>
<div [style]="{color:'red'}"></div>

4.(click)

下面展示一些 (click)。这是点击事件。click后面注意必须得加 () 如:getclick()。

<div (click)="getclick()"></div>

5.[(ngModel)]

下面展示一些 [(ngModel)]。双向绑定输入框

<input [(ngModel)]="num" />
<selest[(ngModel)]="select" />
	<option>懂得都懂</option>
</select>

~~最后，请大家关注我并转发此篇文章，以上就是对AngularJS 小技巧的使用，后续继续补充相关资料，谢谢大家对我的支持！