Emacs for Angular
- 程式自動補全: company + tide
- 語法檢查: flycheck + tide
- 定義顯示: Eldoc + tide
- 跳到函式定義: tide
- 尋找變數,函式出現處:tide
- 重新命名: tide
安裝
(use-package tide
:ensure t
:after (typescript-mode company flycheck)
:hook ((typescript-mode . tide-setup)
(typescript-mode . tide-hl-identifier-mode))
:config
(setq tide-completion-enable-autoimport-suggestions t)
)
啟動及執行新的專案
$ng new hello $ng serve (--host 0.0.0.0 -- --port xxxx)
使用 bootstrap
- $npm install bootstrap -S
- 修改 style.css 加入
@import "~bootstrap/dist/css/bootstrap.css"
建立新的 component
$ ng generate component posts CREATE src/app/posts/posts.component.css (0 bytes) CREATE src/app/posts/posts.component.html (23 bytes) CREATE src/app/posts/posts.component.spec.ts (614 bytes) CREATE src/app/posts/posts.component.ts (261 bytes) UPDATE src/app/app.module.ts (545 bytes)
加入畫面
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="card mb-4 shadow-sm"> <div class="card-body"> <div class="card-title">title</div> <div class="card-text">card text</div> <a href="" class="btn btn-outline-primary">More...</a> </div> </div> </div> </div> </div>
加入 Post type
export class Post { id: number; title: string; body: string; }
加入 services/mock-posts.ts
import { Post} from '../models/post'; export const POSTS: Post[] = [ {id: 1, title: 'first post', body: 'first post content'}, {id: 2, title: 'secon post', body: 'second post content'}, {id: 3, title: 'third post', body: 'third post content'}, {id: 4, title: 'forth post', body: 'forth post content'}, ]
修改 posts.components.ts,
import { Component, OnInit } from '@angular/core'; import { POSTS } from '../services/mock-posts'; @Component({ selector: 'app-posts', templateUrl: './posts.component.html', styleUrls: ['./posts.component.css'] }) export class PostsComponent implements OnInit { posts = POSTS; constructor() { } ngOnInit() { console.log(this.posts); } }
修改 posts.components.html
<div class="container"> <h2 class="text-center my-4">List of Posts</h2> <div class="row"> <div class="col-md-6" *ngFor="let post of posts"> <div class="card mb-4 shadow-sm"> <div class="card-body"> <div class="card-title">{{post.title}}</div> <div class="card-text mb-3">{{post.body}}</div> <a href="" class="btn btn-outline-primary">More...</a> </div> </div> </div> </div> </div>
增加 posts service
$ng generate service posts CREATE src/app/services/posts.service.spec.ts (328 bytes) CREATE src/app/services/posts.service.ts (134 bytes)
使用 rxjs 來建立 posts service
import { Injectable } from '@angular/core'; import { Post } from '../models/post'; import { POSTS } from './mock-posts'; import { Observable, of } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class PostsService { constructor() { } getPosts(): Observable<Post[]> { return of(POSTS); } }
post.components.ts 用 subscribe 來接 rxjs
import { Component, OnInit } from '@angular/core'; import { PostsService } from '../services/posts.service'; @Component({ selector: 'app-posts', templateUrl: './posts.component.html', styleUrls: ['./posts.component.css'] }) export class PostsComponent implements OnInit { posts = []; constructor(private postService:PostsService) { } ngOnInit() { this.getPosts(); } getPosts() { this.postService.getPosts() .subscribe(posts => this.posts = posts); } }
加入 HttpClientModule
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { PostsComponent } from './posts/posts.component'; @NgModule({ declarations: [ AppComponent, PostsComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
修改 posts.service
import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Post } from '../models/post'; //import { POSTS } from './mock-posts'; import { Observable, of } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class PostsService { constructor(private http:HttpClient) { } getPosts(): Observable<Post[]> { //return of(POSTS); return this.http.get<Post[]>("https://jsonplaceholder.typicode.com/posts?userId=1"); } }
加入 slice pipe
<div class="container"> <h2 class="text-center my-4">List of Posts</h2> <div class="row"> <div class="col-md-6" *ngFor="let post of posts"> <div class="card mb-4 shadow-sm"> <div class="card-body"> <div class="card-title">{{post.title}}</div> <div class="card-text mb-3">{{post.body | slice:0:50 }}...</div> <a href="" class="btn btn-outline-primary">More...</a> </div> </div> </div> </div> </div>