angular基础

1）安装

cnpm install -g @angular/cli

2）新建项目,然后安装依赖

ng new project-name
跳过安装
ng new project-name --skip-install   

3）使用vscode,安装插件angular提示插件angular补全

4)  快速创建组件，创建服务

     ng g   查看可创建的列表

     ng g component test   这个命令会在app目录下创建test文件夹，里面包含4个文件

     ng g service pathDir/serviceName   然后需要手动配置服务

//在appModule引入
import {ServiceName} from "";

...
//然后在provider里注入
provider:[ServiceName]


//然后在需要使用的组件里

import {ServiceName} from "";
...
//注入到class里
constructor（public userServiceName:ServiceName）{

}

 

5）使用class声明属性以及类型  

/*
   public 共有（默认）
   protected   保护类型（只能在当前类和子类型里面访问）
   private  私有 只能在当前类才可以使用
   
   private username:string = "Joby";

*/
   private username:string = 'Joby'；
   private hTemplate:string = "<span>我是有html标签的字符串</span>"；
   private arr:any[] = ["aa","bb","cc"];

<!--使用动态的数据绑定属性-->
    <div [title]="username"></div>

<!-- 解析html-->

    <div [innerHTML]="hTemplate"></div>

<!-- 循环数组-->

    <div *ngFor="let item of arr;let key=index">{{item}}{{key}}</div>

<!-- 判断语句   *ngIf   *ngSwitch   *ngSwitchCase -->

<!--class和样式绑定   [ngClass]="{className :true }"   [ngStyle]="{width:'100px'}" -->

<!--管道  {{today| date:"yyyy-MM-dd HH:mm:ss"}} -->

<!--执行方法 以及获取事件对象-->

     <div (click)="aFn($event)"></div>

<!--使用双向数据绑定-->
     <input type="text" [(ngModel)]="userName"/>
<!--单选radio-->
     <input type="redio name='sex' [(ngModel)]='sex'>

     <input type="redio name='sex' [(ngModel)]='sex'>

<!--多选checkbox-->

     <input type="checkbox" *ngFor="let item of arrList" [(ngModel)]='item.checked'>

 

 

6）父子组件传值

@Input() title:any;

  <app-test [title]='title' #appTest></app-test>

 

7）父组件获取子组件数据

@ViewChild("appTest") Test:any;

 <app-test [title]='title' #appTest></app-test>

 8) 生命周期函数及获取dom节点

/*
  组件和指令初始化完成
  ngOnInit(){}

  dom加载完成
  ngAfterViewInit(){}


  angular提供的获取dom节点,下面这种方法还可以获取angular的组件实例
  @ViewChild('myBox') mybox:any;
  this.myBox.nativeElement

  <div #mybox></div>
*/

 9）设置全局样式在src目录下的styles.less,每个模块设置的css都是局部的