Angular4.x学习之路分享【2】--项目的目录结构说明及相关指令使用

前端之家收集整理的这篇文章主要介绍了Angular4.x学习之路分享【2】--项目的目录结构说明及相关指令使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

小伙伴们,大家好啊,今天分享angular4.x的项目目录结构以及常用指令的使用,好了,废话不多说,上干货!

1.目录结构分析:(妈哎,图标的好累啊~)

2.组件的分析以及创建

一、创建指令:

ng g component + 组件名

二、常用的指令说明:
1.插值表达式{{}}--文本绑定
例如:

{{title}}

2.HTML绑定
例如:

<div [innerHTML]="xxx"></div>

3.数据循环:

3.1.写法一:
<ul>
<li *ngFor="let 变量名 of list">
</li>
</ul>

如果想要获得下标值,可以这样:

<ul>
<li *ngFor="let 变量名 of list; let i = index">
        {{i}}
</li>
</ul>
3.2.写法二:
<ul>
<li template="ngFor let 变量名 of list">
</li>
</ul>

4.条件判断*ngIf:
写法一:

<p *ngIf="list.length < 5">显示的条件</p>

写法二:

<p template="ngIf list.length < 5">显示的条件</p>

5.事件的执行:

<button (click)="方法名()"></button>

6.属性的绑定:

[xxx]="xxxx"

7.双向数据绑定:

<input [(ngModel)]="value">
        {{value}}

重点:一定要在项目中引入FormsModule模块

结尾:好了,本章就分享这么多,下期分享Angular4中的服务service,晚安,拜拜~

猜你在找的Angularjs相关文章