程序员我爱编程

AngularJS官方教程解读攻略

2018-05-11  本文已影响173人  那就远走

攻略说明

安装nodeJS(npm)

# 这是用curl 添加源
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
# 这是安装
sudo apt-get install -y nodejs
# 这是个坑，反正我上次用cnpm装的脚手架工具写出来得代码不不能编译的，不过如果你愿意试试，可以装个cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

什么是angularJS

安装cli脚手架 创建项目 启动服务以预览项目

# 进入项目目录
cd angular-heroes 
# 启动：默认可以在 localhost:4200 访问
ng serve

壳组件 AppComponent

// 这是第1块：导入核心类库 @angular/core 提供的组建类 Component （我喜欢把它叫导包，因为和java很像，同时实现的功能也类似php中的use 空间类元素）
import { Component } from '@angular/core';

// 这是第2块： 装饰器，这里装饰了Component(可以理解为在配置这个组件)
@Component({
    selector: 'app-root', //告诉组件要渲染的具体标签
    templateUrl: './app.component.html', //告诉组件视图模板存在的位置
    styleUrls: ['./app.component.css'] //告诉组件css样式的位置
})

// 这是第3块： 具体的类定义，我们把变量、函数等等都写在这里面
export class AppComponent { // AppComponent 就从这里来
    title = 'app';
}

第一个子组件 HeroesComponent

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

// 2装饰器
@Component({
  selector: 'app-heroes', //再次注意这一句：告诉我们该组件渲染的标签
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

// 3具体类定义
export class HeroesComponent implements OnInit {
  // 请暂时忽略构造函数
  constructor() { }
  
  // 请暂时忽略初始化函数
  ngOnInit() {
  }

}

<h1>{{ title }}</h1>
<app-heroes></app-heroes>

HeroesComponent “点击事件”，展示英雄详情。

<!-- (click)="触发函数onSelect(参数hero)" -->
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

  // 定义一个变量 被选中的英雄: Hero类型的
  selectedHero: Hero; //注意：此时 selectedHero = undefined
  // 定义一个 onSelect() 方法 给 selectedHero 赋值
  onSelect(hero): void { //函数名(参数列表): 返回值类型 {函数体}
    this.selectedHero = hero; //注意：此时 selectedHero = 参数传递进来的hero
  }

<!-- 英雄详情 -->
<!-- *ngIf="selectedHero有值即为true" -->
<div *ngIf="selectedHero">
  
  <!-- 左边的值 | 调用右边的管道 uppercase全部大写 --> 
  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      {{selectedHero.name}}
    </label>
  </div>

</div>

绑定点击事件 (click)="函数(参数)"

*ngIf="判断条件" 为true 则展示div和div内部的数据

{{value | grep}} => 调用管道函数, uppercase将字符串字符全部转换为大写字母显示

# Chrome控制台报错 _co.onSelect is not a function（onSelect不是一个函数）
# 找了半天，原来是 onSelect() 函数名写成了 onselect() s小写了

HeroesComponent “双向数据绑定”

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

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

// 2装饰器
@NgModule({
  // 使用的组件
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  // 使用的其他模块
  imports: [
    BrowserModule
  ],
  // 服务提供
  providers: [],
  // “引导组件”
  bootstrap: [AppComponent]
})

// 3类定义
export class AppModule { }


// 1
...
import { FormsModule } from '@angular/forms'; //导入FormsModule

// 2在装饰器中真正投入使用
  ...
  imports: [
    BrowserModule,
    FormsModule //让FormsModule真正投入使用
  ],
  ...

<div>
    <label>name:
    <!-- [(ngModel)]="被绑定的数据" -->
    <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
</div>

这里把 selectedHero.name 属性绑定到了 HTML 的 input 元素上，以便数据流可以双向流动：从 selectedHero.name 属性流动到 input，并且从 input 流回到 selectedHero.name 。

将“英雄详情” 作为一个单独的小组件

<!-- 英雄详情 -->
<!-- *ngIf="hero有值即为true" -->
<div *ngIf="hero">

  <!-- 左边的值 | 调用右边的管道 uppercase全部大写 --> 
  <h2>{{ hero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
      <label>name:
        <!-- [(ngModel)]="被绑定的数据" -->
        <input [(ngModel)]="hero.name" placeholder="name">
      </label>
  </div>

</div>

服务

// 1导包
import { Injectable } from '@angular/core';

// 2装饰器
@Injectable({
  providedIn: 'root'
})

// 3具体定义
export class HeroService {

  constructor() { }
}

// 1
...
import { Hero } from "./hero"; //导入规范类
import { HEROES } from "./mock-heroes"; //导入模拟的数据

// 3
export class HeroService {

  // 定义一个方法：获取所有的英雄数据
  getHeroes(): Hero[] {
    return HEROES;
  }

  constructor() { }
}

// 1
import { HeroService } from "./hero.service"; //导入HeroService

// 2
...
  // 服务提供
  providers: [
    HeroService, //让HeroService真正投入使用
  ],
...

// 1删除 HEROES 的导入 导入服务 HeroService
...
import { HeroService } from "../hero.service"; //导入服务

// 3修改 heroes获取的过程
export class HeroesComponent implements OnInit {
  heroes: Hero[]; //修改heroes 这里只声明它的数据类型为 Hero类所实例化对象的集合

  // 构造函数中使用依赖注入的方式 实例化一个私有变量 heroService 为 HeroService 对象
  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes(); //在初始化组件时获取”英雄列表“
  }

  // 函数： 获取英雄列表
  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }

  // 定义一个变量 被选中的英雄: Hero类型的
  selectedHero: Hero; //注意：此时 selectedHero = undefined
  // 定义一个 onSelect() 方法 给 selectedHero 赋值
  onSelect(hero): void { //函数名(参数列表): 返回值类型 {函数体}
    this.selectedHero = hero; //注意：此时 selectedHero = 参数传递进来的hero
  }
}

显示信息

<h1>{{title}}</h1>
<app-heroes></app-heroes>
<app-messages></app-messages>

我在创建组件的时候发现 cli 自动帮我导入的代码有问题，有的代码跑到另外一行去了，可能是因为我写过注释，自己排过板的原因导致自动写入的代码不正确

在创建服务并注册的时候，我协商了--module=app 也不能写如AppModule中，只有我自己去导包然后在服务提供中声明

// 3
export class MessageService {
  
  constructor() { }

  // 定义信息变量
  messages: String[] = [];

  // 定义添加信息方法
  add(message: string) {
    this.messages.push(message); //在数组中添加元素
  }

  // 定义清空信息方法
  clear() {
    this.messages = [];
  }
}

// 1
import { MessageService } from "./message.service"; //导入MessageService

// 3 
...
// 构造函数中 依赖注入 实例化 MessageService
constructor(private messageService: MessageService) { }

getHeroes(): Observable<Hero[]> { //这里声明数据类型为 Observable<Hero[]> “可观察的Hero对象集合”
    this.messageService.add('提示信息： 查询英雄成功'); //当获取数据成功的时候，添加一条提示信息
    return of(HEROES); //这里用of(HEROES)返回数据
} 
...

// 1
...
import { MessageService } from "../message.service"; //导入服务

// 3
export class MessagesComponent implements OnInit {
  //依赖注入： 实例化服务
  constructor(public messageService: MessageService) { } // 注意这里得是公开的属性：Angular 只会绑定到组件的公共属性。

  ngOnInit() {
  }

}


<div *ngIf="messageService.messages.length">

  <h2>提示信息</h2>
  <button class="clear" (click)="messageService.clear()">clear</button>
  <div *ngFor='let message of messageService.messages'> {{message}} </div>

</div>

路由的使用

--flat是让路由文件生成在 /src/app 下，而不是 /src/app/app-routing。（注意是--flat，我写了-flat给我创建了一个app-routing/目录）

--module=app 是自动在 AppModule 的 imports[] 中注册路由，然后我基本可以断定：别在AppModule里面添加注释和排版，否则它自动添加的代码会出错，一段代码可能会跑到另外一段代码里面去。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})

export class AppRoutingModule { }

// 1导包
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router"; //导入RouterModule和Routes

// 2装饰器
@NgModule({
  exports: [
    RouterModule //暴露RouterModule以让AppModule可以使用它
  ]
})

// 3具体定义
export class AppRoutingModule { }


...
// 导入组件
import { HeroesComponent } from './heroes/heroes.component';
// 路由定义
const routes: Routes = [
  // {path: 路由地址, component: 指向组件}
  {path: 'heroes', component: HeroesComponent},
];

// 2装饰器
@NgModule({
  imports: [
    RouterModule.forRoot(routes) //这里的routes是上面的常量routes，所以路由定义必须写在前面
  ],
  ...
})
...

<h1>{{title}}</h1>
<nav>
    <!-- routerLink="路由地址" -->
    <a routerLink="/heroes"> 英雄列表 </a>
</nav>
<!-- <app-heroes></app-heroes>  现在不需要这句了 --> 
<!-- 将点击 -->
<router-outlet></router-outlet>
<app-messages></app-messages>

import { DashboardComponent } from "./dashboard/dashboard.component";

{ path: 'dashboard', component: DashboardComponent },
// 添加一条默认路由，即 localhost:4200 后面啥也没有的路由
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }

...
<a routerLink="/dashboard"> 仪表盘 </a>
...

创建路由定义文件 ng generate module app-routing --flat --module=app ， --flat让该文件创建在 AppModule 同级目录下， --module=app 让 cli 帮我们完成路由在 AppModule 中的自动写入

路由定义文件应该是这样的

// 1
import { RouterModule, Routes } from "@angular/router"; //导入RouterModule和Routes

// 紧接着导入组件 和 配置路由列表
// 导入组件
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from "./dashboard/dashboard.component";
import { HeroDetailComponent } from "./hero-detail/hero-detail.component";
// 路由定义
const routes: Routes = [
  // {path: 路由地址, component: 指向组件}
  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent },
  // 带参数的路由 path:'路由地址/:参数占位符'
  { path: 'detail/:id', component: HeroDetailComponent },
  
  // 添加一条默认路由，即 localhost:4200 后面啥也没有的路由
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

// 2装饰器中
// 2装饰器
@NgModule({
  imports: [
    RouterModule.forRoot(routes) //实现路由功能：这里的routes是上面的常量routes，所以路由定义必须写在前面
  ],
  exports: [
    RouterModule //暴露RouterModule以让AppModule可以使用它
  ]
})

在页面调用路由的时候：

# 在布局模板应该用路由出口标签
<router-outlet> </router-outlet>
# 路由的链接a标签的写法应该是
<a routerLink="路由地址/{{参数如果有的话}}">

单机版开发总结

为什么叫单机版： 因为我们的“英雄列表”是在本地建了一个hero.ts作规范，mock-heroes.ts根据规范模拟出来的数据。没有真正的和服务器沟通。

  1. 组件 Component ng g c 组件名 
// 1 ： 导入需要使用的"包"
import { Something } from '包的相对路径';

// 2 ： 装饰器，声明组件要渲染的标签，组件使用的模板，样式文件的地址
@Component({
  selector: '标签',
  templateUrl: '模板',
  styleUrls: ['样式1', '样式2']
})

// 3 : 具体定义，默认自带构造函数，初始化函数，我们还可以在其中自定义变量和函数
export class DashboardComponent implements OnInit {

  // 我们通常在 构造函数 中完成依赖注入
  constructor() { }

  ngOnInit() {
    // 我们通常在 初始化函数 中调用那些组件一旦载入就需要使用到的方法
  }

}
  1. 模块 Module 我们只有一个模型 app.module.ts
// 1导包
import { Something } from 'Somewhere';

// 2装饰器
@NgModule({
  // 使用的组件
  declarations: [],
  // 使用的其他模块
  imports: [],
  // 服务提供
  providers: [],
  // “引导组件”
  bootstrap: []
})

// 3类定义
export class AppModule { }
  1. 模板 视图 即 组件的html 组件名.component.html
# 在 模块中 导入 FormsModule
import { FormsModule } from '@angular/forms';
# 在 组件视图上绑定该数据 
<input [(ngModel)]="hero.name" placeholder="name"> <!-- [(ngModel)]="对象.具体属性" -->
  1. 组件与组件之间通讯（后面我们没用了）
# 父组件模板中导入子组件
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<!-- [子组件的变量hero] = "父组件的变量selectedHero" -->

// 1导入Input
import { Component, OnInit, Input } from '@angular/core';

// 3定义变量时加上修饰
@Input() hero: Hero;
  1. 服务 Service ng g s 服务名 
// 1导包
import { XxService } from "./xx.service"; 

// 2装饰器中真正投入使用
...
// 服务提供
providers: [
  XxService, //让XxService真正投入使用
],
...

// 1导包
import { Injectable } from '@angular/core';

// 2装饰器
@Injectable({
  providedIn: 'root'
})

// 3具体定义
export class HeroService {

  // 构造函数
  constructor() { }

}

// 1 服务定义里面导包 "rxjs"
import { Observable, of } from "rxjs";  

// 3 服务定义里面具体的用法
函数(): Observable<返回值类型> {
  return of(返回的数据);
}

// 1 导入服务
import { XxService }  from '../xx.service';

// 3 构造函数中实例化服务
constructor(
  // 依赖注入 实例化上面导入的类
  权限修饰符 属性: 导入的服务类;
  权限修饰符 属性: 导入的服务类;
  权限修饰符 属性: 导入的服务类;
) { }

// 写一个方法调用
函数名(参数列表): 返回值类型 {
  this.依赖注入时实例化的服务类.服务类中提供的数据获取方法()
    .subscribe(数据 => this.定义的变量 = 服务类方法提供的数据)
    .subscribe(hero => this.hero = hero); // 获取全部数据
    .subscribe(heroes => this.heroes = heroes.slice(0, 4)); //获取前5条
} 

ngOnInit() {
  this.函数();
}
  1. 路由
// 1导包
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from "@angular/router"; //导入RouterModule和Routes

// 导入组件
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from "./dashboard/dashboard.component";
import { HeroDetailComponent } from "./hero-detail/hero-detail.component";

// 路由定义
const routes: Routes = [
  
  // {path: '路由地址', component: 指向组件}
  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent },
  
  // 带参数的路由 path:'路由地址/:参数占位符'
  { path: 'detail/:id', component: HeroDetailComponent },
  
  // 添加一条默认路由，即 localhost:4200 后面啥也没有的路由
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

// 2装饰器
@NgModule({
  imports: [
    RouterModule.forRoot(routes) //这里的routes是上面的常量routes，所以路由定义必须写在前面
  ],
  exports: [
    RouterModule //暴露RouterModule以让AppModule可以使用它
  ]
})

// 3具体定义
export class AppRoutingModule {}

定义路由时 path: '不能有/'

使用路由时 routerLink="/可以有而且官方教程上有但是我试过也可以没有"

上一篇 下一篇

猜你喜欢

热点阅读