Angualr
一、目录结构
“assets”: [ 存放静态资源目录 “src/favicon.ico”,“src/assets”]
“index”: “src/index.html”, 单页面，打包编译结果出口
“main”: “src/main.ts”, 整个模块化系统启动的入口，其作用为：加载根模块，启动执行模块系统，为整个系统的程序入口。
package.json：项目包说明文件，文件中有scripts字段，左边是简易命令，右边是等效的执行程序，即在终端输入 npm run start 和 ng serve均会执行编译程序：
"scripts": {
"ng": "ng", 运行查看Angular CLI脚手架工具使用帮助
"start": "ng serve", 运行开发模式
"build": "ng build", 运行项目打包构建（用于发布到生成环境） "test": "ng test", 运行karma单元测试
"lint": "ng lint", 运行TypeScripts代码校验
"e2e": "ng e2e", 运行protractor端到端测试
"npm run pc:start": 启动pc-fe项目
}
二、组件
Component（组件）是整个框架的核心 ，“组件化”的可以用来解耦、复用。
app.component.ts就是一个组件，在Angular中组件就是一个类 。
-
@Component为组件的装饰器，用来修饰组件的一些特性，里面包含组件的元数据Metadata；
-
selector 用来定义组件的名字
-
templateUrl用来指定组件对应的html模板文件
-
styleUrls用来存放css文件
-
styleUrls是一个数组，用来存放组件相关的样式文件
组件方法中，直接通过this访问组件成员
创建组件的方法：
ng generate component 组件名
三、模块
NgModule（模块）是组织业务代码的利器，按照自己的业务场景，把组件、服务、路由打包到模块里面，形成一个个的积木块，然后用这些积木块来搭建出高楼大厦，app.module.ts就是模块文件，里面是这样的：
- exports: [RouterModule] 导出RouterModule，以便它在整个应用程序中生效。
- declarations：声明并组装模块资源：组件、指令、服务；该应用所拥有的组件。 声明这里面有什么
- imports：app模块需要依赖其他的模块，如BrowserModule等；
- bootstrap：指定启动的根组件；
- providers：各种服务提供者。
四、元数据
@Component被称为元数据，用于描述类相关的功能模块和组件的一些信息
五、数据绑定和指令
MVVM思想（数据驱动视图），通过特殊的{ {}}语法将数据绑定到DOM元素，当数据改变的时候会影响视图的更新。
循环指令：*ngFor
条件判断指令：*ngIf
表单控件双向绑定指令：[(ngModel)]，需要导入
import {
FormsModule } from '@angular/forms';
imports:[ FormsModule]
六、服务
服务指的是针对某个单一或系统功能的封装，包括值、函数或应用所需的功能，例如在Angular核心包里面，最典型的一个服务就是http服务。典型的服务是一个类，具有专注的、明确的用途，应该做一件特定的事情，并把它做好。例如，日志服务，和服务端接口交互的服务等
七、依赖注入
依赖注入是提供类的新实例的一种方式，负责处理好类所需的全部依赖。大多数依赖都是服务。Angular使用依赖注入来提供新组件以及组件所需的服务。Angular重要的特性和服务：动画、表单、HTTP、组件生命周期、管道过滤器、路由和测试。
Ng Docs
一、常规用法：
1插值表达式
<p>{
{byObject.centence}}</p>
<p>{
{byArray[0]}}</p>
byObject = {
centence: '我是对象的值' };
byArray = ['我是数组的0号元素'];
2绑定机制
- 属性-从数据源到视图(单向) 插值表达式 []
- 事件-从视图到数据源(单向) ()
- 表单值-从视图到数据源再到视图(双向) [()]
<span [ngClass]="className">
<!-- 这里的ngClass等同于 class="{
{className}}" -->
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{
'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<div>
<p>案例1:使用模版引用变量(脱离数据源)</p>
<input style="width: 125px" nz-input #age placeholder="请输入你的年纪" />
<button (click)="showMsg(age.value)" nz-button nzType="primary">弹出模板引用变量的内容</button>
</div>
input输入框输入值，age将input框进行标记，button通过点击函数取到age.value即input框内的值
<div>
<p>案例4:既有单向绑定又有双向绑定</p>
<input style="width: 125px" nz-input [(ngModel)]="centence"/>
<button (click)="showMsg(centence)" nz-button nzType="primary">弹出双向绑定的内容</button>
</div>
[(ngModel)]进行数据双向绑定，input框中的值会传给contence，button键点击触发showMsg函数，此时展示的值是经过变化后的contence
可选链：
意义：有就用，没有就不用
例子：
我是{
{user.name}}, 我的房子所在地为{
{user.house?.location}}
没有就显示：我是谁谁谁，我的房子所在地为
有就显示：我是谁谁谁，我的房子所在地为上海大别墅
二、指令
ng-content
父传子，将父类html嵌入到子类中，就是父类html中有一段代码需要动态生成，相当于vue中的插槽slot。
父组件:
<h1>父组件</h1>
<input [(ngModel)]="sentence" name="sentence" class="sentence">
<stomach>
<div>{
{sentence}}</div>
<p>所谓的不公，只是不符合人类社会法则</p>
<span class="className">却符合因果关系</span>
</stomach>
子组件：
<h1>子组件</h1>
<!--ng-content父类嵌入子类-->
<ng-content select="p"></ng-content>
<ng-content select="span"></ng-content>
<ng-content></content>
<ng-content select="p"></ng-content>
ng-container
ng-container只是一个分组元素, 它的特点就是在渲染页面时, 自身不加入DOM.你可以使用浏览器的开发者工具, 查看运行结果中的这句话, 是否只有p标签包围.
<ng-container>
<p>轻流招聘啦~详情请戳https://github.com/Eve-Sama</p>
</ng-container>
<ng-container>
<p>自身不加入dom，只是分组元素</p>
</ng-container>
ng-template
ng-template是Angular 结构型指令中的一种，用于定义模板渲染HTML(模板加载)。定义的模板不会直接显示出来，需要通过其他结构型指令（如 ng-if）或 template-ref 将模块内容渲染到页面中。
今天吃点啥？
<ng-template [ngIf]="true">
吮指原味鸡
</ng-template>
概述
一共有三种类型的指令：
- 组件-拥有模板的指令
- 结构型指令-通过添加和移除 DOM 元素改变 DOM 布局的指令
- 属性型指令-改变元素、组件或其他指令的外观和行为的指令
结构性指令
以*开头，如*ngIf，*ngFor，否则为属性型指令，如ngClass，ngStyle等
*ngFor中有以下几种模板变量：
- index: number:遍历时的序号, 下标从0开始
- first: boolean:若为第一个元素则返回true, 否则返回false
- last: boolean:若为最后一个元素则返回true, 否则返回false
- even: boolean:若为偶数元素则返回true, 否则返回false
- odd: boolean:若为奇数元素则返回true, 否则返回false
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>籍贯</th>
<th>第一条记录</th>
<th>最后一条记录</th>
<th>偶数记录</th>
<th>奇数记录</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let obj of ngForData;
let index = index;
let first = first;
let last = last;
let even = even;
let odd = odd;">
<td>{
{index}}</td>
<td>{
{obj.name}}</td>
<td>{
{obj.gender}}</td>
<td>{
{obj.hometown}}</td>
<td [ngClass]="{
'high-light-true':first,'high-light-false':!first}">{
{first}}</td>
<td [ngClass]="{
'high-light-true':last,'high-light-false':!last}">{
{last}}</td>
<td [ngClass]="{
'high-light-true':even,'high-light-false':!even}">{
{even}}</td>
最低0.47元/天 解锁文章
3591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
