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)

• $npm install bootstrap -S
• 修改 style.css 加入

@import "~bootstrap/dist/css/bootstrap.css"

$ 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>

export class Post {
  id: number;
  title: string;
  body: string;
}

 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'},    

]

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);
  }
}

<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>

$ng generate service posts
CREATE src/app/services/posts.service.spec.ts (328 bytes)
CREATE src/app/services/posts.service.ts (134 bytes)

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);
  }
}

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);
    }
}

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 { }

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");
   }
}

<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>