Angular

前言

之前cesium项目用vue,但在加载大数据的时候有问题，无法解决。

原因考虑是Object.defineProperty()的冲突（cesium.defineProperty()和vue的双向绑定）。

所以转用angular。看官方文档稍稍记录一下。

参考来源：

https://angular.cn

问题整理：

外部库的引入
组件通讯
angular请求本地JSON文件 404：angular中的打包配置有误
typescript相关：函数声明/es6

基础

# 安装angular-cli
npm install -g @angular/cli

# 新建项目
ng new 
# 若想用Less
ng new hello-ng --style less
cd hello-ng
# 启动
ng serve --open

# 创建组件
ng generate component hello
# 新建服务
ng g service hero

# tslint检查
ng lint

# 单元测试
ng test
# 端到端测试
ng e2e

# 构建
ng build

已有项目使用less

修改*.css文件及引用处后缀名为less并在angular.json文件中设置以下内容

  "schematics": {
    "@schematics/angular:component": {
      "styleext": "less"
    }
  }

双向绑定[()]

首先导入FormsModule: 打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号

import { FormsModule } from '@angular/forms';

imports: [
  FormsModule
],

<div>
    <label>name:
        <input [(ngModel)]="hero.name" placeholder="name">
    </label>
</div>

循环 *ngFor

<li *ngFor="let hero of heroes">

是否 *ngif

<div *ngIf="selectedHero">

事件绑定 (事件)

<li *ngfor="let hero of heros" (click)="onSelect(hero)">

单向属性绑定 [属性]

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

路由

添加 AppRoutingModule

ng generate module app-routing --flat --module=app

// app-routing-module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@NgModule({
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

添加路由定义

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

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full'},
  { path: 'heroes', component: HeroesComponent }
];

初始化，监听

@NgModule({
  imports: [ RouterModule.forRoot(routes) ]
}

添加路由出口

// app.component.ts
<router-outlet></router-outlet>

添加路由链接

<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>

HTTP

// app.module.ts 引入HTTP，并在imports中声明
import { HttpClientModule } from '@angular/common/http';

// 组件中引入
import {HttpClient} from '@angular/common/http';

// 注入服务
constructor(http: HttpClient) {}

getData() {
    this.http.get(url);
}

核心

组件与模板

服务

与视图无关并希望跨组件共享的数据或逻辑
单例，实例化一次贯穿应用整个生命周期，常驻内存，所以不能定义太多的服务

// 在组件中引入注入服务
import { HeroService } from '../hero.service';
constructor(private heroService: HeroService) { }

// 在组件中引用服务的方法
this.heroService.getHeros();

笔记

前言

基础

核心

组件与模板

服务

CATALOG

FEATURED TAGS

FRIENDS