angular学习笔记

创建angular项目

• 第一步：安装脚手架
  npm install -g @angular/cli
• 第二步：ng version 查看ng版本，存在则安装成功
• 第三步：ng new [项目名] 创建angular项目

根模块

• app.moudles.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1.declarations :全局组件 定义全局组件以后可以全局去使用

2.imports: 引入模块 可以引入路由模块,Http请求模块等（模块主要就是封装组件和服务最后暴露出可用组件）

3.providers:配置全局服务

4.bootstrap:启动组件

定义angular组件

• 使用命令 ng g component component/user

可以使用改命令创建一个component文件夹里面创建一个userComponent组件angular组件

如果使用全局组件 在根模块种去引用组件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//引入组件模块
import { UserComponent } from './component/user/user.component';


@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

userComponent.ts文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user',//selector html种去引用的名字
  templateUrl: './user.component.html', //组件的html模板
  styleUrls: ['./user.component.css'] //组件的style样式
})
/*
template 还可以内嵌到里面 
@Component({
  selector: 'app-login',
  template: `
    <style>
        input{ width:100px; }
    </style>
    <div>
      <input #usernameRef type="text">
      <input #passwordRef type="password">
      <button (click)="onClick(usernameRef.value, passwordRef.value)">Login</button>
    </div>
  `,
  styles: [`
   :host { margin: 10px; }
   
   .mousedown { border: 2px solid green; }
   
   input:focus { font-weight: bold; outline: none;}
  ` ]
})
.....
css样式还可以定义在模板里面
*/
export class UserComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

app.component.html

<div>
  <app-user></app-user>
</div>

在angular定义属性显示到html模板上

user.Component.ts文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  
  userName: any = "我是张三";
  address: string = "山东济宁";
  imagePath: string = "assets/image/abm2.png";
  innerHtml:string = "<h1>helloword</h1>"
    dynamicClass: string = "redFont";
  funcObject: any = {
    getName() {
      return "这是一个方法的getname";
    }
  };

  ngOnInit(): void {}
    
  constructor() { }

  ngOnInit(): void {

  }

}

user.component.html

<p>{
  {userName}}</p>
<div [attr.name]='address'>
    {
  {address}}
</div>
<img [src]='imagePath' />
<div>
    {
  {funcObject.getName()}} //插值中可以调用属性中的方法
</div>1
<div>
    {
  {1+1}} //插值中可以写运算表达式
</div>
<div innerHtml="{
  {innerHtml}}">
</div>
<div [class]='dynamicClass'>
被动态class控制
</div>
<!-- 使用class.[css中的name] 使用该方式右面的属性必须为boolean值 为true时 又是同级先使用动态class blueFont-->
<div [class.blueFont]='isBlueFont' class='redFont'>
        这是一个测试文本
</div>

user.component.css

div[address]{
    background: red;
}

 .redFont{
    font-size: 18px;
    color:red;
}

.blueFont{
    font-size:20px;
    color:blue;
}

1.在div上添加自定义属性name必须用[attr.name]来添加name属性

2.如果添加标签种已有属性 比如 div 种的 title 和img种的src可以直接[title]=‘address’ [src]=‘imagePath’

3.在插值种可以使用类属性种的方法来获取数据比如{ {funcObject.getName()}},插值中是可以写表达式比如运算表达式，或者调用表达式等

注意：（模板表达式不能使用全局命名空间中的成员比如window document 和math.random等）

4.可以用innerHtml属性动态插入html到模板html中 innerHtml="{ {html}}" 或者使用 [innerHtml]=‘html’

5.使用css绑定值：dynamicClass会被component.ts中的 dynamicClass属性替代为redFont

使用css动态绑值的时候可以dynamicClass=“fontRed font18px”可以使用这种方式 复制给组件属性，模板解析到dynamicClass会被把这个属性替换掉

使用class.[css中的name] 使用该方式右面的属性必须为boolean值 为true时 又是同级先使用动态class blueFont

<div [class.blueFont]='isBlueFont' class='redFont'>
        这是一个测试文本
</div>

angular触发事件

    <button (click)='clickAlert()'>点击触发弹出事件</button>