angular4.x初体验

2017-11-05

虽然所有的学习是以4.x版本为基础，但是下载的脚手架确实6.1版本的，所以所有的记录在6.1版本都是好使的，不好使的地方都解决掉了

开发工具IDE：Visual Studio Code(记住安装 Angular v4 TypeScript Snippeta否则不支持提示)
官方网址 https://www.angular.cn/guide/quickstart

安装angular4.x

安装node 6.9.x以上版本和npm3.x.x以上版本(node -v npm -v npm是node自带)
全局安装 Angular Cli脚手架工具
1
npm install -g @angular/cli

npm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

1	cnpm install -g @angular/cli

创建项目

1.打开 cmd 找到你要创建项目的目录
2.创建项目
3 ng new 项目名称创建一个项目
1
ng new my-app
4 进入刚才创建的项目里面启动服务
1
2
3
cd my-app
cnpm install //安装依赖
ng serve --open //运行项目
目录结构 app.module.ts是重点
src/app/app.module.ts
定义AppModule，这个根模块会告诉angular怎么组装该应用。所有的组件以及引入使用的第三方组件都需要在这里配置
src/app/app.component.css、app.component.ts、app.component.html相当于组成了一个**根组件**
项目启动首先加载main.js他又会加载app.module.ts这个文件

创建组件

可以在app文件夹下创建components然后把组件都放入其中但是这样一个一个会麻烦，Angular自带创建组件命令
ng g component后边如果不加文件夹会自动在app文件中生成header组件
1
ng g component components/header
会自动在app/components生成header文件夹包含（header.component.css、header.component.ts、header.component.html）**其中header.component.spec.ts文件没用可以删掉**

并且这个命令会自动把组件配置到app.module.ts

/*
  这个根模块会告诉angular怎么组装该应用
*/

/*浏览器解析模块*/
import { BrowserModule } from '@angular/platform-browser';
/*angular核心模块*/
import { NgModule } from '@angular/core';
/*自定义模块*/
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';

/*
  @NgModule装饰器将AppModule标记为Angular模块类（也叫NgModule类）
  NgModule类接收一个元数据对象，告诉Angular如何编译启动应用
*/
@NgModule({
  declarations: [/*引入自定义组件 并且所有组件都需要在这里面声明一下*/
    AppComponent, HeaderComponent
  ],
  imports: [  /*当前项目依赖哪些模块*/
    BrowserModule
  ],
  providers: [], /*定义的服务 放在这里面*/
  bootstrap: [AppComponent] /*默认运行启动哪个组件*/
})
/*根模块不需要导出任何东西 因为其他组件不需要导入根模块 但一定要写 */
export class AppModule { }

header.component.html
1
<h2> 这是一个头部组件</h2>>

header.component.ts、

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

@Component({
  selector: 'app-header',//组件名称
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

在app.component.html引入头部组件名称即可

<!--引入组件-->
<app-header></app-header>
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

组件定义数据

public 公共类型可以在这个类里面使用也可以在类的外边使用(默认就是public)
protected：保护类型在类里面、子类里面可以访问，在类外部没法访问
private ：私有在类里面可以访问，子类、类外部都没法访问

public的数据可以在页面上呈现其余的获取不到

export class NewsComponent implements OnInit {
  title='定义数据';//属性
  msg:any //另一种定义属性的方法
  msg1:string='这必须是一个string类型的值'
  //定义属性还可以加修饰符  详细看typescript
  public name:string = '王磊'
  constructor() {
    this.msg = '另一种定义属性的方法'
  }
}

绑定数据是两个花括号

绑定属性

1 2	public id = 'content'; <div id="{{id}}">div上绑定属性</div>

另一种绑定方式

1
2
3

public msg = '我是一段数据';
<div title="{{msg}}">鼠标悬浮</div>
<div [title]="msg">鼠标悬浮</div>

HTML标签转义(标签解析) [innerHTML]

export class NewsComponent implements OnInit {
  public h = '';
  constructor() {
    this.h = '<h2>这是新闻数据</h2>';
  }
}
<div [innerHTML] = 'h'></div>

数据循环 *ngFor 注意拿到的索引和vue，react不同

*ngFor=”let item of list;let key=index”

export class NewsComponent implements OnInit {
  // 数组循环
  public list = [];
  public obj = {
    name:'张三'
  };
  constructor() {
    this.list = ['1111','2222','3333'];
    this.list2 = [
      {'title':'111111111'},
      { 'title': '2222222' },
      { 'title': '3333333' },
    ];
    this.list3 = [
    { 'catename': '宝马',
      list: [
        { 'title': '宝马x5' },
        { 'title': '宝马x3' },
        { 'title': '宝马x4' }
      ]
    },
    {
      'catename': '奥迪',
      list: [
        { 'title': '奥迪Q1' },
        { 'title': '奥迪Q2' },
        { 'title': '奥迪Q3' }
      ]
    }
  }
}

<!-- 获取对象数据 -->
{{obj.name}}
<ul>
  <li *ngFor="let item of list;let key=index">{{item}}---{{key}}</li>
</ul>
<ul>
  <li *ngFor='let item of list2'>{{item.title}}</li>
</ul>
<ul>
  <li *ngFor='let item of list3'>
    {{item.catename}}
    <ul>
      <li *ngFor='let child of item.list'>{{child.title}}</li>
    </ul>
  </li>
</ul>

*ngIf 条件判断

如果满足条件就显示否则隐藏

export class NewsComponent implements OnInit {
  public flag = false;
  constructor() { }
}

1 2	<div *ngIf="flag">flag为true的时候显示</div> <button (clcik)='flag=!flag'>切换隐藏显示</button>

自定义事件 (click)=’getMsg()’

1	<button (click)='getMsg()'>点击执行方法打印数据</button>

export class HomeComponent implements OnInit {
  public msg:any;
  constructor() {
    this.msg = '这是一个home组件';
  }
  ngOnInit() {  }
  // 自定义方法
  getMsg(){
    this.msg = '点击更改数据';
  }
}

表单处理

1	<input type="text" (keyup)='keyUpFn()'>

export class HomeComponent implements OnInit {
  constructor() {
    this.msg = '这是一个home组件';
  }
  ngOnInit() {

  }
  // 自定义方法
  keyUpFn(){
    console.log('键盘抬起');
  }
}

获取event事件对象需要传$event

1	<input type="text" (keyup)='keyUpFn($event)'>

export class HomeComponent implements OnInit {
  constructor() {
    this.msg = '这是一个home组件';
  }
  ngOnInit() {

  }
  // 自定义方法
  keyUpFn(){
    console.log(e.keyCode);
  }
}

双向数据绑定

需要在app.module.ts引入FormsModule模块然后在imports声明该模块

引入完模块双向数据绑定的功能才可以用

/*浏览器解析模块*/
/*浏览器解析模块*/
import { BrowserModule } from '@angular/platform-browser';
/*angular核心模块*/
import { NgModule } from '@angular/core';
 /*FormsModule表单模块*/
import { FormsModule } from '@angular/forms';
/*自定义模块*/
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';

/*
  @NgModule装饰器将AppModule标记为Angular模块类（也叫NgModule类）
  NgModule类接收一个元数据对象，告诉Angular如何编译启动应用
*/
@NgModule({
  declarations: [/*引入自定义组件 并且所有组件都需要在这里面声明一下*/
    AppComponent, HeaderComponent, NewsComponent, HomeComponent
  ],
  imports: [  /*当前项目依赖哪些模块*/
    BrowserModule,
    FormsModule
  ],
  providers: [], /*定义的服务 放在这里面*/
  bootstrap: [AppComponent] /*默认运行启动哪个组件*/
})
/*根模块不需要导出任何东西 因为其他组件不需要导入根模块 但一定要写 */
export class AppModule { }

接下来是双像数据绑定的代码了 [(ngModel)]=”bindValue”

1	<input type="text" [(ngModel)]="inputValue">

export class HomeComponent implements OnInit {
  public inputValue:any;
  constructor() {
    this.inputValue = '双向数据绑定';
   }
  ngOnInit() {

  }
}

报错：for循环多模板指令报错 *ngIf换成hidden

一个标签上只能绑定一个ng模板(命令) *ngFor *ngIf 不能多个
Can’t have multiple template bindings on one element. Use only one attribute prefixed with
1
<li *ngFor="let item of list;let key=index" [hidden]="item.status==2">