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

我是title

2.属性

<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

你可能感兴趣的:(angular)