boxue-angular
文章目录
- 学习模块：
- 实战模块：
-
-
- 引擎：
- tslint配置
- 模块：
- 组件：
- 数据绑定
- 服务
- 指令
-
学习模块：
1.cli
2. 模块
3. 组件
4. 模板（模板属于组件的一部分）
5. 数据绑定
6. 服务（复杂逻辑放在服务中，组件中比较简单的）
7. 路由
8. HttpClient（angualr是基于RxJS响应式编程）
9. 等等
实战模块：
HMR系统（人力资源管理系统）
1.登录（登录，退出，访问控制）
2.员工管理（增删改查）
引擎：
lvy（发音：艾薇）：angular新一代的渲染引擎，smaller，faster，simpler。
与webpack深度合作
lvy renderer：designed with tree shaking in mind。
hello world 应用已经最小到2.7kb（原来36kb左右）。
tslint配置
tslint.json文件，在外层和内层都有一个；
内部的tslint：
// /src/tslint.json
{
"extends": "../tslint.json", // 扩展外部的
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
}
}
所以，在内部tslint修改就可以拉。
默认都带有分号的，我们改掉它。
tslint的配置：
在/tslint.json中找到要修改的配置项，将其复制添加到src/tslint.json中，然后修改（也可以在/tslint.json中直接修改，不太建议）
模块：
根模块（AppModule）、内置模块和自定义模块
模块是独立、封闭的
模块之间的引用通过导入和导出来完成
模块包含：
组件、服务、指令，这些内容需要在模块中配置后才有效。
模块：
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
@NgModule，是一个函数，注明是一个模块，按模块解析。
概念：装饰器，元数据
元数据：declarations（组件或指令），imports（其他模块），providers（服务），exports(导出供其他模块使用的组件或指令)
组件：
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-app';
}
装饰器，元数据，
数据绑定
1.插值：表达式，函数，属性
我是title2.属性
<a href="{
{urlPath}}">百度</a>
<a [href]="urlPath">百度2</a>
3.事件
使用的是方法的调用，所以要带括号。
<button (click)="getUserInfo()">按钮</button>
mouseenter，mouseleave，blur，foucs，等等
事件对象：$event。
4.双向绑定
属性和事件绑定的结合。
<input type="text" [(ngModel)]="userName">
服务
1.angular的语言服务：语法校验，语法提示，函数及变量跳转等等；
vs安装插件：Angular Language Service，右键，转到类型定义。
指令
把标签增强了！
分类：
1.组件，拥有模板的指令
2.属性性指令，改变元素外观和行为的指令（属性和事件绑定）
3.结构性指令，添加和溢出dom元素，改变dom布局的指令
[ngClass]=“{'redColor':true}”多个
[class.redColor]=‘true’单个class
[ngStyle]="{color:'red',fontSize:'18px'}" 内联样式
[style.color]="‘red’" 单个
*ngIf，*ngFor