Angular學習筆記(一)

2021-03-02 小笑殘虹
Angular學習筆記一、父子組件傳值篇

@Input() 和 @Output() 為子組件提供了一種與其父組件通信的方法。@Input() 允許父組件更新子組件中的數據。相反，@Output() 允許子組件向父組件發送數據。

父組件向子組件傳值—@Input

子組件或指令中的 @Input() 裝飾器表示該屬性可以從其父組件中獲取值。

父組件 app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';
  msg = '你好，子組件';
}
父組件 app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<app-child [item]="msg"></app-child>

<router-outlet></router-outlet>

子組件 child.component.ts
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  // 子組件或指令中的 @Input() 裝飾器表示該屬性可以從其父組件中獲取值。
  @Input() item: string;
  
  constructor() {
  }

  ngOnInit() {
  }
  
}

子組件 child.component.html
<p>父組件傳給子組件的值：{{item}}</p>
子組件向父組件傳值—@Output、EventEmitter
子組件或指令中的 @Output() 裝飾器允許數據從子組件傳給父組件。子組件使用 @Output() 屬性來引發事件，以通知父組件這一變化。為了引發事件，@Output()必須是EventEmitter類型，它是@angular/core中用來發出自定義事件的類。
子組件 child.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  // 子組件或指令中的 @Input() 裝飾器表示該屬性可以從其父組件中獲取值。
  @Input() item: string;
  // 子組件或指令中的 @Output() 裝飾器允許數據從子組件傳給父組件。
  @Output() newItemEvent = new EventEmitter<string>();

  constructor() {
  }

  ngOnInit() {
  }

  addNewItem(value: string) {
    console.log(value);
    this.newItemEvent.emit(value);
  }

}
子組件 child.component.html
<p>父組件傳給子組件的值：{{item}}</p>
<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">子組件向父組件中添加item</button>
父組件 app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';
  msg = '你好，子組件';
  items = ['item1','item2', 'item3', 'item4'];
  addItem(newItem: string) {
    this.items.push(newItem);
  }
}
父組件 app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ul>
  <li *ngFor="let item of items">{{item}}</li>
</ul>
<app-child [item]="msg" (newItemEvent)="addItem($event)"></app-child>

<router-outlet></router-outlet>

二、路由篇項目中使用路由
要想在項目中使用路由，首先要創建一個帶路由的應用項目。通過指令ng new routing-app --routing可以創建一個附帶路由的項目。
1、為路由添加組件
為了使用 Angular 的路由器，應用至少要有兩個組件才能從一個導航到另一個。要使用 CLI 創建組件，請在命令行輸入以下內容，其中 first 是組件的名稱：
ng generate component first
為第二個組件重複這個步驟，但給它一個不同的名字。這裡的新名字是 second。
ng generate component second
CLI 會自動添加 Component 後綴，所以如果在編寫 first-component，那麼其組件名就是 FirstComponentComponent。
2、導入這些新組件
要使用這些新組件，請把它們導入到該文件頂部的 AppRoutingModule 中，具體如下：
// 在app-routing.module.ts 文件中
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
3、定義一個基本路由
創建路由有三個基本的構建塊。把 AppRoutingModule 導入 AppModule 並把它添加到 imports 數組中。Angular CLI 會為你執行這一步驟。但是，如果要手動創建應用或使用現存的非 CLI 應用，請驗證導入和配置是否正確。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
1、把 RouterModule 和 Routes 導入到你的路由模塊中。Angular CLI 會自動執行這一步驟。CLI 還為你的路由設置了Routes數組，並為@NgModule()配置了imports和exports數組。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; // CLI imports router

const routes: Routes = []; // sets up routes constant where you define your routes

// configures NgModule imports and exports
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
2、在Routes數組中定義你的路由。這個數組中的每個路由都是一個包含兩個屬性的 JavaScript 對象。第一個屬性path定義了該路由的URL路徑。第二個屬性component定義了要讓 Angular 用作相應路徑的組件。
const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];
3、最後把這些路由添加到你的應用中。現在你已經定義了路由，可以把它們添加到應用中了。首先，添加到這兩個組件的連結。把要添加路由的連結賦值給routerLink屬性。將屬性的值設置為該組件，以便在用戶點擊各個連結時顯示這個值。接下來，修改組件模板以包含<router-outlet>標籤。該元素會通知 Angular，你可以用所選路由的組件更新應用的視圖。
<!--app.component.html-->

<h1>Angular Router App</h1>
<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->
<nav>
  <ul>
    <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
    <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
  </ul>
</nav>
<!-- The routed views render in the <router-outlet>-->
<router-outlet></router-outlet>
路由順序
路由的順序很重要，因為Router在匹配路由時使用「先到先得」策略，所以應該在不那麼具體的路由前面放置更具體的路由。首先列出靜態路徑的路由，然後是一個與默認路由匹配的空路徑路由。通配符路由是最後一個，因為它匹配每一個URL，只有當其它路由都沒有匹配時，Router才會選擇它。
設置通配符路由
當用戶試圖導航到那些不存在的應用部件時，在正常的應用中應該能得到很好的處理。要在應用中添加此功能，需要設置通配符路由。當所請求的URL與任何路由器路徑都不匹配時，Angular路由器就會選擇這個路由。
要設置通配符路由，請在routes定義中添加以下代碼。
{ path: '**', component: PageNotFoundComponent }
設置重定向
要設置重定向，請使用重定向源的path、要重定向目標的component和一個pathMatch值來配置路由，以告訴路由器該如何匹配URL。
const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];
路由傳參1、動態路由
1、首先在app-routing.module.ts文件中的routes數組中配置動態路由
{
    path: 'first-component/:id',
    component: FirstComponent,
}
2、在html頁面中跳轉傳值
<!--動態路由傳值-->
<a routerLink="/first-component/3" routerLinkActive="active">First Component</a>
<!--或者-->
<a [routerLink]="['/first-component/',3]">First Component</a>
2、query形式傳參
在html頁面中的routerLink的a標籤中直接傳參
<a routerLink="/second-component" [queryParams]="{name: '小笑殘虹'}" routerLinkActive="active">
  Second Component
</a>
獲取路由參數信息1、獲取動態路由的值
假如我要在FirstComponent組件中獲取動態路由傳遞的值，第一步：在first.component.ts文件中引入ActivatedRoute模塊，作為route注入到構造器函數中。
import {Component, OnInit} from '@angular/core';

import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss']
})
export class FirstComponent implements OnInit {
  constructor(private route: ActivatedRoute) {
  }
}
然後就可以通過route.params.subscribe()方法獲取到傳遞的值了。
ngOnInit() {
    // 獲取動態路由傳值
    console.log(this.route.params);
    this.route.params.subscribe(data => {
      console.log(data);
      this.id = data.id
    })
  }
2、獲取query形式傳遞過來的參數
假如我要在SecondComponent組件中獲取query形式傳遞過來的值，第一步：在second.component.ts文件中引入ActivatedRoute模塊，作為route注入到構造器函數中。
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.scss']
})
export class SecondComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
  ) {
  }
}
然後就可以通過route.queryParams.subscribe()方法獲取到傳遞的值了。
ngOnInit() {
    // 獲取params傳值
    this.route.queryParams.subscribe(params => {
      console.log(params);
      this.name = params['name'];
    });
  }
js跳轉路由（編程式導航）
我要在AppComponent組件中演示編程式導航，所以首先要在app.component.ts中引入Router模塊，並且在constructor函數中進行初始化，引入NavigationExtras模塊是為了進行query形式傳參，NavigationExtras模塊不需要在constructor構造器函數中初始化。
import { Router, NavigationExtras } from '@angular/router'

constructor(private router: Router) {}
1、js跳轉普通路由
首先在頁面上定義一個按鈕用來模擬跳轉
<button (click)="goHome()">js跳轉路由</button>
通過router.navigate()方法進行跳轉
// js跳轉普通路由
goHome() {
  this.router.navigate(['/home'])
}
2、js跳轉動態路由
<!-- js動態路由跳轉 -->
<button (click)="goToPath()">js動態路由跳轉</button>
通過router.navigate()方法進行跳轉
// js跳轉動態路由
goToPath() {
  // 路由跳轉 適合普通路由和動態路由
  this.router.navigate(['/first-component/', '123'])
}
3、js跳轉路由query形式傳參
注意：需要引入NavigationExtras模塊
<button (click)="queryRoute()">js跳轉路由query傳參</button>
通過router.navigate()方法進行跳轉
// js跳轉路由query傳參 (get傳值)
queryRoute() {
    let queryParams: NavigationExtras = {
      queryParams: {
        name: '王者榮耀'
      }
  }

  this.router.navigate(['/second-component'], queryParams);
}
嵌套路由
隨著你的應用變得越來越複雜，你可能要創建一些根組件之外的相對路由。這些嵌套路由類型稱為子路由。這意味著你要為你的應用添加第二，因為它是AppComponent之外的另一個<router-outlet>。
在這個例子中，還有兩個子組件，child-a和child-b。這裡的FirstComponent有它自己的<nav>和AppComponent之外的第二<router-outlet>。
<h2>First Component</h2>

<nav>
  <ul>
    <li><a routerLink="child-a">Child A</a></li>
    <li><a routerLink="child-b">Child B</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>
子路由和其它路由一樣，同時需要 path 和 component。唯一的區別是你要把子路由放在父路由的 children 數組中。
const routes: Routes = [
  {
    path: 'first-component',
    component: FirstComponent, // this is the component with the <router-outlet> in the template
    children: [
      {
        path: 'child-a', // child route path
        component: ChildAComponent, // child route component that the router renders
      },
      {
        path: 'child-b',
        component: ChildBComponent, // another child route component that the router renders
      },
    ],
  },
];
HTTP客戶端篇
使用HTTP與後端服務進行通信。大多數前端應用都要通過HTTP協議與伺服器通訊，才能下載或上傳數據並訪問其它後端服務。Angular 給應用提供了一個簡化的HTTP客戶端 API，也就是@angular/common/http中的HttpClient服務類。
HTTP客戶端服務提供了以下主要功能。
伺服器通訊的準備工作
1、要想使用HttpClient，就要先在app.module.ts中導入Angular的HttpClientModule。大多數應用都會在根模塊AppModule中導入它。
// app/app.module.ts
  
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}
2、在用到的地方引入HttpClient並在構造器函數中聲明。（我將要在NewsComponent組件中使用，所以在news.component.ts中引入HttpClient並在構造器函數中聲明）
// news.component.ts
  
import {HttpClient} from "@angular/common/http";
  
constructor(public http:HttpClient) { }
get 請求數據
1、在news.component.html文件中定義一個按鈕，來實現get方法請求伺服器數據。
<button (click)="getData()">get請求</button>
2、在news.component.ts文件中實現getData()方法，get請求接口可以使用開源的https:httpbin.org/get
// get請求
  getData() {
    // https:httpbin.org/get
    // https://httpbin.org/post
    let api = 'http://a.itying.com/api/productlist';
    this.http.get(api).subscribe((res: any) => {
      console.log(res);
      this.list = res.result;
    })
  }
post 提交數據
Angular5.x 以後get、post和伺服器交互使用的是HttpClientModule模塊。
1、在app.module.ts中引入HttpClientModule並注入
import {HttpClientModule} from '@angular/common/http';
  
imports: [ BrowserModule, HttpClientModule ]
2、在用到的地方引入HttpClient、HttpHeaders模塊並在構造器函數中聲明HttpClient。
在news.component.html文件中定義一個按鈕，來實現post請求伺服器數據。
<button (click)="doLogin()">post提交數據</button>
2、在news.component.ts文件中實現doLogin()方法，post請求接口可以使用開源的https:httpbin.org/post。
// post請求
  doLogin() {
    const httpOptions = {
      headers: new HttpHeaders({"content-type": 'application/json'})
    };
    let url = 'https://httpbin.org/post';
    this.http.post(url, {name: '小笑殘虹', age: 18}, httpOptions).subscribe((res: any) => {
      console.log(res);
      this.postDate = res.json;
    })
  }
Jsonp 請求數據
1、在app.module.ts中引入HttpClientModule、HttpClientJsonpModule 並注入。
import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http';
  
imports: [ BrowserModule, HttpClientModule, HttpClientJsonpModule ]
2、在用到的地方引入HttpClient並在構造函數聲明。
// news.component.ts
  
import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }
<button (click)="getJsonp()">jsonp處理跨域</button>
// jsonp 跨域請求
  getJsonp() {
    /*
    * http://a.itying.com/api/productlist?callback=xxx
    * http://a.itying.com/api/productlist?cb=xxx
    * */
    let api = 'http://a.itying.com/api/productlist';
    this.http.jsonp(api, 'callback').subscribe((res: any) => {
      console.log(res);
      this.list = res.result;
    })
  }
Angular 中使用第三方模塊 axios 請求數據
1、安裝 axios
npm install axios --save
2、用到的地方引入 axios
import axios from 'axios';
3、看axios文檔使用
axios.get('/user?ID=12345') 
  .then(function (response){ 
  // handle success console.log(response); 
  }).catch(function (error) {
  // handle error console.log(error); 
  }).then(function () { 
  // always executed 
  });
下面，我們創建一個HttpService來使用axios，在這裡可以對axios進行一些封裝。
// service/http-service.service.ts
  
import {Injectable} from '@angular/core';

import axios from 'axios';

@Injectable({
  providedIn: 'root'
})
export class HttpServiceService {

  constructor() {
  }

  axiosGet(api) {
    return new Promise((resolve, reject) => {
      axios.get(api)
        .then(res => {
          resolve(res);
        })
    })
  }
}

然後在app.module.ts中引入HttpServiceService服務並注入到providers數組中。
// app.module.ts
  
// 引入服務
import {HttpServiceService} from './service/http-service.service';
  
// 注入服務
providers: [HttpServiceService],
之後在NewsComponent組件中使用HttpServiceService服務
// news.component.ts
  
// 引入服務
import {HttpServiceService} from '../service/http-service.service'

// 初始化
constructor(public httpService: HttpServiceService) {}
<!--news.component.html-->
<button (click)="axiosGetData()">通過axios獲取數據</button>
// news.component.ts
  
// axios get方法獲取數據
  axiosGetData() {
    let api = 'http://a.itying.com/api/productlist';
    this.httpService.axiosGet(api).then((res: any) => {
      console.log(res);
      this.list = res.data.result;
    })
  }

相關焦點

  • 【第1208期】AngularJS 1.x平滑升級Angular實戰
    第一步：創建新的Angular應用一開始，本文假設我們使用Angular CLI來搭建一個新的Angular應用:ng new migrated為了讓這個新的方案結構清晰，在src目錄下創建了一個文件夾給已有的AngularJS代碼，另一個文件夾給新的Angular代碼。
  • Angular 4 指令快速入門
    指令的實現import { Directive, HostBinding} from '@angular/core';@Directive({    selector: '[greet]'})export class GreetDirective {  @HostBinding() innerText =
  • 通過5個簡單步驟升級到Angular 7
    升級到Angular 7隻需幾個簡單的步驟：首先，通過終端添加最新版本全局升級Angular版本：sudo npm install -g @angular/cli@latest在項目中本地升級版本，並確保新版本的更改反映在package.json文件中ng update @angular/cli升級package.json中的所有依賴項和dev依賴項依賴關係：npm install -
  • Angular中sweetalert彈框的使用詳解,最全了!
    一、下載文件npm installangular-sweetalertnpm installsweetalert當npm下載angular-sweetalert時，會附帶下載sweetalertAngular V1.2.30Angular-sweetalert V1.0.4Sweetalert V2.1.0因為我們項目使用的angular
  • Angular 10 版本現已發布
    如何更新到版本10請訪問update.angular.io以獲取詳細信息和指導。為了獲得最佳的更新體驗，我們建議始終一次升級一個主要版本。更新：ng update @ angular / cli @ angular / core您可以在《更新到版本10指南》中閱讀有關此更新的更多信息。
  • Angular2 架構總覽
    Angular提供了一系列庫模塊，每個模塊實際上是對多個邏輯上相關的私有模塊包裝後提供的公共外觀模式。例如angular2/core、angular2/common、angular2/router、angular2/http。
  • Angular 2官方文檔導讀
    而帶你的人幫你解決問題時，可能也是直接告訴你去查文檔的某個位置。AngularJS 1 熟練工轉型如果你對AngularJS 1.x已經到了熟練甚至精通的程度，那麼學習Angular 2並不難。請先閱讀https://angular.cn/docs/ts/latest/cookbook/a1-a2-quick-reference.html。
  • 前端框架 Angular 11.0.0 正式發布,不再支持 IE 9 、10
    查看更多的變更日誌，請訪問：  https://github.com/angular/angular/blob/master/CHANGELOG.md如果想升級到 Angular 11 ，可以執行以下命令：ng update @angular/cli @angular/core
  • Vue.js 作者回應『Angular有哪些地方比Vue更優秀?』
    從一開始 vue-cli 就是這樣的設計意圖，項目真正的工具鏈在項目模板裡面而不是 CLI 裡面。相比之下 @angular/cli 是一個全包式的命令行工具，一切都是通過 `ng` 來執行，但這不代表 `ng` 有的命令 Vue 就沒有對應的功能 —— 比如在 vue-cli 生成的項目裡面：除了 i18n 之外，@angular/cli 有的 Vue 都有。
  • 如何做好讀書筆記和學習筆記?
    相信很多人都會有這樣的困惑，就是自己在參加完一場講座或者學習完一項技能功課時，回顧下來，好像自己從中的收穫並不多。這其中很大一部分原因就是，你不會做筆記，記錄重點。不管是參加多麼優秀的培訓、講座，或者學習技能，如果你不會做筆記，或者你的筆記無法再現當時的學習內容，那麼你的學習是浪費時間，而且你吸收的知識也很容易忘記，到最後是白學。要如何做好讀書筆記呢？下面幾點能夠幫助你一、學習過程中最重要的是什麼？
  • 使用 AngularJS & NodeJS 實現基於 token 的認證應用
    在這個例子中，我們沒有返回的 session 或者 cookie，並且我們沒有返回任何 HTML 內容。那意味著我們可以把這個架構應用於特定應用的所有客戶端中。你可以看一下面的架構體系：如果這個項目使用版本號 >= 0.10.0 的 NodeJS 創建，那麼還有一個叫做 engines 的屬性。這對那些像 HeroKu 的 PaaS 服務很有用。我們也會在另外一節中包含那個話題。
  • 在ASP.NET Core中使用Angular2,以及與Angular2的Token base身份認證
    3.3.2.配置啟動文件以啟用Angular2在wwwroot下新建目錄app,app擁有如下文件：app.component.tsimport { Component } from '@angular
  • 「蝶骨」學習筆記
    這一深度對手術器械長度選擇非常重要。>顱神經和顱神經核的功能解剖學習筆記腦幹的血液供應解剖學習筆記腦幹與顱神經的關係——解剖學習筆記從裡到外看「第四腦室」→解剖學習筆記小腦的功能解剖>學習筆記→讓人「迷糊」的腦幹神經解剖學習筆記→眼球運動及瞳孔對光反射的神經機制學習筆記 | 顱骨解剖——美圖分享學習筆記 |  腦顱骨——美圖分享
  • 學習護理(一) | 《經濟學人》精讀筆記
    這很重要-請體驗社群的小夥伴，下載「知識星球」app收穫最佳體驗，這樣你就能收到我們的推送了：）這是外刊看世界的第478篇《經濟學人》精讀筆記大家期待已久的精讀筆記已經上線，請戳「精讀筆記合輯、「精讀筆記合輯」第五輯來襲！了解吧！本文取自經濟學人4月27日網站文章。
  • 筆記在英語學習中的重要性與記筆記的方法
    記筆記是學生在學習過程中養成的良好習慣。它不僅在平時的研究中起著重要的作用，而且在複習階段也起著重要的作用。那麼，如果筆記學習風格，在英語學習中使用，會起到什麼作用呢？學生在做筆記時，應該注意什麼？接下來，我會詳細解釋給你聽。
  • Angular8——設置正確的靜態查詢策略
    時至今日，仍然會在很多angular項目中見到有人使用jQuery或zepto，不是說jQuery不好，而是不合適，這樣做無異於在試圖突破框架的約束和限制。接下來我們使用查詢元素，設置值的思路實現一個demo，這種方式在angular裡應該是退而求其次的選擇，demo只是為了說明思路的可行性，最重要的是體會如何正確設置static查詢策略。
  • 如何做好學習筆記
    學習方法，這是無數同學思考的問題，然而並沒有一套放之四海而皆準的學習方法，每個人都有一套屬於自己的學習方法，但效果好不好就因人而異了，今天我們分享一個學習方法：做筆記。學習筆記是無數同學和老師經常強調的方法，然而很多同學並不會做學習筆記，很多時候被筆記帶偏，反而影響學習，拉低自己的分數。如何做筆記才是正確的姿勢呢？我們看一看不正確的筆記方法就知道如何做筆記了。1.整節課都在記筆記
  • WEB前端最全學習網
    ：http://www.lvyestudy.com/html5tricks：https://www.html5tricks.com/HTML中文學習網：http://www.html5cn.com.cn/HTMLGOODIES：https://www.htmlgoodies.com/html5/index.phpJavaScript學習網站
  • 學習英語怎麼樣記錄筆記?
    每一個科目的學習過程中都需要記筆記。學習筆記的正確使用是可以幫助我們在學習上提高效率的。英語的學習更需要記錄筆記了。英語做為一種另外的語言，想要學習好，更需要有效的記錄筆記來幫我們提高學習效率。而我提倡的記錄筆記的方法就是多管齊下的方法。
  • 小築筆記——工作、學習、閱讀、資料、靈感筆記
    今天呢，給大家帶來一款針對一些經常喜歡記筆記的用戶而打造的記筆記工具，小築筆記特殊的記筆記格式可以讓用戶反覆觀看而不讓，用戶寫起筆記來也很方便快捷。 小築筆記app是一款專門用於資料保存管理的軟體，該軟體是適合於學生或者工作者，是可以將自己的筆記、工作內容可以進行很好的整理，非常方便。小築筆記，樹形結構，無限分層，自由排序。利於分析分解、梳理知識、思想、事情。整潔清晰，為長久的積累、使用而設計。