AngularJS 初體驗

安裝環境

npm install -g @angular/cli
cd
// 建立應用程式及環境
ng new movies
cd movies
npm install --save @angular/material @angular/cdk @angular/animations
ng serve --open  // 開啟瀏覽器測試 opens a browser to http://localhost:4200/.
  • 原始程式碼會位於: 專案目錄/src/ 目錄中
  • 輸出目錄可參考:tsconfig.json 中的 outDir 參數
  • src/app 下:
app.component.ts— the component class code, written in TypeScript.
app.component.html— the component template, written in HTML.
app.component.css— the component's private CSS styles.

增加第一個元件

ng generate component movies  // 會在src/app 目錄下產生 movies 目錄
  • 開啟 src/app/movies/movies.component.ts
    • @Component 是一個用來定義及設定相關變數
selector:元件 CSS element selector
templateUrl:the location of the 元件樣板檔。
styleUrls:the location of the 元件特有的 CSS styles.

ngOnInit()  在元件建立後會被呼叫,適合用來放置參數初始化的地方
  • 將公用資料以class形式放置在 src/app 目錄下(或另開一個目錄集中放置)
// src/app/movies.ts
export class Movies {
    moviesID: number;
    title: string;
}
  • movies.component.ts 中引入 movies.ts
import { Movies } from '../movies'

// 程式中使用
movies: Movies = {
   moviesID: 1,
   titel: 'Hello Movies'
}
  • 把建立好的元件顯示在畫面中 movies.component.html
<div>
  <label>Movies name:
    <input [(ngModel)]="movies.title" placeholder="movies name">
  </label>
</div>

<h2>{{ movies.title }} </h2>
<div><span>id: {{ movies.moviesID}} </span></div>

// 由於我們使用了form元件(input),因此必須要把form模組引入,需修改app.module.ts
// 加入: import { FormsModule } from '@angular/forms';
  • 把元件顯示在主畫面中 app.component.html
  <h1>
    {{ title }}!
  </h1>
  <app-movies></app-movies>

參考文件

發佈留言