本節來介紹angular中的操作以及TypeScript語法的簡單介紹。關於TypeScript語法的更為詳細的內容,打算在整個angular教程結束后再單獨介紹。
0. 安裝所需要的插件及配置插件
-
安裝bootstrap
進入項目目錄,使用以下命令安裝:
cd media npm install bootstrap --save
然后在angular.json配置文件中添加樣式的引用。
"styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ]
-
安裝jquery
cd media npm install jquery --save
在angular.json中引入jquery:
"scripts": ["./node_modules/jquery/dist/jquery.min.js"]
1. angular中新建一個組件
現在我們在項目中新建一個名稱為article的組件,由於手動創建組件比較麻煩,所以我們使用angular提供的angular cli工具來創建(手動創建的方法附在文末,不感興趣的童鞋不用看),命令如下:
ng generate component article
也可使用命令的簡寫方式:
ng g c article
src/app
目錄下會多出一個article文件夾,里面angular cli工具幫我們創建的4個文件,article.component.css, article.component.html,article.component.spec.ts, article.component.ts。同時,還會更新ng.modules.ts這個文件。
2. 引用組件
在根組件的模板文件app.component.html中加入<app-article></app-article>
即可引用我們剛剛新建的article組件,app.component.html代碼:
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<!-- 下面是對article組件的引用 -->
<app-article></app-article>
顯示效果如下:
表明我們的article組件引用成功。
3. 組件的嵌套引用
新建一個operator組件,然后在article組件中引入operator。article.component.html模板文件內容:
<p>
article works!
</p>
<!-- 引用operator組件 -->
<app-operator></app-operator>
頁面刷新后顯示如下:
引用關系如下: 根組件(app)引用了article,article又引用了operator.
4.組件選擇器的其它定義方式
組件選擇器的定義還可以通過屬性和類的方法來定義,如下所示:
@Component({
//selector: 'app-article',
//selector: '[app-article]', //屬性方式
selector: '.app-article',//類方式
templateUrl: './article.component.html',
styleUrls: ['./article.component.css']
})
則引用組件的方式也需要發生改變:
<!--屬性方式來引用-->
<div app-article></div>
<!--類方式引用-->
<div class="app-article"></div>
5. 數據模型定義以及數據綁定
將業務邏輯中的數據通過插值表達式顯示在模板文件,即html頁面上,或者將html頁面上的事件傳輸到業務邏輯。
-
插值表達式
首先我們在article頁面上添加需要顯示的內容:
<p> 本篇文章的ID是{{id}},標題是{{title}} </p>
同時我們在article.component.ts中定義id和title。
export class ArticleComponent implements OnInit { id:number = 1; title:string = "第一篇文章"; }
頁面顯示效果如下:
-
屬性綁定
在article.component.html中定義如下內容:
文章ID:<input type="text" [value]="id" > 文章標題:<input type="text" [value]="title">
頁面顯示效果如下:
-
插值運算
article.component.html代碼:
{{ 5 + 3}}, {{ "a" + "b"}}
頁面顯示效果:
-
事件綁定
article.component.ts中設置一個狀態,然后新建一個函數供頁面調用,在函數中改變這個狀態。
export class ArticleComponent implements OnInit { status = "隱藏狀態"; changeStatus(){ this.status = "顯示狀態"; } }
article.component.html中定義一個按鈕並綁定changeStatus()這個函數。
{{status}} <button class="btn btn-info btn-sm" (click)="changeStatus()">改變狀態</button>
按鈕單擊前和單擊后頁面顯示效果分別如下:
-
事件綁定傳遞數據
現在我們實現當我們在input框中輸入內容的時候,內容同時顯示在輸入框的下面,article.component.html文件內容:
<input type="text" (keyup) = "updateContent($event)"><br> {{content}}
article.component.ts中共定義變量以及函數:
content = ""; updateContent(event:any){ this.content = event.target.value; }
頁面顯示效果:
延伸閱讀: 手動創建組件
- 組件創建
在app目錄下新建一個文件夾,名字叫article.在article目錄下新建article.componnent.ts的空白文件,注意文件名字的命名,article是組件名稱,component表示類型,即組件,.ts則是文件的后綴名,文件內容如下所示:
import {Component} from '@angular/core';
@Component({
selector: 'app-article',
templateUrl:'./article.component.html'
})
export class ArticleComponent{
}
文件內容說明:
第一行從@angular/core
中引入Component裝飾器,然后建立一個普通的類ArticleComponent
,並用@Component裝飾它,在@Component中,分別定義組件的選擇器名稱和模板文件。
然后在article中新建模板文件article.component.html
文件內容與普通html文件無異。
- 組件的注冊
打開app目錄下的app.modules.ts文件,文件內容如下:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
文件內容的說明:
- 上面import部分是模塊以及裝飾器的引入。
- declarations部分是聲明模塊的內部成員。
- imports部分是導入其它模塊。
- providers指定應用程序根級別需要使用的service。
- bootstrap是app啟動的根組件。
- export控制將那些內部成員暴露給外部使用。
修改文件內容,添加import {ArticleComponent} from './article/article.component';
將模塊引入,然后在declarations中添加ArticleComponent. 修改后的內容如下所示:
//...省略部分代碼...
import { AppComponent } from './app.component';
import {ArticleComponent} from './article/article.component'; //step1 引入
@NgModule({
declarations: [
AppComponent,
ArticleComponent //step2 聲明
]
})
//...省略部分代碼...