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.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.插值:表达式,函数,属性
我是title
<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